vue 自定义指令

在vue项目开发中，vue中有很多指令比如v-modal双向绑定 v-if v-show，

但是这些指令不满足很多项目的需求，

有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

自定义指令分为全局状态和局部状态

第一个参数为自定义指令名称（指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀），第二个参数可以是对象数据，也可以是一个指令函数。

全局状态定义挂载在全局Vue上

<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>

局部状态只能当前vue组件

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

接下来所有的例子举例都是局部状态

自定义指令提供了几个钩子函数

• bind：只调用一次，指令第一次绑定到元素时调用。被绑定做绑定的准备工作  比如添加事件监听器，或是其他只需要执行一次的复杂操作
• inserted：被绑定元素插入父节点时调用。（父节点存在即可调用，不必存在于document中
• update：所在组件的 VNode 更新时调用，但是可能发生在其子元素的 VNode 更新之前。
  
• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  
• unbind：只调用一次，指令与元素解绑时调用。
  

钩子函数的参数

• el：指令所绑定的元素，可以用来直接操作 DOM。
• binding：一个对象，包含以下属性：
• name：指令名，不包括 v- 前缀。
• value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
• oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
• arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
• modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
• vnode：Vue 编译生成的虚拟节点。
• oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

这几个钩子函数的话比较常使用的是bind和update，他们中的每一个都有可以用的el,binding和vnode参数，除了update和componentUpdated之外，还会暴露oldVnode，以区分传递的旧值和新值。

执行顺序是

页面加载时

inserted, bind

组件更新时

update

componentUpdated

卸载组件时

unbind

创建自定义指令

1.使用inserted钩子函数

实际场景中，进入页面input获取焦点，不点击任何内容获取焦点，那么需要操作dom，然后执行focus事件

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

<div class="id">
   <p v-pin:[direction]="400">我的名字</p>    <p v-demo="{color: 'red', fontSize: '30px'}">我的颜色</p></div>
<script>new Vue({  el: "#app",
  data: (){
     return {
       direction: 'left'     }
  },

  directives: {    pin: {      bind(el, binding, vnode) {        el.style.position = 'fixed'        let dir = binding.arg === 'left' ? 'left' : 'top'        el.style[dir] = binding.value + 'px'      }    },    demo: {      bind(el, binding, vnode) {        let styleObj = binding.value        for (let name in styleObj) {          el.style[name] = styleObj[name]        }      }    },  }})</script>

v-demo指令获取对象style添加两个属性，v-pin binding.arg获取direction的值动态取值

钩子函数 bind和钩子函数 inserted的区别。

inserted有父节点，bind的父节点是null

bind: function (el) {
    console.log(el.parentNode)  // null
}, 
inserted: function (el) {
    console.log(el.parentNode)  // <div class="box">...</div>
}

3.使用update钩子函数，上边代码，输入框默认值是"zhangshan",如果我们修改了myname值，那么就会触发update函数的执行，输出“update更新了“

<template>
  <div id="box">
       <input v-model="myname" v-mydirective/>
  </div>
<template>
export default {
  data(){
    return{
      myname:"zhangshan"
    }
  },
  directives:{
    'mydirective':{
         update: function(el, binding, vnode, oldVnode) {
              console.log('update更新了');
         }
    }
  }
}

4.钩子函数 componentUpdated和钩子函数 unbind，组件更新完成执行componentUpdated函数，如果离开当前页面解绑函数，释放内存用unbind钩子函数

以上都是很简单的代码来实现效果，在实际的开发中，你可以创建更高级灵活的自定义指令。

在实际开发中，自定义用到的指令情景中很多，比如赖加载，上拉加载等

小伙伴们可以简单的写一个上拉加载的自定义指令，期待你的demo