Vue2x的自定义指令和render函数使用自定义指令

在某些情况下,我们需要对底层DOM进行操作,而内置的指令不能满足需求,就需要自定义指令。一个自定义指令由一个包含类似组件的生命周期的钩子的对象来定义,钩子函数会接收到指令所绑定的元素作为参数。

定义指令

常用两种方式进行自定义指令,一种是全局定义,另一种在当前组件中定义

// 局部定义
export default {name:'test',data(){return {}},directives: {focus: {bind: function(el, bindings, vnode) {/* ... */},inserted: function(el, bindings, vnode) { el.focus(); },update: function(el, bindings, vnode) { /* ... */ },componentUpdated: function(el, bindings, vnode) { /* ... */ },unbind: function(el, bindings, vnode) { /* ... */ }}},methos:{}
};
// 全局定义
const app = createApp({});
// 使 v-focus 在所有组件中都可用
app.directive("focus", {bind: function(el, bindings, vnode) {/* ... */},inserted: function(el, bindings, vnode) { el.focus(); },update: function(el, bindings, vnode) { /* ... */ },componentUpdated: function(el, bindings, vnode) { /* ... */ },unbind: function(el, bindings, vnode) { /* ... */ }
});
// 全局和局部的调用方式相同
<input v-focus>

钩子函数
钩子函数就是拦截模块渲染流程的“挂钩”,在不同的节点拦截或监听事件,以完成自定义指令的操作。五种钩子拦截的事件分别是初始化、插入节点、渲染完成,监听绑定值的变化和销毁节点。

  • bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted:节点第一次插入到父节点(页面)中会触发,只会触发这一次.
  • update:当前元素渲染完成,绑定的值发生改变的时候触发
  • componentUpdated:当前元素所在的区域全部渲染完成,绑定的额值发生改变时触发。
  • unbind:只调用一次,指令与元素解绑时调用。(比如离开页面或销毁组件等)

钩子参数

钩子参数即绑定到钩子函数上的参数

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

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

    • value:传递给指令的值。例如在 v-my-directive="1 + 1" 中,值是 2。
    • oldValue:修改前的值,仅在 beforeUpdateupdated 中生效。无论是否修改都可以访问。
    • arg:传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中,参数是 "foo"
    • modifiers:一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中,修饰符对象是 { foo: true, bar: true }
    • instance:使用该指令的组件实例。
  • dir:指令的定义对象。

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

  • prevNode:代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdateupdated 钩子中可用。

传递参数

传递钩子参数的方式有如下几种

  1. 实例化一个指令,但没有参数 v-xxx。例如上面提到的 v-focus
  2. 传递值的指令 v-xxx=“value”。value 值是变量,一般会绑定到 bingdingsvalue
  3. 传递字符串的指令 v-xxx=“‘string’”,例如 v-html="'<p>Content</p>'"
  4. 传递参数的指令 v-xxx:arg1=value1,值arg1value1分别绑定到bingdingsargvalue
  5. 传递动态参数的指令 v-xxx:[arg]=value1,变量 arg 可以实现动态指令参数
  6. 使用修饰符(modifier)的指令 v-xxx:arg.m1=“value”m1会被绑定到 bingdingsmodifier上。允许多个修饰符用逗号连接绑定。例如 a.b.c 对应的是{a:true,b:true,c:true}

函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写:

Vue.directive('color-swatch', function (el, binding) {  el.style.backgroundColor = binding.value  
})

对象字面量

如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

render函数使用自定义指令

在vue当时我们使用指令一般是如下的方式

<template><div><el-button type="primary" v-norepeat.disabled="{time:3000}" @click="doUpdateItem">保存</el-button></div>
</template>

但是我们想在render函数里面写上面的指令,改怎么写呢?
首先想到的就是下面的写法,但是报错了
在这里插入图片描述

1.使用创建虚拟节点的函数

