vue:自定义指令
发布时间:2020-12-14 03:22:51 所属栏目:大数据 来源:网络整理
导读:div id="app" div v-lang="color"{{num}}/div button @click="add"add/button/div Vue.directive(‘lang‘,function(el,binding){ console.log(el); console.log(binding); el.style=‘color:‘ + binding.value;}); let vm = new Vue({ el: ‘#app‘,data:
<div id="app"> <div v-lang="color">{{num}}</div> <button @click="add">add</button> </div> Vue.directive(‘lang‘,function(el,binding){ console.log(el); console.log(binding); el.style=‘color:‘ + binding.value; }); let vm = new Vue({ el: ‘#app‘,data: { num: 1,color: ‘red‘ },methods: { add(){ this.num++; } } }); el: 指令所绑定的元素,可以用来直接操作DOM。 binding: 一个对象,包含指令的很多信息。 vnode: Vue编译生成的虚拟节点。 <div id="app"> <div v-lang="color">{{num}}</div> <button @click="add">add</button> </div> <div><button onclick="unbind()">解绑</button></div> function unbind() { vm.$destroy();//另外起一个方法解绑 } Vue.directive(‘lang‘,{//五个注册指令的钩子函数 bind: function(){//被绑定 console.log(‘1 - bind‘); },inserted: function(){//绑定到节点 console.log(‘2 - inserted‘); },update: function(){//组件更新 console.log(‘3 - update‘); },componentUpdated: function(){//组件更新完成 console.log(‘4 - componentUpdated‘); },unbind: function(){//解绑 console.log(‘5 - bind‘); } }); let vm = new Vue({ el: ‘#app‘,methods: { add(){ this.num++; } } }); 说明: 1、bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。 2、inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。 3、update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。 4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。 5、unbind:只调用一次,指令与元素解绑时调用。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |