【Vue3从零开始-第五章】5-2 自定义指令

2022-09-26 158

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第五章】5-2 自定义指令

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们了解了vue高级语法中的mixin语法，本章节中将会和大家一起学习vue里面的自定义指令的内容。

前菜

在vue里面比如想要操作DOM，可以通过ref属性去定义，然后通过$refs获取到DOM元素从而实现操作DOM。

比如想要做一个输入框自动聚焦的功能，就可以在input标签中定义ref属性，然后在mounted生命周期函数中使用$refs操作input标签。

<script>
  const app = Vue.createApp({
    mounted(){
      this.$refs.input.focus()
    },
    template: `
      <div>
        <input ref='input' />
      </div>
    `
  });
  const vm = app.mount('#root');
</script>
复制代码

4~JP2[~RZHT`UN@8]BL$`SS.png

刷新页面之后，input标签就会自动获取焦点了。但是通过ref操作DOM元素在一些简单的需求中比较好用，但是它不能被复用，其实如果想要操作DOM，还可以通过自定义指令directive的方式去实现。

directive

全局指令

<script>
  const app = Vue.createApp({
    template: `
      <div>
        <input v-focus />
      </div>
    `
  });
  app.directive('focus', {
    mounted(el){
      el.focus()
    }
  })
  const vm = app.mount('#root');
</script>
复制代码

全局的directive方法和定义组件一样，也是通过app定义的。

directive方法中的第一个参数是自定义指令的名称，在标签中可以通过v-指令名称的方式使用自定义指令。

directive方法中的第二个参数是一个对象，里面可以写当前指令的生命周期函数。

在生命周期中会接收一个el参数，这个参数可以用来操作DOM元素。

局部指令

const directives = {
    focus: {
      mounted(el){
        el.focus()
      }
    }
  }
const app = Vue.createApp({
    directives: directives,
    template: `
      <div>
        <input v-focus />
      </div>
    `
});
复制代码

局部的自定义指令方式和局部组件的定义方式差不多，都是在app实例上面自定义一个对象。

自定义的对象里面会有一个指令名称的对象，指令名称里面也是当前自定义指令对应的生命周期函数。

组件实例中通过directives引用局部自定义指令。

标签上还是通过v-指令名称的方式使用自定义指令。

生命周期

自定义指令的生命周期和vue组件实例的生命周期是一样的，其中的区别就是：

组件实例的beforeMount、mounted是组件挂载到vue上面的时候触发的。

自定义指令的beforeMount、mounted是指令挂载到标签上面的时候触发的。

自定义指令的生命周期函数中会接收参数，从而操作DOM。

自定义指令的生命周期函数：beforeMount、mounted、beforeUpdate、updated、beforeUnmout、unmounted

<script>
  const app = Vue.createApp({
    data(){
      return {
        show: true
      }
    },
    template: `
      <div v-if="show">
        <input v-focus />
      </div>
    `
  });
  app.directive('focus', {
    beforeMount(el){
      console.log('focus beforeMount')
    },
    mounted(el){
      console.log('focus mounted')
    },
    beforeUpdate(el){
      console.log('focus beforeUpdate')
    },
    updated(el){
      console.log('focus updated')
    },
    beforeUnmount(el){
      console.log('focus beforeUnmount')
    },
    unmounted(el){
      console.log('focus unmounted')
    }
  })
  const vm = app.mount('#root');
</script>
复制代码

Z[L5WOC7GE]Y{P({ZX)WZUP.png

通过v-if指令去判断DOM是否被销毁，然后在浏览器控制台中改变show的值，就会输出beforeUnmount和unmounted生命周期函数中的内容。

🐔大家可以试试用v-show指令，看看会执行哪些生命周期函数。

传值

上面用到的v-if指令，亦或是以前学到的v-show、v-model指令都会赋值，那我们自定义指令也想要赋值，并且在指令生命周期函数中使用该怎么做呢？

🌰 小例子：比如想要通过自定义指令给一个DOM元素距顶部的距离

<script>
  const app = Vue.createApp({
    template: `
      <div v-pos="100" style="position: absolute;">
        Hello World
      </div>
    `
  });
  app.directive('pos', {
    mounted(el, binding){
      el.style.top = binding.value + 'px'
    }
  })
  const vm = app.mount('#root');
</script>
复制代码

~~_}P_`2)D8(QQGK499`XAJ.png

自定义指令的mounted生命周期函数中额外接收了一个参数binding，这个参数里面有一个value就是自定义指令中传递过来的值。

通过el参数操作DOM元素，然后拿到binding中的value值，就可以实现自定义指令传值了。

当然我们也可以把自定义指令的值改为动态的，这样也会方便修改。

const app = Vue.createApp({
    data(){
      return {
        top: 110
      }
    },
    template: `
      <div v-pos="top" style="position: absolute;">
        Hello World
      </div>
    `
});
复制代码

UG[UM1}2Q3I40%XVJ(KZ7]G.png

当我们在浏览器控制台修改top的值时，发现DOM元素上的样式并没有修改，那这时候就可以用到自定义指令的另外一个生命周期函数updated。

app.directive('pos', {
    mounted(el, binding){
      el.style.top = binding.value + 'px'
    },
    updated(el, binding){
      el.style.top = binding.value + 'px'
    }
})
复制代码

H9QW80BJU%Z_QD6MCOGL2A0.png

其实mounted和updated生命周期函数中的内容是一样的，那么就可以使用一种简写的方式。

app.directive('pos', (el, binding) => {
    el.style.top = binding.value + 'px'
})
复制代码

directive函数中第二个参数改为一个函数，同样接收el和binding两个参数，这样就可以同时实现mounted和updated生命周期函数了。

绑定属性

以前的内容中，我们可以通过v-bind:属性名亦或者v-on:事件名的方式绑定一些自定义的名称，那么在自定义指令里面是不是也可以绑定自定义属性呢？

<script>
  const app = Vue.createApp({
    template: `
      <div v-pos:right="100" style="position: absolute;">
        Hello World
      </div>
    `
  });
  app.directive('pos', (el, binding) => {
    console.log('binding:', binding)
    el.style.top = binding.value + 'px'
  })
  const vm = app.mount('#root');
</script>
复制代码

W%WHAC4{1RC8JCBDFA0)F]C.png

在directive函数中打印了binding的值，会看到里面有一个arg就是我们在DOM元素中通过自定义指令绑定的属性，而value就是自定义指令后面传递的值。

那么我们就可以通过binding.arg的方式去使用自定义指令绑定的属性。

app.directive('pos', (el, binding) => {
    el.style[binding.arg] = binding.value + 'px'
})
复制代码

P8$WY`7]@UHO9Y(L0HJ]NDP.png

总结

本章节主要讲解了自定义指令directive，它也分为全局和局部，类似于组件的定义方式。还讲解了自定义指令传值、绑定属性的方式，希望大家多写写代码熟悉它的使用方法。大家一起加油！！💪🏻

【Vue3从零开始-第五章】5-2 自定义指令

前言

前菜

directive

全局指令

局部指令

生命周期

传值

绑定属性

总结

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【Vue3从零开始-第五章】5-2 自定义指令

前言

前菜

directive

全局指令

局部指令

生命周期

传值

绑定属性

总结

热门文章

最新文章

相关课程

相关电子书