Vue学习笔记:自定义指令
2018/8/30 15:31:41

在学习vue中有很多指令,有些是vue内置的指令,当然也可以自定义指令,我们现在就来总结下自定义指令的创建及使用


我们先来注册一个全局自定义指令


注册全局自定义指令要在main.js添加一个setColor的自定义指令

Vue.directive('setColor', {  inserted: function (el) {   //el指令所绑定的元素,可以用来直接操作 DOM 。    el.style.color = 'red'  } })

然后在组件中使用,因为是全局的,所以任何组件都可以使用

<div v-set-color>自定义指令练习</div>

这里有一个要注意的点: 因为是用驼峰命名法,所以使用指令的时候要用-来连接

下面我们来注册一个局部指令,在需要使用的组件中定义
 export default {    directives: {      setColor: {        inserted: function (el) {          el.style.color = 'red'        }      }    },    data(){      return{      }    }  }

然后使用

<div v-set-color>自定义指令练习</div>

讲完了我们又有一些疑问,代码中的directive是创建指令的意思,那么inserted又是什么呢?其实它是一个vue中的钩子函数,当然还有更多的钩子函数,我们一起来来看看如何使用

// 钩子函数的使用 Vue.directive("test",{        // 自定义指令第一次绑定到元素时调用        bind:function(){            console.log("自定义指令第一次绑定到元素时调用")        },        //这里指的是inserted函数中定义的效果实现才被调用(被绑定元素插入父节点时调用)        inserted:function(el){            el.style.color = 'red'            console.log("也就是当自定义指令的元素上的文字变成红色就调用")        },        // 绑定的元素更新时调用        // 修改前: 绑定的元素是<div v-test>自定义指令的学习</div>        // 修改后: 绑定的元素是<div v-test>自定义指令的学习与使用</div>,改变时(注意是改变时,不是改变后,改变后触发的钩子函数是下面的componentUpdated函数)触发        update:function(){            console.log("绑定的元素更新时调用")        },        // 绑定的元素更新后调用        componentUpdated:function(){            console.log("绑定的元素更新后调用")        },        // 自定义指令和dom元素解绑后执行        unbind:function(){            console.log("自定义指令和dom元素解绑后执行(也就是v-text自定义指令在dom元素上移除后)")        } })


并且这些钩子函数还可以接受多个参数 

这里是官网给出的使用方法及解释

el:指令所绑定的元素,可以用来直接操作 DOM 。 

binding:一个对象,包含以下属性:    

    -name:指令名,不包括 v- 前缀。    

    -value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。   

    -oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。    

    -expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。   

    -arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。    

    - modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。 

vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。 

oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。   


下面我们说下el和binding的使用 el和binding的钩子参数测试结果如下


Vue.directive("test",{    bind:function(el,binding){        console.log(el)//这里的el指的就是当前指令绑定的DOM元素;        console.log(binding)//返回的是一个对象,包含有以下属性:        console.log(binding.name)// 1.name:指令名;这里是test        // 示例:<div v-test="1+1">自定义指令的学习</div>        console.log(binding.value)// 2.value:指令的绑定值,注意是已经解析过的   这里返回 2        // 示例:<div v-test="1+1">自定义指令的学习</div>        console.log(binding.expression)// 3.expression字符串形式的指令表达式  这里返回 1+1          // 示例:<div v-test:parameter>自定义指令的学习</div>        console.log(binding.arg)// 4.arg:指令的参数 在这里我们设值的参数是"parameter"  则返回 parameter        // 示例:<div v-test.parameterOne.parameterTwo>自定义指令的学习</div>        console.log(binding.modifiers)//5.modifiers:一个包含修饰符的对象,这里在data中设置parameterOne: true, 和parameterTwo: true,则返回 {parameterOne: true, parameterTwo: true}    } })

猜你喜欢

发表评论

标签云
返回顶部图片