Vue自定义命令

来源：互联网发布：上瘾网络剧台湾未删减编辑：程序博客网时间：2024/06/09 17:26

自定义指令分为两个部分：

1-元素指令
2-属性指令

元素指令相当于定义一个轻量级的组件
对于指令这里需要讲解一下钩子函数，对于Vue.js提供了几个钩子函数，这几个钩子函数之间都是可选的，相互并不制约。

钩子函数的作用就是：
将作用域与DOM进行链接，链接函数用来创建可以操作DOM的指令

钩子函数分类：
bind - 只调用一次，在指令第一次绑定到元素上时候调用
update - 在bind之后立即以初始值为参数第一次调用，之后绑定值变化的时候，参数为新值与旧值
unbind - 只调用一次，在指令从元素上解绑的时候调用

定义属性指令：
Vue.directive(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象

定义元素指令：
Vue.elementDirective(id,definition)注册一个全局自定义指令，接收两个参数，指令ID以及定义对象

一个自定义指令的DEMO

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html" charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>VUE测试项目</title></head><script src="https://unpkg.com/vue/dist/vue.js"></script><!--HTML文件--><body id="example">    <div id="demo" v-demo="{color : 'white',text : 'hello!'}"></div></body><!--JS文件--><script>window.onload = function(){    Vue.directive('demo',function(value){        console.info(value.color); //white        console.info(value.text); // hello!    })    var demo = new Vue({        el : '#demo'    })}</script></body></html>

阅读全文

0 0