VUE3 自定义指令

  1. 概念

    1. 除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
  2. 指令钩子

    1. 一个指令的定义对象可以提供几种钩子函数 (都是可选的):
    2. 示例
      const myDirective = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode, prevVnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode, prevVnode) {},// 绑定元素的父组件更新前调用beforeUpdate(el, binding, vnode, prevVnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都更新后调用updated(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载前调用beforeUnmount(el, binding, vnode, prevVnode) {},// 绑定元素的父组件卸载后调用unmounted(el, binding, vnode, prevVnode) {}
      }
  3. 钩子参数

    1. 指令的钩子会传递以下几种参数:

      1. el:指令绑定到的元素。这可以用于直接操作 DOM。

      2. binding:一个对象,包含以下属性。

      3. value:传递给指令的值。例如在 v-my-directive="1 + 1" 中,值是 2。

      4. oldValue:之前的值,仅在 beforeUpdate 和 updated 中可用。无论值是否更改,它都可用。

      5. arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 "foo"。

      6. modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }。

      7. instance:使用该指令的组件实例。

      8. dir:指令的定义对象。

      9. vnode:代表绑定元素的底层 VNode。

      10. prevNode:代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

    2. 举例来说,像下面这样使用指令:

      <div v-example:foo.bar="baz">

      binding 参数会是一个这样的对象:

      {arg: 'foo',modifiers: { bar: true },value: /* `baz` 的值 */,oldValue: /* 上一次更新时 `baz` 的值 */
      }
  4. 示例

    <script setup>
    import {ref} from 'vue'
    let example = ref({color:'red',
    })
    // 在模板中启用 v-example
    const vExample = {mounted:(el,binding)=>{// console.log(binding)el.style.color = binding.value.color}
    }
    </script><template><span v-example:args="example">span</span>
    </template>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/753883.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL调优之SQL语句

1 慢 SQL 语句的几种常见诱因 1.1 无索引、索引失效导致慢查询 如果在一张几千万数据的表中以一个没有索引的列作为查询条件&#xff0c;大部分情况下查询会非常耗时&#xff0c;这种查询毫无疑问是一个慢 SQL 查询。所以对于大数据量的查询&#xff0c;我们需要建立适合的索…

凝思操作系统离线安装mysql和node

PS&#xff1a;下面这就是国产凝思的界面,测试版本是V6.0.80&#xff0c;第一次听说这种系统&#xff0c;于是去官网下载部署包&#xff0c;下面是地址 注意:这个系统如果没有激活&#xff0c;ip都不会有&#xff0c;这样文件都不能传到服务器&#xff0c;xshell这些工具都连不…

自托管状态页面工具Kener

什么是 Kener &#xff1f; Kener 是开源的 Node.js 状态页面工具&#xff0c;旨在轻松监控服务和处理事故。它提供了一个时尚且用户友好的界面&#xff0c;简化了对服务中断的跟踪&#xff0c;并改善了我们在事故期间的沟通方式。而最好的部分是&#xff0c;Kener 与 GitHub 无…

hosts文件丢失了怎么办?

hosts文件的位置&#xff1a;C:\Windows\System32\drivers\etc 丢失了恢复的方法&#xff1a; 在“管理员&#xff1a;命令提示符中输入&#xff1a; &#xff08;winR 然后cmd&#xff09; for /f %P in (dir %windir%\WinSxS\hosts /b /s) do copy %P %windir%\System32\d…

天题赛座位分配(pta团体天梯题c++简易版)

天梯赛每年有大量参赛队员&#xff0c;要保证同一所学校的所有队员都不能相邻&#xff0c;分配座位就成为一件比较麻烦的事情。为此我们制定如下策略&#xff1a;假设某赛场有 N 所学校参赛&#xff0c;第 i 所学校有 M[i] 支队伍&#xff0c;每队 10 位参赛选手。令每校选手排…

超实用!免费软件站大盘点,总有一款适合你

相信用Mac电脑的同学都知道一个网站MacWK&#xff0c;可以白嫖几乎所有常用软件&#xff0c;不用付费&#xff0c;但不好的消息是在2022年10月宣布关站&#xff0c;小编从此走上了开源免费的道路&#xff0c;尽管不太好用&#xff0c;奈何口袋木有钱&#xff0c;经过小编的不断…

找出字符串中第一个匹配项的下标-力扣

纯自己手写 int strStr(char* haystack, char* needle) {int haylenstrlen(haystack);int nelenstrlen(needle);if(strlen(haystack)<strlen(needle)) return -1;int slow0;//用于标记从haystack哪个字符开始比较int fast0;//用于标记haystack中正在进行比较的字符int ne…

力扣日记3.18-【贪心算法篇】122. 买卖股票的最佳时机 II

力扣日记&#xff1a;【贪心算法篇】122. 买卖股票的最佳时机 II 日期&#xff1a;2024.3.18 参考&#xff1a;代码随想录、力扣 122. 买卖股票的最佳时机 II 题目描述 难度&#xff1a;中等 给你一个整数数组 prices &#xff0c;其中 prices[i] 表示某支股票第 i 天的价格。…

AI大模型额外学习一:斯坦福AI西部世界小镇笔记(包括部署和源码分析)

文章目录 一、简单介绍1&#xff09;项目代码介绍2&#xff09;重新播放模拟3&#xff09;适当修改分叉模拟 二、部署斯坦福小镇Demo1&#xff09;准备工作2&#xff09;解决遇到的bug3&#xff09;启动服务器和前端 三、源码剖析1&#xff09;主题顺序 github链接 一、简单介…

08|记忆:通过Memory记住客户上次买花时的对话细节

无论是LLM还是代理都是无状态的&#xff0c;每次模型的调用都是独立于其他交互的。也就是说&#xff0c;我们每次通过API开始和大语言模型展开一次新的对话&#xff0c;它都不知道你其实昨天或者前天曾经和它聊过天了。 使用ConversationChain from langchain import OpenAI…

1.gradle编译和运行

1.在Windows 项目的根目录下使用.\gradlew.bat build命令进行编译。 如果出错的原因是连接超时&#xff1a; Exception in thread “main” java.io.IOException: Downloading from https://services.gradle.org/distributions/gradle-8.6-bin.zip failed: timeout (10000ms) a…

【华为OD机试】找座位【C卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 在一个大型体育场内举办了一场大型活动,由于疫情防控的需要, 要求每位观众的必须间隔至少一个空位才允许落座。 现在给出一排观众座位分布图,座位中存在已落座的观众,请计算出, 在不移…

嵌入式会越来越卷吗?

嵌入式会越来越卷吗? 当谈及嵌入式系统时&#xff0c;我们探究的不仅是一种科技&#xff0c;更是一个日益多元与普及的趋势。嵌入式系统&#xff0c;作为一种融入更大系统中的计算机硬件和软件&#xff0c;旨在执行特定功能或任务。但这个看似特定的系统概念&#xff0c;却在发…

黑马程序员——javase进阶——day09——线程安全,死锁,状态,通讯,线程池

目录&#xff1a; 线程安全 线程安全产生的原因线程的同步同步代码块同步方法Lock锁线程死锁 概述:产生条件:代码实践线程的状态线程通信线程池 线程使用存在的问题线程池的介绍线程池使用的大致流程线程池的好处Java提供好的线程池线程池处理Runnable任务线程池处理Callable任…

LeetCode刷题记录:(11)组合(初识回溯算法)

leetcode传送通道 暂时记录&#xff0c;这篇没啥营养&#xff0c;不用看了 class Solution {List<List<Integer>> result new ArrayList<>(); // 存所有组合List<Integer> path new LinkedList<>(); //存每一个组合public List<List<Int…

世界第一个AI软件工程师问世!

2024年3月13日&#xff0c;科技公司Cognition推出了世界上第一位人工智能软件工程师Devin AI。这项创新有望利用人工智能编码和机器学习的力量加快发展。Devin AI不仅仅是帮助&#xff1b;它是一个成熟的队友&#xff0c;发挥智能编码自动化和自主人工智能编码的魔力&#xff0…

SQL注入无回显,利用DNSlog构造方式

没有回显的情况下&#xff0c;一般编写脚本&#xff0c;进行自动化注入。但与此同时&#xff0c;由于 防火墙的存在&#xff0c;容易被封禁 IP&#xff0c;可以尝试调整请求频率&#xff0c;有条件的使用代理池进行请求。 此时也可以使用 DNSlog 注入&#xff0c;原理就是把服…

salesforce生产环境如何删除触发器

由于生产环境不能直接删除触发器&#xff0c;所以需要在sandbox中先让触发器inactive再部署到生产环境&#xff0c;就可以让触发器失效了。

C++基础6:面向对象程序设计思想和类(上)

此专栏为移动机器人知识体系下的编程语言中的 C {\rm C} C从入门到深入的专栏&#xff0c;参考书籍&#xff1a;《深入浅出 C {\rm C} C》(马晓锐)和《从 C {\rm C} C到 C {\rm C} C精通面向对象编程》(曾凡锋等)。 6.面向对象程序设计思想和类 6.1 程序设计思想 6.1.1 结构化…

春招第一面-京东

宝子们&#xff0c;卷起来吧&#xff01; 1、自我介绍 2、实习项目 3、实习项目分库分表怎么做的&#xff1f; 4、分布式主键用的是什么&#xff1f;雪花ID是怎么样的&#xff0c;有什么问题&#xff1f; 5、实习业务具体是干嘛 6、你们这个业务为啥不用es&#xff0c;如…