vue3自定义指令

在 Vue 3 中,我们可以通过使用 app.directive 方法来定义自定义指令。下面是一个简单的例子:

html 复制代码
<template>
  <div v-highlight>Hello Vue 3!</div>
</template>

<script>
import { createApp } from 'vue';

const app = createApp({});

app.directive('highlight', {
  mounted(el) {
    el.style.backgroundColor = 'yellow';
  },
  unmounted(el) {
    el.style.backgroundColor = '';
  },
});

app.mount('#app');
</script>

在上面的例子中,我们定义了一个名为 highlight 的自定义指令,它在元素被挂载时将其背景颜色设置为黄色,并在元素被卸载时将背景颜色重置为空。

mountedunmounted 方法中,我们可以通过参数 el 来访问指令所绑定的元素。通过修改元素的样式来实现指令的功能。

注意:指令只能在组件的模板中使用,而不能在组件的选项中使用。

相关推荐
careybobo24 分钟前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)1 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之2 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端2 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡2 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木3 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!4 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷4 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
还是鼠鼠4 小时前
Node.js全局生效的中间件
javascript·vscode·中间件·node.js·json·express
自动花钱机5 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5