vueVuevue

Vue之自定义指令

2018-12-12  本文已影响338人  人话博客

先了解一下,在 vue 中,有很多内置的指令.

比如:

等等.....

所以,关于指令,我们可以总结下面几点:

2.0 Vue自定义指令场景小DEMO(非常尬)

场景:

我们需要一个指令,写在某个HTML表单元素上,然后让它在被加载到DOM中时,自动获取焦点.

// 和自定义过滤器一样,我们这里定义的是全局指令
Vue.directive('focus',{
    inserted(el) {
      el.focus()
    }
})


<div id='app'>
    <input type="text">
    <input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点">
  </div>

这里放了两个 input ,但是后面的 input 才使用了我们的自定义 v-focus 指令,所以看到了是后面那个文本框获取了焦点,而不是前面一个.

15446047297741.jpg

先总结几个点:

指令的生命周期

其实上面个例子很尬!
HTML5 本身就提供了一个 autofocus 的属性,我们直接写这个就OK了.

用指令我们需要:

非常的费时费力....

在说明,为什么我要这么麻烦的使用指令之前,可以先了解一下指令的一些基本知识.

上述例子中,我们写了一个叫 inserted(){} 的函数,
有了 inserted 就说明了,指令在绑定到 HTML 元素上时,肯定也是有一堆钩子函数的,说白了也就是生命周期.

当一个指令绑定到一个元素上时,其实指令的内部会有五个生命周期事件函数.

先上官方说明:

Vue 指令的声明周期函数

Vue.directive('gqs',{
    bind() {
      // 当指令绑定到 HTML 元素上时触发.**只调用一次**
      console.log('bind triggerd')
    },
    inserted() {
      // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
      console.log('inserted triggerd')
    },
    updated() {
      // 所在组件的`VNode`更新时调用.
      console.log('updated triggerd')
    },
    componentUpdated() {
      // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
      console.log('componentUpdated triggerd')
      
    },
    unbind() {
      // 只调用一次，指令与元素解绑时调用.
      console.log('unbind triggerd')
    }
  })

HTML

<div id='app' v-gqs></div>

结果:

bind triggerd
inserted triggerd

发现默认情况下只有 bind 和 inserted 声明周期函数触发了.

那么剩下的三个什么时候触发呢?

 <div id='app' >
    <p v-gqs v-if="show">v-if是删除或者新建dom元素,它会触发unbind指令声明周期吗?</p>
    <button @click="show=!show">toggle</button>
  </div>

一开始猜测 unbind 应该是删除元素的时候触发,也是弄了个 v-if.

然后点击按钮,发现果然如此.
当指令绑定的元素被销毁时,会触发指令的 unbind 事件.
(新建并显示,仍然是触发 bind & inserted)

unbind触发.gif 
 <p v-gqs v-show="show2">v-show设置元素的display:block|none,会触发componentUpdated事件</p>
    <button @click="show2=!show2">toggle-v-show</button>
componentUpdated.gif

unbind() 和 componentUpdated()

但是 updated() 声明周期什么时候触发呢?

官方解释是 :

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

反正有点看不懂..

所在组件的VNode??? 指令不是写在HTML元素上的吗?这里的组件指的是绑定了指令的HTML元素吗???

尝试用一个 list 列表来试验...

fruits:[
        '🍎',
        '🍌',
        '🍊',
        '🍇',
        '🍑'
      ]

<ul>
      <li v-gqs v-for="(f,i) in fruits" :key="i">{{f}} <a href="#" @click.prevent='delF(i)'>X</a></li>
    </ul>
updated测试1.gif

测试绑定了位置改变的元素也会触发 componentUpdated()

<div id="card" v-gqs :class={move:isMove}></div>
    <button @click="isMove = true">move</button>
componentUpdated2.gif

果然,不光是隐藏显示,就连位置发生了改变,也会触发 componentUpdated()..

那既然是这样,只要元素的当前状态变了,就会触发 componentUpdated() 咯??

测试元素的内容发生了改变,将会触发componentUpdated()

componentUpdated3.gif

既然元素只要能再肉眼范围内发生改变,就能触发 componentUpdated(),
那可以使用这个特性来监控 input 元素的输入咯?(有没有卵用先放一边)

<input type="text" id='text' v-model="text" v-gqs>

componentUpdated(el) {
      if (el.id === 'text') {
        console.log(el.value)
      }
}
componentUpdated4.gif

最后,没有测出来 updated()的触发时机,倒是把 componentUpdated()测试出来了. 😓.

componentUpdated() 触发就在于,当前绑定了这个指令的元素,有任意改变.

注意:这里的改变必须是指和vue数据建立联系.

只要和vue数据绑定产生的不管是样式还是内容发生改变,那么就一定会触发 componentUpdated()

前提是:一定要和 vue 的数据建立联系!!!
前提是:一定要和 vue 的数据建立联系!!!
前提是:一定要和 vue 的数据建立联系!!!

所以 ,到底 update() 这个指令的钩子函数什么时候触发呢?

所以,我就打算先把这个 updated() 钩子函数先放一放.

贴一个官方说明:

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

为什么我如此执着的想测试出updated()事件触发机制呢?

官方说明:

指令的简写形式:

在很多时候，你可能想在 bind 和 update 时触发相同行为，而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

