当前位置: 首页 > news >正文

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!');// 这里放置点击后的操作}}
};

相关文章:

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

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

Linux学习(2):文件目录指令

Linux学习&#xff08;2&#xff09;&#xff1a;文件目录指令 1 文件目录指令1.1 pwd 用来显示当前目录的绝对路径的1.2 ls 显示当前目录的信息1.3 cd 切换到指定目录1.4 mkdir 创建目录1.5 rmdir 删除空目录1.6 touch 创建空文件1.7 cp 拷贝文件到指定目录1.8 rm 移除文件或目…...

Dockerfile的ENV

文章目录 环境总结测试测试1测试2测试3测试4测试5测试6 参考 环境 RHEL 9.3Docker Community 24.0.7 总结 如果懒得看测试的详细信息&#xff0c;可以直接看结果&#xff1a; 一条 ENV 指令可以定义多个环境变量。Dockerfile里可以包含多条 ENV 指令。环境变量的值不需要用…...

【普中开发板】基于51单片机的简易密码锁设计( proteus仿真+程序+设计报告+讲解视频)

基于51单片机的简易密码锁设计 1.主要功能&#xff1a;资料下载链接&#xff1a; 实物图&#xff1a;2.仿真3. 程序代码4. 设计报告5. 设计资料内容清单 【普中】基于51单片机的简易密码锁设计 ( proteus仿真程序设计报告讲解视频&#xff09; 仿真图proteus8.16(有低版本) 程…...

c语言之输出函数用法 putchar

putchar函数 putchar函数是c语言输出函数&#xff0c;但它只能输出单个字符&#xff0c;如果要输出字符串就不合适了。 应用举例 #include<stdio.h> int main() {putchar(a);putchar(4);putchar(\n);return 0: } 从上面代码可以看出&#xff0c;单字符必须用单引号’…...

高精度原边控制电路D3820,CC/CV精度±5%以内,可作为10W以下小功率、低待机功耗的电源替代,可兼容OB2520

高精度原边控制离线式PWM功率开关 特点 1、全电压范围CC/CV精度保持在5%以内 2、用原边控制&#xff0c;无需TL431和光耦 3、欠压锁定&#xff08;UVLO&#xff09;及自动重启 4、驱动BJT 5、内置前沿消隐&#xff08;LEB&#xff09; 6、逐周期限流模式 7、输出线压降…...

Python库学习(十四):ORM框架-SQLAlchemy

1.介绍 SQLAlchemy 是一个用于 Python 的 SQL 工具和对象关系映射&#xff08;ORM&#xff09;库。它允许开发者通过 Python 代码而不是 SQL查询语言来操作数据库。SQLAlchemy 提供了一种灵活且强大的方式来与关系型数据库交互&#xff0c;支持多种数据库后端&#xff0c;如 P…...

信息学奥赛一本通1014:与圆相关的计算

1014&#xff1a;与圆相关的计算 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 167892 通过数: 85008 【题目描述】 给出圆的半径&#xff0c;求圆的直径、周长和面积。输入圆的半径实数r&#xff0c;输出圆的直径、周长、面积&#xff0c;每个数保留小数点后4…...

Vscode——通过SSH连接服务器

1、打开vscode —— 点击左下角 2、选择SSH 3、点击后会自动安装三个插件 4、点击左下角——连接服务器 5、再次点击左下角——连接服务器 6、登录成功后打开终端即可操作 快捷键&#xff1a;ctrl ~ 7、查看编辑服务器文件目录 点击文件——打开文件夹 8、确定后再次输入登录密…...

UE5 通过接口实现角色描边效果

接口不能够被实例化&#xff0c;不能够在内部书写函数的逻辑和设置属性&#xff0c;只能够被继承使用。它能够让不同的类实现有相同的函数&#xff0c;继承接口的类必须实现接口的函数。 并且&#xff0c;我们可以在不同的类里面的函数实现也不同&#xff0c;比如A类描边是红色…...

电脑提示dll丢失怎么办,教你一招将dll修复

