vue：自定义指定

背景：vue中我们有很多内置指令，用于操作DOM，进行数据绑定。但有时候我们需要对DOM进行底层操作，于是用到了自定义指令

一、基本用法

1、使用+钩子函数
类似于组件，我们一般都注册成局部指令，不注册成全局的，下面是一个注册为局部自定义指令的例子：

<template>
    <div>
        <input v-model="dir1" v-directive1="dir1"/>
　　　　 <input v-model="dir2" v-directive2="dir2"/>
    </div>
</template>
<script>
    export default {
        data(){
            return {
　　　　　　　　　dir1:'',
　　　　　　　　　dir2:''
　　　　　　　}
        },
        directives:{
            directive1(val){},//直接绑定函数，作用等同于update,不做准备工作和扫尾工作
　　　　　　 directive2:{
　　　　　　　　　　bind(){},//第一次绑定到元素的准备工作
　　　　　　　　　　inserted(){},//被绑定元素插入父节点时调用(父节点存在即可调用，不必存在于 document 中)
　　　　　　　　　　update(val，old){},//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update　　
　　　　　　　　　　componentUpdated(){},//被绑定元素所在模板完成一次更新周期时调用
　　　　　　　　　　unbind(){}
　　　　　　　}
        }
    }
</script>

上面的例子中：我们可以直接创建自定义指令，类似于directive1，也可以在指令对象中的狗子函数中做相应的处理。
2、钩子函数参数

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 钩子中可用。

3、函数简写
在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

4、对象字面量
如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

一、基本用法

猜你喜欢