这里我怎么区分是触发的 bind() 还是 unpdate() 呢 ????

等等 是 update() 不是 updated()!!!!!

我勒个去,钩子函数名字写错了!!!!!!!
我勒个去,钩子函数名字写错了!!!!!!!
我勒个去,钩子函数名字写错了!!!!!!!

难怪测试不出来.

既然,我之前的测试结果是:

那按道理,既然是名字写错了update --> updated...
那么 update 就是在 componentUpdated 之前触发的咯....

修改钩子函数名字再测试 update() 钩子函数.

既然 update() & componentUpdated() 分成了两个钩子函数,执行顺序一前一后.

<input type="text" id='text' v-model="text" v-gqs>

// update !!! 不是  updated
 update(el) {
      // 所在组件的`VNode`更新时调用.
     
        console.log(`update triggerd :${el.value}`)
     
    },
    componentUpdated(el) {
       // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
     
        console.log(`componentUpdated triggerd:${el.value}`)
     
    },
update->componentUpdated.gif

update() 和 componentUpdated() 前后执行顺序是对的.

简要的画一张图,来说明指令的这几个钩子函数

vue.指令声明钩子函数v2.0.png

利用指令,可以做一些小事情.

既然,指令并不是一次性的活.
当绑定指令的元素的状态发生改变时(这里主要是指元素绑定的vue数据发生改变时),仍然会触发指令中的 update 函数.

那么我们可以利用指令的简写形式,来做一些有意思的事情.

核心思想就是:

当一个HTML元素设置了指令,那么在这个元素的状态发生改变时(由vue数据变化带来的带来的监控),我们可以利用update()钩子函数监控到这个元素的变化,然后根据需要做一些其他的事情.

使用官方指定的指令简写模式:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

inserted or update .

当元素的状态发生改变时,就会触发 update

在写demo之前,还需要了解一下指令钩子函数的几个参数.

Vue.directive('change-bgc', (el, binding,vnode,oldVnode) => {
    el.style.backgroundColor = 'red'
    console.log(`binding.name:${binding.name}`)
    console.log(`binding.value:${binding.value}`)
    console.log(`binding.expression:${binding.expression}`)
    console.log(`binding.arg:${binding.arg}`)
    console.log(`binding.modifiers:${JSON.stringify(binding.modifiers)}`)
    console.log(`binging.oldValue:${binding.oldValue}`)
    console.log(`vnode:${Object.keys(vnode).join(',')}`)
    console.log(`oldVnode:${JSON.stringify(oldVnode)}`)
  })


binding.name:change-bgc
binding.value:2
binding.expression:1+1
binding.arg:foo
binding.modifiers:{"left":true,"bottom":true}
binging.oldValue:undefined
vnode:tag,data,children,text,elm,ns,context,fnContext,fnOptions,fnScopeId,key,componentOptions,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isOnce,asyncFactory,asyncMeta,isAsyncPlaceholder
oldVnode:{"tag":"","data":{},"children":[],"raw":false,"isStatic":false,"isRootInsert":true,"isComment":false,"isCloned":false,"isOnce":false,"isAsyncPlaceholder":false}

DEMO

一个卡片应用,用户在页面上如果看到比较喜欢的卡片,可以钉在屏幕上.

先看看效果:

pinend2.gif

HTML


 <div id='app'>
    <div v-pin="card1.pinded" class="card">
      <a href="#" @click.prevent='card1.pinded = !card1.pinded'>钉住/取消</a>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544621884322&di=ae2b10253c52ec699359f8c27a8097aa&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2F36%2Ff4%2F1118255893119f4366l.jpg"
        alt="">
    </div>
    <div v-pin="card2.pinded" class="card">
      <a href="#" @click.prevent='card2.pinded = !card2.pinded'>钉住/取消</a>
      <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544621884322&di=ae2b10253c52ec699359f8c27a8097aa&imgtype=0&src=http%3A%2F%2Ff6.topitme.com%2F6%2F36%2Ff4%2F1118255893119f4366l.jpg"
        alt="">
    </div>
</div>

.......

Vue.js

var app = new Vue({
    el: '#app',
    data: {
      card1: {
        pinded: false
      },
      card2: {
        pinded: false
      }
    },
  })

指令代码

// 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式.
  let toppx = 10
  Vue.directive('pin', (el, binding) => {
    if (binding.value) {
      el.style.position = "fixed"
      el.style.left = '300px'
      let top = toppx
      el.style.top = top + 'px'
      toppx += 200
    } else {
      el.style.position = 'static'
      toppx === 10 ? toppx : toppx-=200
    }
  })

核心代码解释一下:

 <div v-pin="card1.pinded" class="card">
      <a href="#" @click.prevent='card1.pinded = !card1.pinded'>钉住/取消</a>
      </div>

组件指令

和过滤器一样,指令也分 全局指令 & 组件指令

组件指令语法:


var app = new Vue({
    directives: {
      innerDirective:{
        bind() {

        },
        inserted() {

        },
        update() {

        },
        componentUpdated() {

        },
        unbind() {

        }
      }
    })

简写模式:

// 主要是 bind & update 钩子函数
 directives: {
      simpleDirective:(el,binding) =>{

      }
    }
上一篇下一篇

猜你喜欢

热点阅读