vue指令以及dom操作详解


Posted in Javascript onMarch 04, 2017

“AngularJS 通过被称为 指令 的新属性来扩展 HTML。AngularJS 通过内置的指令来为应用添加功能。AngularJS 允许你自定义指令。”

这是我最初接触“指令”这个词。还记得那时候,ng大行其道的时候,我特别好奇怎么给一个div加一个"ng-app" 就能解决这么多问题。

后来随着前端工作的深入,我用了jq的data-attr并且学会了jq的插件使用。但,这这并不能让我把它“指令”联想到一块,后来插件需要给节点加个标示来显示某种“状态管理” 我用了class  例如:pending,loading-end.

但是感觉和样式混在一块总是感觉不自在,后来我直接添加一个自定义标签 例如:attr-pending,attr-loading-end,通过dom上的自定义标签来标示某个状态是否完成。

在这个时候,发现"attr-pending,attr-loading-end"与“ng-app,ng-html”什么的非常类似,才恍然大悟,其实“指令”也可以理解为"标识",而具体的逻辑与它无关,它只是一个“标识”罢了。至于,ng-repeat,ng-click  同样可以理解某个程序在dom上一个“标识” 程序通过它来挂载某个功能。

现在接触了vue,vue比ng在开发上来说代码量很明显少了很多,“指令”一般开发人员不需要自己来实现。但是如果是开发一套ui交互的组件,还是很需要它。

bind: 仅调用一次,当指令第一次绑定元素的时候。

update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数。

unbind:仅调用一次,当指令解绑元素的时候。

1.指令的注册

指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册:

Vue.directive('dirName',function(){
//定义指令
});

另外一种是局部注册:
new Vue({

directives:{


dirName:{




//定义指令


}

}
});

2.可在指令函数配置中直接修改DOM[支持数据驱动] input里面的值修改的时候#demo里面的vue也会自动同步

<!DOCTYPE html> 
<html> 
<head lang="en"> 
 <meta charset="UTF-8"> 
 <title></title> 
 <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> 
</head> 
<body> 
<div> 
  <p>展示vue指令----vue和元素dom操作的完美结合【拓展】</p> 
  <p>{{msg}}</p> 
  <input type="text" v-model="msg"> 
</div> 
<div id="demo" v-demo-directive="LightSlateGray : msg"></div> 
 
<script> 
 Vue.directive('demoDirective', { 
  bind: function () { 
   this.el.style.color = '#fff' 
   this.el.style.backgroundColor = this.arg 
  }, 
  update: function (value) { 
   this.el.innerHTML = 
     'name - '  + this.name + '<br>' + 
     'raw - '  + this.raw + '<br>' + 
     'expression - ' + this.expression + '<br>' + 
     'argument - ' + this.arg + '<br>' + 
     'value - '  + value 
  } 
 }); 
 var demo = new Vue({ 
  el: 'body', 
  data: { 
   msg: 'hello!' 
  } 
 }) 
 
</script> 
</body> 
</html>

官网链接: http://v1-cn.vuejs.org/guide/custom-directive.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
flash 得到自身url参数的代码
Nov 15 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
js拼接html注意问题示例探讨
Jul 14 Javascript
JQuery中使用.each()遍历元素学习笔记
Nov 08 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
json定义及jquery操作json的方法
Oct 03 Javascript
express默认日志组件morgan的方法
Apr 05 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
JavaScript实现复选框全选功能
Apr 11 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 #Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 #Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 #Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 #Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 #Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 #Javascript
You might like
很让人受教的 提高php代码质量36计
2012/09/05 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
浅析js中的浮点型运算问题
2014/01/06 Javascript
jQuery中:lt选择器用法实例
2014/12/29 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
2017/06/28 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python实现的计数排序算法示例
2017/11/29 Python
基于Python的PIL库学习详解
2019/05/10 Python
python多进程读图提取特征存npy
2019/05/21 Python
python的pstuil模块使用方法总结
2019/07/26 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
html5响应式开发自动计算fontSize的方法
2020/01/13 HTML / CSS
婚庆司仪主持词
2014/03/15 职场文书
新法人代表任命书
2014/06/06 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
服务员态度差检讨书
2014/10/28 职场文书
2015年档案室工作总结
2015/05/23 职场文书
机器人瓦力观后感
2015/06/12 职场文书
pygame面向对象的飞行小鸟实现(Flappy bird)
2021/04/01 Python
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
海弦WR-800F
2022/04/05 无线电
MySQL中EXPLAIN语句及用法
2022/05/20 MySQL