百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

vue-自定义指令Directives(vue3.0自定义指令)

ztj100 2024-10-27 18:35 47 浏览 0 评论

除了核心(v-model和v-show)中的默认指令集外,Vue 还允许您注册自己的自定义指令。请注意,在 Vue 2.0 中,代码重用和抽象的主要形式是组件 - 但是在某些情况下,您需要对普通元素进行低级别的 DOM 访问,这也是自定义指令仍然有用的地方。一个例子就是关注一个输入元素,就像这样:

当页面加载时,该元素获得焦点(注意:自动对焦在移动 Safari 上不起作用)。事实上,如果您在访问此页面后没有点击其他任何内容,上面的输入应该现在集中。现在我们来构建完成这个的指令:

Bash
// Register a global custom directive called v-focus
Vue.directive('focus', {
 // When the bound element is inserted into the DOM...
 inserted: function (el) {
 // Focus the element
 el.focus()
 }
})

如果您想在本地注册指令,组件也会接受一个 directives选项:

Bash
directives: {
 focus: {
 // directive definition
 inserted: function (el) {
 el.focus()
 }
 }
}

然后在模板中,可以v-focus在任何元素上使用新属性,如下所示:

Bash
<input v-focus>

Hook功能

指令定义对象可以提供多种钩子函数(全部可选):

  • bind:仅在指令首次绑定到元素时才调用一次。这是您可以进行一次性安装工作的地方。
  • inserted:在绑定元素已经插入到其父节点时调用(这只能保证父节点的存在,不一定在文档中)。
  • update:在包含组件的 VNode 更新后调用,但可能在其子组件更新之前调用。该指令的值可能也可能没有改变,但可以通过比较绑定的当前值和旧值来避免不必要的更新(请参阅下面的挂钩参数)。
  • componentUpdated:在包含组件的 VNode 和子项的 VNodes 更新后调用。
  • unbind:仅当该指令从元素解除绑定时才调用一次。

我们将探讨传递到这些挂钩(即论点el,binding,vnode,和oldVnode)在下一节。

指令Hook参数

指令Hook传递了这些参数:

  • el:指令所绑定的元素。这可以用来直接操作 DOM。
  • 绑定:包含以下属性的对象。
  • 名称:指令的名称,不带v-前缀。
  • value:传递给指令的值。例如v-my-directive="1 + 1",价值会是2。
  • oldValue:以前的值,仅在update和中可用componentUpdated。无论值是否已更改,都可用。
  • 表达式:作为字符串的绑定表达式。例如v-my-directive="1 + 1",表达式就是"1 + 1"。
  • arg:传递给指令的参数,如果有的话。例如v-my-directive:foo,arg就是"foo"。
  • 修饰符:包含修饰符的对象(如果有的话)。例如在v-my-directive.foo.bar,修饰符对象会{ foo: true, bar: true }。
  • vnode:由 Vue 编译器生成的虚拟节点。有关完整的详细信息,请参阅 VNode API。
  • oldVnode:前一个虚拟节点,仅在update和componentUpdated钩子中可用。

除此之外el,您应该将这些参数视为只读,并且不要修改它们。如果您需要通过钩子共享信息,建议通过元素的数据集来实现。

使用其中一些属性的自定义指令的示例:

Bash
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
Vue.directive('demo', {
 bind: function (el, binding, vnode) {
 var s = JSON.stringify
 el.innerHTML =
 'name: ' + s(binding.name) + '<br>' +
 'value: ' + s(binding.value) + '<br>' +
 'expression: ' + s(binding.expression) + '<br>' +
 'argument: ' + s(binding.arg) + '<br>' +
 'modifiers: ' + s(binding.modifiers) + '<br>' +
 'vnode keys: ' + Object.keys(vnode).join(', ')
 }
})
new Vue({
 el: '#hook-arguments-example',
 data: {
 message: 'hello!'
 }
})

功能速记

在很多情况下,你可能希望在相同的行为bind和update,但不关心其他钩。例如:

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

对象文字

如果您的指令需要多个值,则还可以传入 JavaScript 对象文字。请记住,指令可以采用任何有效的 JavaScript 表达式。

