Vue自定义指令

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

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

例子：通过自定义指令的形式解决异常图片的处理

// 添加自定义指定
Vue.directive('imageeror', imgerror)

export const imgerror = {
  // 会在当前指令作用的dom元素 插入之后执行
  // options 它包含我们指令的所有信息
  inserted(dom, options) {
    dom.onerror = function() {
      dom.src = options.value
    }
  }
}

// 引用指令
<img v-imageeror="require('@/assets/common/head.jpg')" :src="staffPhoto" class="user-avatar">