vue3的自定义指令

Vue.js开发来源：网络编辑：小编更新时间：2024-12-03 15:09:06 浏览量：15

一，自定义指令的vue3和vue2的写法变化

created - 新增！在元素的 attribute 或事件监听器被应用之前调用。 bind → beforeMount inserted → mounted beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。 update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。 componentUpdated → updated beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。 unbind -> unmounted

因为vue3中，app的产生是const app = Vue.createApp({})，所以vue3中需要app.directive来注册自定义指令。

const app = Vue.createApp({ 
   }) app.directive('highlight', { 
    beforeMount(el, binding, vnode) { 
    el.style.background = binding.value } })

使用时：

<p v-highlight="'yellow'">以亮黄色高亮显示此文本</p>

二，我在项目中的使用示例

export const direct = app => { 
    app.directive('clickOnce', { 
    mounted(el, binding, vnode) { 
    el.addEventListener('click', () => { 
    if (!el.disabled) { 
    el.disabled = true; setTimeout(() => { 
    el.disabled = false; }, binding.value || 1000); } }); } }); };

然后在入口文件中引入注册：

import { 
    direct } from '@/vue-use/useDirective.js'; const app = createApp(App); direct(app);

在页面代码中的使用：

<button class="login-page-handle" @click="handleLogin()" v-clickOnce> 登&nbsp;&nbsp;&nbsp;录 </button>

到此这篇vue3的自定义指令的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

上一篇：原生js实现dom的获取及操作

下一篇： webpack5+vue3搭建h5项目模板-（二）-eslint代码规范化

版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/11006.html

一，自定义指令的vue3和vue2的写法变化

二，我在项目中的使用示例

相关文章：