vue之自定义指令(五)

在Vue中除了默认的核心指令，Vue 也允许注册自定义指令。在Vue里代码复用的主要形式和抽象是组件。然而有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。

自定义指令分类：

<1>全局自定义指令：Vue.directive("指令名称",callback)
Vue.directive('focus',{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
el 就等价于 document.getElementById('el.id')
可以利用 $(el) 无缝连接 jq

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
<div id="app">
     <input type="text" v-focus/>
</div>

<2>局部自定义指令：directives:{"指令名称",{}}
可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项。

new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})
<div id="app">
     <input type="text" v-focus/>
</div>

自定义指令的生命周期：
bind(){} 绑定元素时被调用.只调用一次.
inserted() 绑定了指令元素插入到父元素上时触发
updated() 所在组件的VNode更新时调用.
componentUpdate 指令所在的组件的VNode以及其子VNode 全部更新后调用.
unbind: 指令和元素解绑的时候调用,只调用一次

Vue.directive('pic',{
    bind() {
      // 绑定元素时被调用.只调用一次
      console.log('bind')
    },
    inserted() {
      // 绑定了指令元素插入到父元素上时触发
      console.log('inserted')
    },
    updated() {
      // 所在组件的`VNode`更新时调用.
      console.log('updated')
    },
    componentUpdated() {
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      console.log('componentUpdated')
      
    },
    unbind() {
      // 只调用一次，指令与元素解绑时调用.
      console.log('unbind')
    }
  })

接下来会为大家写几个对应的案例，但是在写案例之前需要明白几个指令钩子函数里面的参数：
el: 绑定指令的那个dom元素
binding: 具体的对象
name : v-pic==pic不包括前面的v-
valule : 指令后面的值 v-pic='item' value=item
oldValue 前一个值,只能在 update & componentUpdate 中使用.
expression : v-pic='1+1',如果是 value = 2 ,如果是 expression = 1 + 1
arg: 指令传递的参数 ,比如 v-pic:msg arg = msg
modifiers : 比如 v-msg.a.b modifiers = {a:true,b:true}
vnode:Vue编译生成的虚拟节点.
oldVnode:上一个虚拟节点,仅在 update & componentUpdated 中可用
案例：图片懒加载

Vue.directive('pic', {
//钩子函数
inserted(el,binding,vNode) {
    // el：指令所绑定的元素，可以用来直接操作 DOM 。
    function loadpic(el,binding){
        if(!el.src){
            el.src=binding.value;
        }
    }
    // console.log(binding)
    const io=new IntersectionObserver(item=>{
        item.forEach(ioe=>{
            // target 被观察的目标元素，是一个 DOM 节点对象
            const el=ioe.target;
            // intersectionRatio 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0
            const intersectionRatio=ioe.intersectionRatio;
            if(intersectionRatio>0&&intersectionRatio<=1){
                loadpic(el,binding)
            }
            el.onload=el.onerror=()=>io.unobserve(el);
            // 当图片加载成功或是失败时就停止观察
        })
    })
    io.observe(el);
}
})
<div id="app">
   <img v-pic="路径"/>
</div>

案例：节流函数

 Vue.directive("debounce", {
    inserted: function (el, binding) {
     let timer;
     el.addEventListener('keyup', () => {
      if (timer) {
       clearTimeout(timer)
      }
      timer = setTimeout(() => {
       binding.value()
      }, 300)
     })
    }
   }
<div id="app">
    <input type="text"  v-debounce="search"/>
</div>

如若感觉还行，请帮忙点个赞！！！！