使用电脑时&#xff0c;你的电脑是否出现关于dll文件丢失或找不到的问题&#xff0c;出现这种问题又该如何解决呢&#xff0c;dll文件问题会导致软件无法打开&#xff0c;或者会导致系统崩溃。今天就来教大家如何快速解决dll文件修复。 一.如何修复dll修复 方法一&#xff1a;…...

MATLAB mat 文件

1.mat文件格式 MATLAB&#xff08;Matrix Laboratory&#xff09;使用 .mat 文件格式来存储和加载数据。MAT 文件是一种二进制文件格式&#xff0c;能够保存 MATLAB 中的各种数据类型&#xff0c;包括矩阵、向量、结构体、元胞数组等。 特定和用途&#xff1a; 二进制格式&a…...

Linux du和df命令

目录 一. df二. du 一. df ⏹用于显示系统级别&#xff0c;磁盘分区上的可用和已用空间的信息 -h&#xff1a;以人类可读的格式显示文件系统大小 ⏹每秒钟监视当前磁盘的使用情况 watch 用于周期性的执行特定的命令-n 1 表示每一秒刷新一次命令执行的结果df -h ./ 表示周期性…...

Adobe Photoshop 快捷键

PS快捷键 图层 选择图层 Ctrl T&#xff1a;可以对图层的大小和位置进行调整 填充图层 MAC: AltBackspace (前景) or CtrlBackspace (背景) WINDOWS: AltDelete (前景) or CtrlDelete (背景) 快速将图层填充为前景色或背景色 平面化图层&#xff08;盖印图层&#xff09…...

缓存代理服务器

1 缓存代理 1.1 缓存代理的概述 web代理的作用 缓存网页对象&#xff0c;减少重复请求 存储一些之前被访问的或且可能将要备再次访问的静态网页资源对象&#xff0c;使用户可以直接从缓存代理服务器获取资源&#xff0c;从而减少上游原始服务器的负载压力&#xff0c;加快整…...

四道面试题

一.网络的七层模型 网络的七层模型&#xff0c;也被称为OSI七层协议模型&#xff0c;是一种用于理解和描述网络通信过程的概念模型。这个模型将网络通信过程划分为七个层次&#xff0c;从低到高分别是&#xff1a;物理层、数据链路层、网络层、传输层、会话层、表示层和应用层…...

BRC20 技术分析

文章目录 什么是 BRC20 ?brc20 白皮书。重点基于链上数据解析获取交易详情返回值如何将 16 进制转换为 字符串没有节点,如何获取数据?见证隔离如何解析出 BRC20 数据?最后如何快速搭建节点BRC20 Indexer...

【Unity】Timer计时器属性及使用

可以代替协程完成延时操作 可以不用Update进行计时 GitHub开源计时插件 网址&#xff1a;https://github.com/akbiggs/UnityTimer/tree/master 导入&#xff1a;URL&#xff1a;https://github.com/akbiggs/UnityTimer.git 基本功能&#xff1a; 创建计时器&#xff1a; Time…...

Salesforce lightning优势介绍

今天我要给大家说说&#xff0c;Salesforce的两个版本&#xff1a;第一代Classic UI&#xff0c;和13年以来为迎接移动化趋势而推出的新Lightning UI。Classic马上就要和我们说88了&#xff0c;那Lightning究竟有哪些大杀器让我们无法抗拒呢&#xff1f;让我们一探究竟吧。 首先…...

leaflet学习笔记-贝塞尔曲线绘制(八)

前言 两点之间的连线是很常见的&#xff0c;但是都是直直的一条线段&#xff0c;为了使连线更加平滑&#xff0c;我们可以使用曲线进行连线&#xff0c;本功能考虑使用贝塞尔曲线进行连线绘制&#xff0c;最后将线段的两端节点连接&#xff0c;返回一个polygon。 贝塞尔简介 …...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

聚六亚甲基单胍盐酸盐市场深度解析:现状、挑战与机遇

根据 QYResearch 发布的市场报告显示&#xff0c;全球市场规模预计在 2031 年达到 9848 万美元&#xff0c;2025 - 2031 年期间年复合增长率&#xff08;CAGR&#xff09;为 3.7%。在竞争格局上&#xff0c;市场集中度较高&#xff0c;2024 年全球前十强厂商占据约 74.0% 的市场…...