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』名称冲突使用noConflict方法解决
Apr 22 Javascript
JQuery的Ajax跨域请求原理概述及实例
Apr 26 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
Jun 11 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
Flow之一个新的Javascript静态类型检查器
Dec 21 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
利用ES6语法重构React组件详解
Mar 02 Javascript
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
Jun 14 Javascript
vue实现分页栏效果
Jun 28 Javascript
vue实现验证用户名是否可用
Jan 20 Vue.js
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 采集获取指定网址的内容
2010/01/05 PHP
PHP对表单提交特殊字符的过滤和处理方法汇总
2014/02/18 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
php中Swoole的热更新实现代码实例
2021/03/04 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
javascript返回顶部效果(自写代码)
2013/01/06 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jquery自动切换tabs选项卡的具体实现
2013/12/24 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
vue+element实现表格新增、编辑、删除功能
2019/05/28 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
Vuex的实战使用详解
2019/10/31 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python类定义的讲解
2013/11/01 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python回调函数用法实例详解
2015/07/02 Python
selenium获取当前页面的url、源码、title的方法
2019/06/12 Python
python绘制直方图和密度图的实例
2019/07/08 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
美国在线健康和美容市场:Pharmapacks
2018/12/05 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
学习教师法的心得体会
2014/09/03 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
付款承诺函范文
2015/01/21 职场文书
博士给导师的自荐信
2015/03/06 职场文书
简爱电影观后感
2015/06/10 职场文书