Bash
<div v-demo="{ color: 'white', text: 'hello!' }"></div>
Vue.directive('demo', function (el, binding) {
 console.log(binding.value.color) // => "white"
 console.log(binding.value.text) // => "hello!"
})

相关推荐

Sublime Text 4 稳定版 Build 4113 发布

IT之家7月18日消息知名编辑器SublimeText4近日发布了Build4113版本,是SublimeText4的第二个稳定版。IT之家了解到,SublimeTe...

【小白课程】openKylin便签贴的设计与实现

openKylin便签贴作为侧边栏的一个小插件,提供便捷的文本记录和灵活的页面展示。openKylin便签贴分为两个部分:便签列表...

“告别 Neovim!为什么我投奔了刚开源的 Zed 编辑器?”

...

壹啦罐罐 Android 手机里的 Xposed 都装了啥

这是少数派推出的系列专题,叫做「我的手机里都装了啥」。这个系列将邀请到不同的玩家,从他们各自的角度介绍手机中最爱的或是日常使用最频繁的App。文章将以「每周一篇」的频率更新,内容范围会包括iOS、...

电气自动化专业词汇中英文对照表(电气自动化专业英语单词)

专业词汇中英文对照表...

Python界面设计Tkinter模块的核心组件

我们使用一个模块,我们要熟悉这个模块的主要元件。如我们设计一个窗口,我们可以用Tk()来完成创建;一些交互元素,按钮、标签、编辑框用到控件;怎么去布局你的界面,我们可以用到pack()、grid()...

以色列发现“死海古卷”新残片(死海古卷是真的吗)

编译|陈家琦据艺术新闻网(artnews.com)报道,3月16日,以色列考古学家发现了死海古卷(DeadSeaScrolls)新残片。新出土的羊皮纸残片中包括以希腊文书写的《十二先知书》段落,这...

鸿蒙Next仓颉语言开发实战教程:订单列表

大家上午好,最近不断有友友反馈仓颉语言和ArkTs很像,所以要注意不要混淆。今天要分享的是仓颉语言开发商城应用的订单列表页。首先来分析一下这个页面,它分为三大部分,分别是导航栏、订单类型和订单列表部分...

哪些模块可以用在 Xposed for Lollipop 上?Xposed 模块兼容性解答

虽然已经有了XposedforLollipop的安装教程,但由于其还处在alpha阶段,一些Xposed模块能不能依赖其正常工作还未可知。为了解决大家对于模块兼容性的疑惑,笔者尽可能多...

利用 Fluid 自制 Mac 版 Overcast 应用

我喜爱收听播客,健身、上/下班途中,工作中,甚至是忙着做家务时。大多数情况下我会用MarcoArment开发的Overcast(Freemium)在iPhone上收听,这是我目前最喜爱的Po...

Avalonia日志组件实现与优化指南(ar日志表扣)

...

浅色Al云食堂APP代码(三)(手机云食堂)

以下是进一步优化完善后的浅色AI云食堂APP完整代码,新增了数据可视化、用户反馈、智能推荐等功能,并优化了代码结构和性能。项目结构...

实战PyQt5: 121-使用QImage实现一个看图应用

QImage简介QImage类提供了独立于硬件的图像表示形式,该图像表示形式可以直接访问像素数据,并且可以用作绘制设备。QImage是QPaintDevice子类,因此可以使用QPainter直接在图...

滚动条隐藏及美化(滚动条隐藏但是可以滚动)

1、滚动条隐藏背景/场景:在移动端,滑动的时候,会显示默认滚动条,如图1://隐藏代码:/*隐藏滚轮*/.ul-scrool-box::-webkit-scrollbar,.ul-scrool...

浅色AI云食堂APP完整代码(二)(ai 食堂)

以下是整合后的浅色AI云食堂APP完整代码,包含后端核心功能、前端界面以及优化增强功能。项目采用Django框架开发,支持库存管理、订单处理、财务管理等核心功能,并包含库存预警、数据导出、权限管理等增...

取消回复欢迎 发表评论: