vue：自定义指令
2024-04-09 11:45:49
<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',
data: {
num: 1,
color: 'red'
},
methods: {
add(){
this.num++;
}
}
});
说明：
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
最新文章
- PetaPoco ORM 增加返回DataTable的方法
- [课程设计]Sprint One 总结&发表评论&团队贡献分
- 【java】之 apache commons-codec 与Apache Digest demo实例,支持md5 sha1 base64 hmac urlencode
- 常用的工具类4-IP类
- MAC air 安装redis-3.0.6
- 13. 用Roberts、Sobel、Prewitt和Laplace算子对一幅灰度图像进行边缘检测。观察异同。
- 【转】C++ 单例模式
- lenovo X230热键功能
- Hibernate 事物隔离级别 深入探究
- hdu2896
- PHP null常量和null字节的区别
- windows 下查看端口占用命令
- Jmeter -- 初体验
- stl_map,set 用法
- 【原】无脑操作：IDEA使用时，提示"8080端口被占用"的解决
- PCD文件格式详解及在PCL下读取PCD文件
- 第29月第2天 charles
- mui预加载
- [CQOI2017]老C的任务
- 编写第一个H5页面