简单学习vue指令directive


Posted in Javascript onNovember 03, 2016

本文为大家分享了vue指令directive的使用方法,供大家参考,具体内容如下

1.指令的注册

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

Vue.directive('dirName',function(){

//定义指令

});

另外一种是局部注册:

new Vue({

directives:{



dirName:{




//定义指令



}


}

});

2.指令的定义

指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期

bind: 只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。

update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新(详细的钩子函数参数见下)。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次, 指令与元素解绑时调用。

在这里其他几个都好理解,关于模板更新(update)这里,本人的理解是:该指令所在的模板有变化而需要重新渲染的时候,比如当一个输入框的model发生了变化就会触发指令。当然此处说的比较模糊,具体的还有待研究。

这段代码可以实现关于update的使用

<div id="app">
<input type="text" v-focus="name" v-model="name" :data-name="name">

<button type="button" @click="name='zw'">click</button>


<!--当点击按钮的时候name改变,继而触发update中的方法-->
</div>
<script>


Vue.directive('focus',{


bind: function(el, binding){


console.log('bind:',binding.value);

},

inserted: function(el, binding){


console.log('insert:',binding.value);

},

update: function(el, binding, vnode, oldVnode){


el.focus();


console.log(el.dataset.name);//这里的数据是可以动态绑定的


console.table({



name:binding.name,



value:binding.value,



oldValue:binding.oldValue,



expression:binding.expression,



arg:binding.arg,



modifiers:binding.modifiers,



vnode:vnode,



oldVnode:oldVnode


});

},

componentUpdated: function(el, binding){


console.log('componentUpdated:',binding.name);

}
});
new Vue({

el:'#app',

data:{


name:'zwzhai'

}
});
</script>

3.钩子函数的定义

以下是官方提供的几个参数:

el: 指令所绑定的元素,可以用来直接操作 DOM 。
binding: 一个对象,包含以下属性:
name: 指令名,不包括 v- 前缀。
value: 指令的绑定值, 例如: v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" , expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo, arg 的值是 "foo"。
modifiers: 一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是{ foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点,查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

这几个参数,大家看文档也能理解,就不多说了,关于bingding的几个属性说一下自己的看法,value这个属性,可以传字面量,也可以传单条语句(如上),还可以以变量的形式如<input type="text" v-focus="name" v-model="name">;arg这里可以传一个字符串,因为在value去访问绑定值得时候拿到的不是直接写的那个,也就是说v-focus="name",这个name永远都是一个变量,需要定义赋值,而arg可以直接访问该值,如v-focus:foo,那么在钩子函数中拿到的就是foo这个字符串。

在vue的指令中是不可以双向数据绑定的,如官方所说:除了 el 之外,其它参数都应该是只读的,尽量不要修改他们。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。这里补充下关于dataset的知识:

data-  是html5的一个新属性,查了下浏览器支持程度,目前的主流浏览器都是支持的,IE的话要到10以上。具体的使用:在HTML中以属性的方式去写,data-yourname="value",在js中取这个属性就不用使用getAttribute这个方法,而是直接访问,ele.dataset.yourname,在js中你也可以添加和删除,添加:ele.dataset.dessert="yourname",删除:dette ele.dataset.name。此外,这个属性可以用作css选择器:.class[data-name]:{}。

最后附上自己写的一个vue小程序,简单的页面切换,使用vue-cli构建,sample的简单版,还使用的mint-ui组件库,git地址:https://github.com/Stevenzwzhai/news-vue

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

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

Javascript 相关文章推荐
TFDN图片播放器 不错自动播放
Oct 03 Javascript
js下将字符串当函数执行的方法
Jul 13 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
bootstrapfileinput实现文件自动上传
Nov 08 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
详解Vuex下Store的模块化拆分实践
Jul 31 Javascript
React forwardRef的使用方法及注意点
Jun 13 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 #Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 #Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 #Javascript
探索Vue.js component内容实现
Nov 03 #Javascript
javascript跨域请求包装函数与用法示例
Nov 03 #Javascript
预防网页挂马的方法总结
Nov 03 #Javascript
网页挂马方式整理及详细介绍
Nov 03 #Javascript
You might like
通过ICQ网关发送手机短信的PHP源程序
2006/10/09 PHP
php表单转换textarea换行符的方法
2010/09/10 PHP
php邮件发送,php发送邮件的类
2011/03/24 PHP
组合算法的PHP解答方法
2012/02/04 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
2014/12/16 Javascript
jQuery学习笔记之jQuery中的$
2015/01/19 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
浅谈React 服务器端渲染的使用
2018/05/08 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
Python递归函数定义与用法示例
2017/06/02 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python基于whois模块简单识别网站域名及所有者的方法
2018/04/23 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
python写一个随机点名软件的实例
2019/11/28 Python
python实现秒杀商品的微信自动提醒功能(代码详解)
2020/04/27 Python
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
小学生感恩演讲稿
2014/04/25 职场文书
文明班集体申报材料
2014/05/23 职场文书
校长创先争优承诺书
2014/08/30 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
销售2014年度工作总结
2014/12/08 职场文书
遗失说明具结保证书
2015/02/26 职场文书
端午节寄语2015
2015/03/23 职场文书
公司要求试用期员工提交“述职报告”,该怎么写?
2019/07/17 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书