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 相关文章推荐
客户端静态页面玩分页
Jun 26 Javascript
DWR Ext 加载数据
Mar 22 Javascript
理解Javascript_10_对象模型
Oct 16 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
Jan 11 Javascript
javascript实现获取字符串hash值
May 10 Javascript
预防网页挂马的方法总结
Nov 03 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
[jQuery] 事件和动画详解
Mar 05 jQuery
js的新生代垃圾回收知识点总结
Aug 22 Javascript
小程序实现横向滑动日历效果
Oct 21 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
javascript多种数据类型表格排序代码分析
2010/09/11 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
JavaScript数据类型判定的总结笔记
2015/07/31 Javascript
angular基于路由控制ui-router实现系统权限控制
2016/09/27 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
详解微信小程序开发之下拉刷新 上拉加载
2016/11/24 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
angular2路由切换改变页面title的示例代码
2017/08/23 Javascript
在Create React App中启用Sass和Less的方法示例
2019/01/16 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
原生JavaScript实现拖动校验功能
2020/09/29 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
在Python中使用zlib模块进行数据压缩的教程
2015/06/26 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python爬取三国演义的实现方法
2016/09/12 Python
python实现猜数字小游戏
2020/03/24 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python字符串判断密码强弱
2020/03/18 Python
python是怎么被发明的
2020/06/15 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
副总经理岗位职责
2014/03/16 职场文书
银行职员自我鉴定
2014/04/20 职场文书
跳蚤市场口号
2014/06/13 职场文书
建筑工地宣传标语
2014/06/18 职场文书
学用政策心得体会
2014/09/10 职场文书