Vue.directive 自定义指令
来源:互联网 发布:mac 上的page键 编辑:程序博客网 时间:2024/06/01 14:02
Vue.directive自定义指令
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>Vue.directive自定义指令</title></head><body><h1>Vue.directive自定义指令</h1><div id="app"> <div v-xiexin="color">{{num}}</div> <p><button @click="add">ADD</button></p></div><p> <button onclick="unbind()">解绑</button></p></body><script src="../dist/vue.js"></script><script> function unbind() { app.$destroy(); } Vue.directive("xiexin",{ bind:function(el,binding){//被绑定 console.log('1 - bind'); el.style = 'color:'+ binding.value; }, inserted:function(){//绑定到节点 console.log('2 - inserted'); }, update:function(){//组件更新 console.log('3 - update'); }, componentUpdated:function(){//组件更新完成 console.log('4 - componentUpdated'); }, unbind:function(){//解绑 console.log('5 - unbind'); } }); var app = new Vue({ el: '#app', data: { num: '10', color:'red' }, methods:{ add:function () { this.num++; } } })</script></html>
上述代码可以看到数字已经变成了绿色,说明自定义指令起到了作用。
自定义指令中传递的三个参数
el:指令所绑定的元素,可以用来直接操作DOM。
binding:一个对象,包含指令的很多信息。
vnode:Vue编译生成的虚拟节点。
自定义指令的生命周期
**自定义指令有五个生命周期(也叫钩子函数),分别是bind,inserted,update,co
mponentUpdated,unbind**
bind:只调用一次,指令第一次绑定到元素时调用,用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
inserted:被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于document中)。
update:被绑定于元素所在的模板更新时调用,而无论绑定值是否变化。通过比较更新前后的绑定值,可以忽略不必要的模板更新。
componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
unbind:只调用一次,指令与元素解绑时调用。
bind:function(el,binding){//被绑定 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 - unbind'); }
阅读全文
0 0
- Vue.directive 自定义指令
- Vue自定义指令(directive)
- Vue.directive 自定义指令
- Vue——自定义指令directive
- vue学习笔记6 Vue.directive自定义指令
- Vue2 自定义全局指令Vue.directive和指令的生命周期
- Vue 指令(Directive)
- vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- 自定义指令(directive)
- Angular2-自定义指令@Directive
- 自定义指令-directive
- Vue directive自定义指令+canvas实现H5图片压缩上传-Base64格式
- 自定义指令[directive,link,complie]
- angular 自定义指令详解 Directive
- angular 自定义指令 Directive(详解)
- angular 自定义指令详解 Directive
- angular 自定义指令详解 Directive
- angular中的自定义指令directive
- 模板方法模式(java实现)
- 私有云落地解决方案之openstack高可用(pike版本)-cinder
- 公钥,私钥和数字签名关系
- 微软推出中文学习AI助手Microsoft Learn Chinese
- Python读写文件模式和文件对象方法
- Vue.directive 自定义指令
- java集合框架
- 动态规划的典型分析与代码实现----主java
- Microsoft's AI-powered app can help you learn Chinese
- BZOJ1924 tarjan+拓扑序
- Problem M 在数组中查找指定元素 函数
- oracle存储过程加密
- echcache 帮助文档
- 机器学习与深度学习最好的解释