对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018-08-30 09:37
1171 查看
在Vue中,自定义指令的生命周期,有5个事件钩子:1-bind 被绑定, 2-inserted 被插入, 3-update 开始更新, 4-componentUpdated 更新完成,5-unbind 解除绑定。我们可以设置指令在某一个事件发生时的具体行为。
例子如下:
页面一进后,
在控制台中设置一个新值:通过控制台设置的新name
再设置一个新值:通过控制台设置的新name
最后点击解绑,解除绑定(解除绑定之后,id="app"的Dom和vm的实例之间解除mvvm的绑定关系):
代码:
<h1>自定义指令及其生命周期</h1> <div id="app"> <div v-mydirective.modify1.mofify22="mycolor"> {{ name }} </div> </div> <button onclick="unbindApp()">解绑</button> <script> function unbindApp() { vm.$destroy(); } Vue.directive("mydirective",{ bind:function (el, binding, vnode) { //1-被绑定 console.log("1-bind 被绑定"); console.log("el:",el); console.log("binding:",binding); console.log("vnode:",vnode); el.style.color=binding.value; }, inserted:function (el, binding, vnode) { //2-被插入 console.log("2-inserted 被插入"); }, update:function (el, binding, vnode) { //3-更新 console.log("3-update 更新"); }, componentUpdated:function (el, binding, vnode) { //4-更新完成 console.log("4-componentUpdated 更新完成"); }, unbind:function (el, binding, vnode) { //5-解绑 console.log("5-unbind 解绑"); } }); var vm=new Vue({ el:"#app", data:{ mycolor:"blue", name:"mydirective指令" } }); </script>
以上这篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器
- vue 自定义全局方法,在组件里面的使用介绍
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
- 在vue生命周期中及时销毁全局作用的代码
- 添加自定义vue全局方法,同时给自定义的方法 传递component调用其方法
- JSP第一篇【JSP介绍、工作原理、生命周期、语法、指令、行为】
- Vue自定义全局组件(插件)
- Vuejs——(2)Vue生命周期,数据,手动挂载,指令,过滤器
- 自定义vue全局组件use使用
- 【13】vue.js — 自定义指定(directive)
- JSP第一篇【JSP介绍、工作原理、生命周期、语法、指令、行为】
- JSP介绍、工作原理、生命周期、语法、指令
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- 三步搞定自定义Vue全局组件
- vue学习--自定义全局vue组件
- 自定义类似于Jquery UI Selectable 的Vue指令v-selectable
- vue--自定义全局方法,在组件里面使用
- 创建自定义 AngularJS 指令:Part 7 Creating a Unique Value Directive using $asyncValidators
- Vue.js基础指令、基本介绍