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

最新推荐文章于 2024-07-20 08:00:25 发布

姑老爷呀

最新推荐文章于 2024-07-20 08:00:25 发布

阅读量223

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/pfourfire/article/details/124724945

版权

本文介绍了Vue3中自定义指令的使用，包括全局和局部指令的定义，详细阐述了指令的生命周期函数，如bind、inserted、update等。同时，通过示例讲解了如何在指令中传递值和绑定属性，帮助开发者更好地理解和应用自定义指令。

摘要由CSDN通过智能技术生成

前菜

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xFWFrYhg-1652320539115)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8648cd6ca84e4af2905b2c75248212d1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

刷新页面之后，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>