vue中的自定义指令一、什么是自定义指令 Vue 官方提供了v-model 、v-show、v-for、v-if等常用的

一、什么是自定义指令

Vue 官方提供了v-model 、v-show、v-for、v-if等常用的内置指令，除此之外Vue 也允许注册自定义指令。

二、自定义指令的分类

vue 中的自定义指令分为两类，分别是：

1、私有自定义指令

2、全局自定义指令

三、私有自定义指令

1、在每个vue 组件中，可以在directives节点下声明私有自定义指令。

// 模版使用
<p v-color>文字</p>


// 定义指令
directives: {
  color: {
    // 为绑定了此指令的html元素设置红色文字
    bind(el) {
      el.style.color = 'red' // el是绑定了此指令的原生的dom对象
    }
  }
}

2、动态绑定参数值

（1）常规使用

// 动态为自定义指令绑定参数值
<p v-color="color">文字</p>  

// 定义指令
data() {
  return {
    color: 'red'
  }
},
directives: {
  color: { 
    bind(el, binding) {
      // 可以通过形参中的第二个参数：binding对象的.values属性获取参数值
      el.style.color = binding.value
    }
  }
}

（2）动态参数根据不同场景把元素固定在左侧或者顶部200像素，这时使用动态参数就可以非常方便地根据每个组件实例来进行更新。

<p v-pin:[direction]="200">设置css样式</p>


data() {
  return {
    direction: 'left'
  }
},
directives: {
  color: { 
    bind(el, binding) {
      el.style.position = 'fixed' 
      // 可以通过形参中的第二个参数：binding对象的.arg属性获取动态参数值
      var s = (binding.arg == 'left' ? 'left' : 'top')  
      el.style[s] = binding.value + 'px'
    }
  }
}

3、update函数

bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时bind不会被触发。而update 函数会在每次 DOM 更新时调用。

directives: {
  color: { 
    bind(el, binding) {
      // 当指令第一次被绑定元素时调用
      el.style.color = binding.value
    },
    update(el, binding) {
      // 每次dom更新时调用
      el.style.color = binding.value
    },
  }
}

4、函数简写

如果 bind 和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

directives: {
  color(el, binding) {
    // 在bind和update时会触发相同的业务逻辑
    el.style.color = binding.value
  }
}

5、自定义参数：对象字面量

如果指令需要多个值，可以传入一个 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!"  
})

四、全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

// 函数简写，代表
Vue.directives('color', (el, binding) => {
  el.style.color = binding.value
})
// 对象写法
Vue.directives('color', {
  bind: function (el) {  
    el.style.color = binding.value  
  },
  inserted: function (el) {  
    el.style.color = binding.value  
  },
  update: function (el) {  
    el.style.color = binding.value  
  }
})

五、钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用
binding：一个对象，包含以下 property：

六、钩子函数参数

指令钩子函数会被传入以下参数：

el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- 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 }。

vue中的自定义指令