自定义指令binding参数

news2025/1/13 10:14:36

 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作

如果想注册局部指令,组件中也接受一个 directives 的选项

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

然后你可以在模板中任何元素上使用新的 v-focus

<input v-focus>

个指令定义对象可以提供如下几个钩子函数

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 

指令钩子函数的参数

el:指令所绑定的元素,可以用来直接操作 DOM。

binding 对象

对象键值

name:指令名,不包括 v- 前缀。

value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2

oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用

xpression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"

除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

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

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

相关文章

自定义viewGroup

案例分析&#xff1a;继承自extends LinearLayoutpublic class MainTabBarView extends LinearLayout实现3个方法public MainTabBarView(Context context) {this(context, null);}public MainTabBarView(Context context, Nullable AttributeSet attrs) {this(context, attrs, …

Kettle--MySQL生产数据库千万、亿级数据量迁移方案及性能优化

一、Kettle环境搭建 一、Windows主要用于可视化创建数据迁移用到的ktr转换脚本、kjb作业脚本&#xff0c;以及脚本需要配置的DB2信息、读写性能优化信息等&#xff0c;也可直接在客户端完成不同数据库之间的数据迁移。 测试库表及数据 &#xff08;1&#xff09;创建测试库表…

PVE安装win10并开启远程桌面

接上一篇一、win10安装镜像最新版下载下载地址&#xff1a;https://next.itellyou.cn/现在的win10最新版时22h2,文件名为zh-cn_windows_10_business_editions_version_22h2_updated_dec_2022_x64_dvd_cde06342.iso如果对更新有要求&#xff0c;建议每月跟踪下载一次二、上传win…

IRCNN-FPOCS 代码解读(1):整体框架

0 前言 按照自己实现论文代码的思路&#xff0c;去研究作者的代码&#xff0c;找到自己的知识盲区和不足&#xff0c;提升编码技能。 本模块主要介绍代码实现思路。细节分析详见后续博客。 1、合成地震数据 利用波动方程&#xff1f;&#xff1f;&#xff1f;合成数据&…

JavaScript的“神奇”之处

JavaScript 是一门很棒的语言。它的语法简单&#xff0c;生态系统也很庞大&#xff0c;最重要的是&#xff0c;它拥有最伟大的社区力量。我们知道&#xff0c;JavaScript 是一个非常有趣的语言&#xff0c;但同时也充满了各种奇怪的行为。让我们一起来看一下吧~ example 数组…

Weston 窗口管理(2)

窗口管理(2) 本文基于 weston 分支 10.0.2 进行描述. 五、概述 本文为窗口管理(1)的续章,更多站在开发者角度,以 weston 的代码实现讲解窗口管理(1)中所实现的部分业务场景. 六、数据结构 在窗口管理(1)中曾经描述过 weston 具体的分层逻辑,如下: 再进一步可以把 WESTON_LAY…

关于grpc的第一次尝试

自己瞎琢磨的&#xff0c;有错勿怪。 一、rpc理解 微服务会在不同的端口使用不同的语言提供相异的服务&#xff0c;端口之间的通信就使用rpc。这边的grpc的“g”我原先意味是golang&#xff0c;后来发现是google。 在golang关于rpc的官方包中&#xff0c;rpc主要有使用http/…

(7)Qt中的自定义槽(函数)

目录 槽函数定义的规则 关联信号与槽错误的示例 类成员函数函数做槽函数使用 静态类成员函数做槽函数使用 全局函数做槽函数使用 lambda表达式做槽函数使用 使用lambda表达式的注意事项 注意事项一&#xff1a; 注意事项二&#xff1a; 槽函数定义的规则 1.槽函数返回值…

多图解析KMP算法原理

KMP是什么 KMP是一种字符串匹配算法&#xff0c;能够判断字符串s2&#xff0c;是否为字符串s1的子串 例如&#xff1a;s1 "abd123def"&#xff0c;s2 "123"&#xff0c;KMP会返回4&#xff0c;代表s2是s1的子串&#xff0c;第一个匹配的下标为3 假设s…

线程池及源码分析

目录 1 java构建线程的方式 2 线程池的7个参数 3 线程池属性标识&线程池的状态 3.1 核心属性 3.2 线程池的状态 4 线程池的执行流程 5 添加工作线程的流程 6 Worker的封装&后续任务的处理 1 java构建线程的方式 一般就3~4种&#xff1a; 继承Thread&#xff…