export default {render(h) {const time = 3000; // 这里是 v-norepeat.disabled 的值return h('div',[h('el-button',{props: {type: 'primary'},directives: [{name: 'norepeat',value: {time }, // value 是指令绑定的值arg: null, // arg 是指令的参数modifiers: {disabled: true // modifiers 是指令的修饰符}}],on: {click: this.doUpdateItem}},'保存')]);},methods: {doUpdateItem() {console.log('Button clicked!');// 这里放置点击后的操作}}
};
  1. jsx写法
export default {render() {const time = 3000; // 这里是 v-norepeat.disabled 的值const directives= [{name: 'norepeat',value: {time}, // value 是指令绑定的值arg: null, // arg 是指令的参数modifiers: {disabled: true // modifiers 是指令的修饰符}}]return (<div><el-button type='primary' {...{directives}} onClick={this.doUpdateItem}>保存</el-button></div>)},methods: {doUpdateItem() {console.log('Button clicked!');// 这里放置点击后的操作}}
};

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

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

相关文章

工作需要你的陪伴

初识CSDN 工欲善其事&#xff0c;必先利其器&#xff0c;要做好工作&#xff0c;先要使工具锋利&#xff0c;才能事半功倍。2019年开始学习编程的时候&#xff0c;总会遇到各种问题&#xff0c;都是英文看不懂&#xff0c;没办法只能百度搜索&#xff0c;当时搜索引擎排名靠前的…

只有金蝶用户,才懂金蝶BI方案的含金量

资深金蝶系统用户都看得明明白白&#xff0c;金蝶系统侧重于企业资源的计划和管理&#xff0c;而当前企业数字化运营决策不仅需要高效合理的流程管理&#xff0c;更需要一套完善的数据分析方案&#xff08;金蝶BI方案&#xff09;&#xff0c;无缝对接金蝶系统&#xff0c;智能…

Spring MVC 的RequestMapping注解

RequestMapping注解 使用说明 作用&#xff1a;用于建立请求URL和处理请求方法之间的对应关系。 出现位置&#xff1a; 类上&#xff1a; 请求 URL的第一级访问目录。此处不写的话&#xff0c;就相当于应用的根目录。写的话需要以/开头。它出现的目的是为了使我们的 URL 可以…

Python类型转换,数据类型转换函数大全 与 strip()函数介绍

Python类型转换&#xff0c;数据类型转换函数大全 虽然 Python 是弱类型编程语言&#xff0c;不需要像 Java 或 C 语言那样还要在使用变量前声明变量的类型&#xff0c;但在一些特定场景中&#xff0c;仍然需要用到类型转换。 比如说&#xff0c;我们想通过使用 print() 函数…

Linux备忘手册

常⽤命令 作⽤ shutdown -h now 即刻关机 shutdown -h 10 10分钟后关机 shutdown -h 11:00 11&#xff1a;00关机 shutdown -h 10 预定时间关机&#xff08;10分钟后&#xff09; shutdown -c 取消指定时间关机 shutdown -r now 重启 shutdown -r 10 10分钟之后重启 shutdown -…

第八讲_css定位

css定位 1. css定位介绍2. 静态定位&#xff08;static&#xff09;3. 相对定位&#xff08;relative&#xff09;4. 绝对定位&#xff08;absolute&#xff09;5. 固定定位&#xff08;fixed&#xff09;6. 粘性定位&#xff08;sticky&#xff09; 1. css定位介绍 在 css 中…

006集 正则表达式 re 应用实例—python基础入门实例

正则表达式指预先定义好一个 “ 字符串模板 ” &#xff0c;通过这个 “ 字符串模 板” 可以匹配、查找和替换那些匹配 “ 字符串模板 ” 的字符串。 Python的中 re 模块&#xff0c;主要是用来处理正则表达式&#xff0c;还可以利用 re 模块通过正则表达式来进行网页数据的爬取…

18. 从零用Rust编写正反向代理, 主动式健康检查源码实现

wmproxy wmproxy是由Rust编写&#xff0c;已实现http/https代理&#xff0c;socks5代理&#xff0c; 反向代理&#xff0c;静态文件服务器&#xff0c;内网穿透&#xff0c;配置热更新等&#xff0c; 后续将实现websocket代理等&#xff0c;同时会将实现过程分享出来&#xff…

Python陷阱-如何安全地删除列表元素?

一个常见的任务是在一个列表上迭代&#xff0c;并根据条件删除一些元素。本文将展示如何完成该任务的不同方法&#xff0c;同时展示一些需要避免的陷阱。 假设我们需要修改列表a&#xff0c;并且必须删除所有不是偶数的项。首先实现辅助函数even(x)来确定一个数字x是否是偶数: …

LT8911EX LVDS 转 eDP

概述 Lontium LT8911EX 是 LVDS 至 eDP 转换器&#xff0c;具有单端口或双端口可配置 LVDS 接收器&#xff0c;具有 1 个时钟通道和多达 8 个数据通道&#xff0c;每个数据通道的最大工作速率为 1.2Gbps&#xff0c;最大输入带宽为 9.6Gbps。该转换器对输入LVDS数据进行反串行…

商用净水器行业分析:到2025年市场零售规模将接近500亿元

商用净水器与家庭净水器相差无几&#xff0c;只是出水量大小不同。一般商业净水器都采用中央净水器和集成净水器这两种&#xff0c;这样不仅可以解决工业用水&#xff0c;还可解决工人日常饮用水、沐浴用水和洗涤用水等生活用水问题。 目前我国中央水处理整机依然处于市场发展的…

【小黑嵌入式系统第十四课】μC/OS-III程序设计基础(三)——信号量(任务同步资源同步)、事件标记组(与或多个任务)

上一课&#xff1a; 【小黑嵌入式系统第十三课】PSoC 5LP第二个实验——中断控制实验 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站&#xff1a;人工智能 文章目录 1 信号量1.1 简介1.2…

DNS:解析互联网的“导航系统”

引言&#xff1a; 在互联网时代&#xff0c;我们每天都在使用各种网站和服务&#xff0c;但很少有人真正了解这些网站和服务是如何被找到和访问的。这背后有一个被称为DNS&#xff08;域名系统&#xff09;的“导航系统”&#xff0c;它负责将人类可读的域名转换为计算机可识别…

学习笔记之——3D Gaussian Splatting源码解读

之前博客对3DGS进行了学习与调研 学习笔记之——3D Gaussian Splatting及其在SLAM与自动驾驶上的应用调研-CSDN博客文章浏览阅读450次。论文主页3D Gaussian Splatting是最近NeRF方面的突破性工作&#xff0c;它的特点在于重建质量高的情况下还能接入传统光栅化&#xff0c;优…

对比两个json对象有那几个字段被修改,并返回有改动的字段内容

如果您想比较两个 JSON 对象&#xff0c;找出哪些字段发生了变化&#xff0c;并返回发生变化的字段及其新的值&#xff0c;您可以编写一个函数来递归比较对象。以下是一个 TypeScript 示例&#xff1a; type JSONValue string | number | boolean | null | JsonObject | Json…

LNMP平台对接redis服务

目录 1、安装 LNMP 各个组件 2、安装 redis 服务 3、安装 redis 扩展 4、修改 php 配置文件 5、测试连接 1、安装 LNMP 各个组件 2、安装 redis 服务 3、安装 redis 扩展 官网&#xff1a;http://redis.io/ 下载包&#xff1a; https://codeload.github.com/phpredis/p…

C++:常量

const的最初动机 const的使用方法 使用const的好处是允许指定一种语义上的约束&#xff0c;即某种对象不能被修改&#xff0c;且由编译器具体实施这种约束。 const声明格式&#xff1a;const 类型名 对象名;修饰普通变量&#xff0c;时期不能被随意修改 【注意】1.C中的const…

探索大模型时代下的文档识别与分析【GPT4-V带来的挑战与机遇】

中国图象图形学学会青年科学家会议是由中国图象图形学学会青年工作委员会发起的学术会议。本会议面向国际学术前沿与国家战略需求&#xff0c;致力于支持图象图形领域的优秀青年学者&#xff0c;为青年学者们提供学术交流与研讨的平台&#xff0c;促进学者之间的交流与合作。会…

深入理解C#中的引用类型、引用赋值以及 `ref` 关键字

深入理解C#中的引用类型、引用赋值以及 ref 关键字 在C#编程中&#xff0c;理解引用类型、引用赋值以及 ref 关键字的使用对于编写高效、可靠的代码至关重要。本文将深入探讨这些概念&#xff0c;帮助您更好地理解C#的工作原理。 引用类型简介 在C#中&#xff0c;所有的类型都…

MySQL的事务机制

一、事务机制简述 事务机制,避免写入直接操作数据文件&#xff1b;利用日志来实现间接写入&#xff0c;与事务有关的, redo日志与undo日志&#xff1b;sql语句操作记录复制到undo日志然后增删改查操作的结果会记录在redo日志&#xff0c;如果操作没有什么问题就把数据同步到数…