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 来访问指令所绑定的元素。通过修改元素的样式来实现指令的功能。

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

相关推荐
OEC小胖胖16 分钟前
去中心化身份:2025年Web3身份验证系统开发实践
前端·web3·去中心化·区块链
Cacciatore->1 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边3 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua3 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js