Vue.directive 自定义指令 · web前端

[TOC] # 什么是全局API 全局API并不在构造器里，而是先声明全局变量或者直接在Vue上定义一些新功能，Vue内置了一些全局API，比如我们今天要学习的指令Vue.directive。说的简单些就是，在构造器外部用Vue提供给我们的API函数来定义新的功能。 # vue.directive自定义指令我们也可以定义一些属于自己的指令，比如我们要定义一个v-jdxia的指令，作用就是让文字变成绿色。 ~~~ <div id="app"> <div v-jdxia="color">{{num}}</div> </div> <script type="text/javascript"> //el就是dom元素 //binding是js对象,可以打印出来看下 //binding.value就是获取v-jdxia=的值,而这个值和下面的那个是同步的 //里面的匿名函数是可以传递3个参数,这边就先写2个 Vue.directive("jdxia", function (el, binding) { el.style = "color:" + binding.value; }); var app = new Vue({ el: '#app', data: { num: 10, color: 'red', } }) </script> ~~~ # 自定义指令中传递的三个参数 el: 指令所绑定的元素，可以用来直接操作DOM。 binding: 一个对象，包含指令的很多信息。 vnode: Vue编译生成的虚拟节点 # 自定义指令的生命周期自定义指令有五个生命周期（也叫钩子函数），分别是 bind,inserted,update,componentUpdated,unbind bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。 inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。 update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。 componentUpdated:被绑定元素所在模板完成一次更新周期时调用。 unbind:只调用一次，指令与元素解绑时调用。 ~~~ <body> <div id="app"> <div v-jdxia="color">{{num}}</div> </div>  <p> <button onclick="unbind()">解绑</button> </p> </body> <script type="text/javascript"> function unbind() { //$destroy这个是vue提供给我们的 app.$destroy(); } //el就是dom元素 //binding是js对象,可以打印出来看下 //binding.value就是获取v-jdxia=的值,而这个值和下面的那个是同步的 Vue.directive("jdxia", { 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', } }) </script> ~~~