Vue2 自定义全局指令Vue.directive和指令的生命周期
来源:互联网 发布:js 页面加载后 合计 编辑:程序博客网 时间:2024/05/21 07:57
在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>
阅读全文
1 0
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- Vue.directive 自定义指令
- Vue自定义指令(directive)
- Vue.directive 自定义指令
- vue全局自定义指令和局部自定义指令
- Vue——自定义指令directive
- vue生命周期及自定义指令
- Vue 指令(Directive)
- angular2.0指令 (directive) 和组件 (component) 的生命周期解析
- vue2自定义指令的作用
- vue学习笔记6 Vue.directive自定义指令
- 自定义指令directive的作用域和绑定策略
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- 自定义指令(directive)
- Angular2-自定义指令@Directive
- 自定义指令-directive
- angularJS1自定义directive指令的创建方式
- directive-自定义指令的方法.md
- SSM整合时的xml配置参考
- 计算机视觉资源文件--链接整理
- V4,V7,V13兼容包
- Nginx负载均衡
- Android 二级图片缓存,图片优化,图片异步加载框架设计
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- Spring Cloud 父项目建立
- js:for、$.each、 forEach和break和continue
- position 定位属性之absolute与fixed的区别
- Linux中buffer cache 与 page cache的区别
- C语言解题出现的提示
- C/C++ 指针函数返回值的一些问题
- java面试题-理论
- c程序调用汇编函数