vue自定义指令

在vue中除了默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令 , 一般用于对dom的底层操作

• 下面一个小案例来介绍一下自定义指令

先定义一个全局的自定义指令 v-color
使用关键词directive定义全局指令
参数一 : 自定义指令的名字
参数二 : 一个大对象

Vue.directive("color",{})

每个自定义指令都有自己的钩子函数 (共有 5 个 , 均为可选)
bind：只调用一次，指令第一次绑定到元素时调用。
inserted：被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 虚拟节点 更新时调用
componentUpdated：指令所在组件的 虚拟节点 及其子 节点 全部更新后调用
unbind：只调用一次，指令与元素解绑时调用

Vue.directive("color",{
  bind(){
    console.log("bind")
  },
  // 每一个钩子函数都有这三个参数 , update 和 componentUpdated 还有第四个参数
  // 参数一 : 当前绑定的元素节点
  // 参数二 : 可以获取到自定义指令传递的参数
  inserted(el,binding,vnode){  
    console.log("inserted",binding,vnode)
    // 设置绑定元素的color
    el.style.color = binding.value.color  
    // 设置绑定元素的font-size
    el.style.fontSize = binding.value.fontSize + 'px' 
  },
  // 点击更新按钮会触发更新阶段的钩子
  update(el,binding,vnode,oldVnode){
    console.log("update",vnode,oldVnode)
    el.style.color = binding.value.color
    el.style.fontSize = binding.value.fontSize + 'px'
  },
  componentUpdated(){
    console.log("componentUpdated")
  },
  unbind(){
    console.log("unbind")
  }
})

在vue实例中使用一下v-color这个自定义指令

<div id="app">
  <!-- 使用 v-color 指令 , 并传递一个参数 style 
  这里 style 是 data 中的对象 , 而不是一个简单的 String -->
  <p v-color="style">文字文件自</p>
  <button @click="handleClick">更新</button>
</div>
<script src="./vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      style:{
        color:"red",
        fontSize:30
      }
    },
    methods:{
    // 点击按钮修改data 会触发更 update 和 componentUpdated
      handleClick(){
        this.style = {
          color:"yellow",
          fontSize:80
        }
      }
    }
  })
</script>

• 效果

1. 点击更新前 :
   
2. 点击更新后 :
   

定义某一个指令 , 实现某一个功能
如果想注册局部指令，组件中也接受一个 directives 的选项 , 在这里就不介绍了, 个人感觉还是全局自定义指令比较实用 , 哪一个组件都可以用到