自定义指令，以及使用场景

vue 的自定义指令：

概述：

vue 除了提供默认的内置指令，还可以允许开发人员根据实际情况自定义指令，他的作用价值在于开发人员在某些场合下需要对普通的DOM元素进行操作；

自定义指令的参数以及钩子函数

• 1、 bind： 只调用一次，指令第一次绑定到元素是调用；
• 2、inserted: 被绑定元素插入父节点时调用；
• 3、update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• 4、 componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
• 5、unbind： 只调用一次；指令于元素解绑定是调用
• 6、 参数：
  el：指令所绑定的元素，可以用来直接操作 DOM。
  binding：一个对象，包含以下属性：
  name：指令名，不包括 v- 前缀。
  value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2

注册自定义指令

Vue自定义指令和组件一样存在着全局注册和局部注册两种方式，全局自定义指令；通过 Vue.directive( id, [definition] ) 方式注册全局指令，第一个参数为自定义指令名称（指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀），第二个参数可以是对象数据，也可以是一个指令函数。

• 全局自定义指令：

<div id="app" class="demo">
    <!-- 全局注册 -->
    <input type="text" placeholder="我是全局自定义指令" v-focus>
</div>
<script>
    Vue.directive("focus", {
        inserted: function(el){
            el.focus();
        }
    })
    new Vue({
        el: "#app"
    })
</script>

• 用法

   <input type="text" v-focus />
   // 这个输入框会指定获取焦点

自定义指令的使用场景：

自定义指令来优化图片的加载：图片在加载过程中，未加载完成时使用灰色背景占位，图片加载完后直接显示

<template>
    <div>
        <!-- 参数不可以直接填写url地址-->
        <img v-imgUrl='url' /> 
    </div>
</template>
<script>
    export default {
        data () {
            return {
                url: '../src/assets/logo.png'
            }
        }
    }
</script>

// 全局注册
Vue.directive('imgUrl', function (el, binding) {
    el.style.backgroundColor = '#FEFEFE' //设置背景颜色
    var img = new Image()
    img.src = binding.value // binding.value 指令后的参数
    img.onload = function () {
        el.style.backgroundColor = ''
        el.src = binding.value
    }
})