迎接新年,暂且用Python绘制几个中国结吧

前言 今天就来分享几个用python绘制的图案吧 马上就要迎来新年了 就绘制了几个中国结&#xff0c;嘿嘿 话不多说&#xff0c;直接展示一下代码和效果图吧 更多学习资料与源码点击文章末尾名片领取 1. 效果图&#xff1a; 代码展示 import turtle turtle.screensize(600,…

GPDB插件安装工具之gppkg

gppkg命令gppkg是一个python3编写的打包脚本&#xff0c;在整个集群中安装.gppkg格式的Greenplum数据库扩展&#xff08;例如PL/Java、PL/R和MADlib&#xff09;及其依赖项&#xff0c;位于/usr/local/cloudberry-db/bin/gppkg(自己安装的gpdb目录)&#xff0c;安装到$GPHOME里…

1个寒假能学多少网络安全知识?

现在可以看到很多标题都声称三个月内就可以转行网络安全领域&#xff0c;并且成为月入15K的网络工程师。那么&#xff0c;这个寒假的时间能学多少网络安全知识&#xff1f;是否能入门网络安全工程师呢&#xff1f; 答案是肯定的。 虽然网络完全知识是一门广泛的学科&#xff…

ccc-sklearn-13-朴素贝叶斯(1)

朴素贝叶斯 一种直接衡量标签和特征之间概率关系的有监督学习算法&#xff0c;专注分类的算法&#xff0c;基于概率论和数理统计的贝叶斯理论。在计算的过程中&#xff0c;假设特征之间条件独立&#xff0c;不进行建模&#xff0c;采用后验估计。 sklearn中的朴素贝叶斯 类含…

1-选择题练手

1.采用递归方式对顺序表进行快速排序&#xff0c;下列关于递归次数的叙述中&#xff0c;正确的是 A.每次划分后&#xff0c;先处理较长的分区可以减少递归次数 B.递归次数与初始数据的排列次序无关 C.每次划分后&#xff0c;先处理较短的分区可以减少递归次数 D.递归次数与…

DaVinci:键 - 外部蒙版

调色页面&#xff1a;键Color&#xff1a;Key在调色页面&#xff0c;可以轻松地从媒体池将某个片段拖至节点面板中&#xff0c;以作为外部蒙版。或者&#xff0c;在节点上右击选择“添加蒙版” Add Matte。若无附加&#xff0c;则可以选择本节点片段的明度信息作为外部蒙版。当…

hbase2.x orphan regions on filesystem(region丢失)问题修复

问题描述&#xff1a;orphan regions on filesystem 可以通过主master web页面的HBCK Report查看 也可以通过hbck2工具查看 # 查看指定表 hbase hbck -j $HBASE_HOME/lib/hbase-hbck2-1.3.0-SNAPSHOT.jar addFsRegionsMissingInMeta default:tableName # 查看命名空间下所有…

Yolov5+TensorRT-生成dll-python/c++调用dll

YOlov5-6.0TensorRTdllpython/c调用简介1.项目环境2.TensorRT验证1.在tensorrtx-yolov5-v6.0\yolov5目录下新建build目录2.编写CMake.txt,根据自己目录更改2&#xff08;OpenCV_DIR&#xff09;、3&#xff08;TRT_DIR&#xff09;、10&#xff08;Dirent_INCLUDE_DIRS&#xf…

LabVIEW网络服务器何使用,有哪些不同

LabVIEW网络服务器何使用&#xff0c;有哪些不同NI有几款不同的Web服务器&#xff0c;可使用不同的产品并覆盖不同的用例。它们具有非常相似的名称&#xff0c;可以互换使用&#xff0c;但每个都提供不同的功能。应用程序Web服务器描述&#xff1a;NI应用Web服务器加载使用LabV…

企业微信商户号是什么?如何开通?

企业微信作为一款优秀的移动办公工具&#xff0c;与微信全方位打通&#xff0c;既可以与客户沟通交流&#xff0c;也可以在达成交易后直接进行对公收款&#xff0c;但是前提是要开通企业微信商户号。前言企业微信和微信都出自腾讯&#xff0c;而且企业微信全方位连接微信&#…