欢迎来到站圈网!

php远程媒体七牛node摇摇

投稿中心

JavaScript

当前位置: 主页 > Web前端 > JavaScript

vue3自定义指令看完这篇就入门了

时间:2022-11-22|作者:星月前端|点击:

目录

前言

这篇文章介绍vue组件中的自定义指令!看完不会你打我。哈哈哈,开玩笑的!!

1. 什么是自定义指令

vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外 vue 还允许开发者自定义指令。

vue 中的自定义指令分为两类,分别是:

  • 私有自定义指令
  • 全局自定义指令

2. 声明私有自定义指令的语法

在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下:

3. 使用自定义指令

在使用自定义指令时,需要加上 v- 前缀。示例代码如下:

    

4. 声明全局自定义指令的语法

全局共享的自定义指令需要通过“单页面应用程序的实例对象”进行声明,示例代码如下:

import { createApp } from 'vue'

const app = createApp({
  /* ... */
})

// 注册(对象形式的指令)
app.directive('my-directive', {
  /* 自定义指令钩子 */
})

// 注册(函数形式的指令)
app.directive('my-directive', () => {
  /* ... */
})

// 得到一个已注册的指令
const myDirective = app.directive('my-directive')

5. updated 函数

mounted 函数只在元素第一次插入 DOM 时被调用,当 DOM 更新时 mounted 函数不会被触发。 updated 函数会在每次 DOM 更新完成后被调用。示例代码如下:

// 声明全局自定义指令
app.directive('focus', {
  mounted(el) {
    console.log('mounted')
    el.focus()
  },
  updated(el) {
    console.log('updated')
    el.focus()
  },
})

注意:在 vue2 的项目中使用自定义指令时,【 mounted 要换成 bind 】【 updated 要换成 update 】

6. 函数简写

如果 mounted 和updated 函数中的逻辑完全相同,则可以简写成如下格式:

app.directive('focus', (el) => {
    // 在 mounted 和 updated 都会触发这个函数方法
  el.focus()
})

7. 指令的参数值

在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值,示例代码如下:

// 自定义 v-color 指令
app.directive('color', (el, binding) => {
    // binding.value 就是通过 = 绑定的值,在传值的时候传到这 binding.value
  el.style.color = binding.value
})

附:下面根据自定义指令知识点衍生的一个小例子

该例子没有特别的技术难点。只是为了验证一下这两天学习的vue3部分知识点,存粹是一个练手记录~~~

//示例



//效果图

vue3自定义指令看完这篇就入门了

可以在红色线框内随便改变方向跟距离。

总结

到此这篇关于vue3自定义指令的文章就介绍到这了,更多相关vue3自定义指令内容请搜索站圈网以前的文章或继续浏览下面的相关文章希望大家以后多多支持站圈网!

版权声明:本文内容由小编收集网络,均来自网络用户自发贡献,版权归原作者所有,Web前端、电脑编程学习类网站不拥有其著作权,亦不承担相应法律责任。具体规则请查看《Web前端、电脑编程学习类网站用户服务协议》和《Web前端、电脑编程学习类网站知识产权保护指引》。如果您发现本站中有涉嫌抄袭的内容,填写联系本站管理员,一经查实,管理员将立刻删除涉嫌侵权内容。

上一篇:React setState是异步还是同步原理解析

下一篇:vue中使用/deep/失效的解决方法

本文标题:vue3自定义指令看完这篇就入门了

本文地址:https://www.zhano.cn/JavaScript/67917.html

AD300

广告投放 | 联系我们 | 版权申明 | SiteMap

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:15234109 | 邮箱:15234109#qq.com(#换成@)

Copyright © 2019-2022 豫ICP备19001789号