vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3自定义指令

Vue3自定义指令语法图文详解

作者:u013308709

这篇文章主要给大家介绍了Vue3自定义指令的相关资料,自定义指令是一种在Vue应用程序中扩展HTML标签的能力,文中通过图文介绍的非常详细,需要的朋友可以参考下

1、什么是自定义指令

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

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

私有自定义指令

3、使用自定义指令

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

使用自定义指令

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

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

全局自定义指令

5、updated 函数

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

updated函数

6、函数简写

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

函数简写

7、 指令的参数值

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

指令参数值

总结 

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

您可能感兴趣的文章:
阅读全文