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 相关文章推荐
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
解决自定义$(id)的方法与jquery选择器$冲突的问题
Jun 14 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 Javascript
jquery实现数字输入框
Feb 22 Javascript
jQuery手风琴的简单制作
May 12 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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执行速度全攻略(上)
2006/10/09 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
php框架CI(codeigniter)自动加载与自主创建对象操作实例分析
2020/06/06 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
JQuery解析XML的方法小结
2016/04/02 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python利用hook技术破解https的实例代码
2013/03/25 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
CSS3中各种颜色属性的使用教程
2016/05/17 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
波兰在线运动商店:YesSport
2020/07/23 全球购物
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
产品调价通知函
2015/04/20 职场文书
运动会入场词
2015/07/18 职场文书
汽车销售合同文本
2019/08/08 职场文书
《悲惨世界》:比天空更广阔的是人的心灵
2020/01/16 职场文书