「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」

一、注册自定义指令

vue除了核心功能默认内置的指令 (v-model 和 v-show)，也允许注册自定义指令。

局部注册

 <template>
  <div class="container">
    // 使用时需以v-开头 
    <div v-pinkshadow>嘿嘿，我使用自定义指令为我设置了阴影(局部注册)</div>
  </div>
</template>
<script>
  export default{
    data(){
      return {}
    },
    //注册局部指令，组件中需接受一个 `directives` 的选项
    directives:{ 
      shadow:{ //shadow为指令名，可自定义
        inserted(el){//inserted里写元素添加shadow指令后发生什么变化
          el.style.boxShadow="4px 4px 24px 13px #fcddf7"
        }
      }
    }
  }
</script>
<style scoped>
div{
    margin-top: 50px;
    width: 500px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}
</style>

全局注册

在main.js中

Vue.directive('GlobalShadow', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    el.style.boxShadow="4px 4px 24px 13px #e9fdd7"
  }
})

在任意页面使用

<div v-GlobalShadow>嘿嘿，我使用自定义指令为我设置了阴影(全局注册)</div>

效果如下

二、钩子函数

在上面实例中 inserted 即称为指令的钩子函数，官方为一个指令提供了如下几种钩子函数 (均为可选)

• bind：只调用一次，指令第一次绑定到元素时调用。（可进行一次性的初始化设置）
• inserted：被绑定元素插入父节点时调用。
• update：所在组件的 VNode 更新时调用。
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• unbind：只调用一次，指令与元素解绑时调用。

钩子函数参数

• el：指令所绑定的元素，可以用来直接操作 DOM。

• binding：一个对象，包含以下 property：

  • name：指令名，不包括 v- 前缀。
  • value：指令的绑定值，例如：v-my-directive="{col:red}" 中，绑定值为 {col:red}。
  • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  • expression：字符串形式的指令表达式。例如 v-my-directive="#ff0000" 中，表达式为 "#ff0000"。
  • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

• vnode：Vue 编译生成的虚拟节点

• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。