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 相关文章推荐
简单易用的倒计时js代码
Aug 04 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
js实现兼容IE和FF的上下层的移动
May 04 Javascript
jQuery超赞的评分插件(8款)
Aug 20 Javascript
Javascript页面跳转常见实现方式汇总
Nov 28 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
少女风vue组件库的制作全过程
May 15 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
解析htaccess伪静态的规则
2013/06/18 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
event.X和event.clientX的区别分析
2011/10/06 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
python编程实现归并排序
2017/04/14 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
Django数据库操作之save与update的使用
2020/04/01 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
python Tornado框架的使用示例
2020/10/19 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
StubHub美国:购买或出售您的门票
2019/07/09 全球购物
密封类可以有虚函数吗
2014/08/11 面试题
兼职业务员岗位职责
2014/01/01 职场文书
自荐信如何制作?
2014/02/21 职场文书
公共场所标语
2014/06/30 职场文书
委托书怎么写
2014/07/31 职场文书
我的中国心演讲稿
2014/09/04 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
关于EntityWrapper的in用法
2022/03/22 Java/Android
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技