[Vue学习笔记]自定义指令

Vue提供了一些常用到的指令给我们，如v-model/v-show/v-if等.但有些时候我们想扩展自定义的指令，完成一些特定的操作。Vue中也提供了这样的接口。

语法

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  },
  bind(){
  //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  },
  update(){
  //所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。
  },
})

简写形式

//此写法简化了update和bind
Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

案例-实现一个v-red指令，标签加入后变红色

  //全局指令
  Vue.directive('red', (el,data)=>{
  el.style.color='red'
  })
    //调用时
  <h1 v-red>XXX</h1>

指令也分为局部指令和全局指令，局部指令只有当前实例才能使用

new Vue({
        el:"#app",
        //局部自定义指令
        directives:{
        color:(el,data)=>{
            // console.log(data);
        el.style.color=data.value
       }
      }})