Vue3 自定义指令详解

举报
vike 发表于 2021/10/29 13:13:56 2021/10/29
【摘要】 Vue3 自定义指令详解Vue中有v-if,v-for,v-bind,v-show,v-model…等等一系列方便快捷的指令今天一起来了解一下vue里提供的自定义指令 Vue3 自定义指令生命周期created 元素初始化的时候beforeMount 指令绑定到元素后调用 只调用一次mounted 元素插入父级dom调用beforeUpdate 元素被更新之前调用update 这个周期方法...

Vue3 自定义指令详解

Vue中有v-if,v-for,v-bind,v-show,v-model…等等一系列方便快捷的指令
今天一起来了解一下vue里提供的自定义指令

Vue3 自定义指令生命周期

  • created 元素初始化的时候
  • beforeMount 指令绑定到元素后调用 只调用一次
  • mounted 元素插入父级dom调用
  • beforeUpdate 元素被更新之前调用
  • update 这个周期方法被移除 改用updated
  • beforeUnmount 在元素被移除前调用
  • unmounted 指令被移除后调用 只调用一次

指令生命周期示例

const Directive = {
  created() {}, 
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, 
  updated() {},
  beforeUnmount() {},
  unmounted() {}
}

全局指令示例

input 聚焦
  • 该指令可自动聚焦输入框
  • 在main.js文件中编写指令
  • el是当前挂载元素
import { createApp } from 'vue'
const app  = createApp({})
app.directive('focus', {
  // 当元素挂载时
  mounted(el) {
    // 聚焦元素
    el.focus()
  }
})
  • 在input框上写v-focus即可生效
元素 点击动效
  • 该指令可以点击反馈效果
  • 在main.js文件中引入公用css
.button:active {
  transform: translateY(4px);
}
import './main.css'

app.directive('active', {
    mounted(el) {
        el.classList.add('button')
    }
})
  • 在任何组件上挂载指令都会有上下动的特效

局部指令示例

input 聚焦
  • 指令代码编写在当前组件文件中
  • 仅在当前组件中生效
directives: {
  focus: {
    mounted(el) {
      el.focus()
    }
  }
}

自定义指令参数

  • el 元素本身
  • binding
    • intance 当前组件实例
    • value 指令传递的值
      • 例如<input v-focus="2"/>
    • oldValue 旧的值
      • 仅在 beforeUpdate 和 updated 中可用
    • arg 指令传递的参数
      • 例如<input v-focus:foo/>
    • modifiers 包含的修饰符
      • 例如<input v-focus.foo.bar/>
      • 修饰符对象为{foo: true,bar: true}
    • dir 一个对象,在注册指令时作为参数传递
      app.directive('active', 
      {mounted(el) {
      el.classList.add('button')
      }
      })
      
      // dir是指
      {mounted(el) {
      el.classList.add('button')
      }
      }
      
  • vnode 元素的虚拟dom
  • prevVnode 上一个虚拟dom 仅在 beforeUpdate 和 updated 中可用

总结

  • 指令也可以写在单独的一个文件夹内引入main.js用app.use使用,这样更加简洁。大家可以去试试…
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200