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

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

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

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

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

// 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选项:

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

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

<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,您应该将这些参数视为只读,并且不要修改它们。如果您需要通过钩子共享信息,建议通过元素的数据集来实现。

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

<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,但不关心其他钩。例如:

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

对象文字

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

<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!"
})

相关推荐

再说圆的面积-蒙特卡洛(蒙特卡洛方法求圆周率的matlab程序)

在微积分-圆的面积和周长(1)介绍微积分方法求解圆的面积,本文使用蒙特卡洛方法求解圆面积。...

python编程:如何使用python代码绘制出哪些常见的机器学习图像?

专栏推荐...

python创建分类器小结(pytorch分类数据集创建)

简介:分类是指利用数据的特性将其分成若干类型的过程。监督学习分类器就是用带标记的训练数据建立一个模型,然后对未知数据进行分类。...

matplotlib——绘制散点图(matplotlib散点图颜色和图例)

绘制散点图不同条件(维度)之间的内在关联关系观察数据的离散聚合程度...

python实现实时绘制数据(python如何绘制)

方法一importmatplotlib.pyplotaspltimportnumpyasnpimporttimefrommathimport*plt.ion()#...

简单学Python——matplotlib库3——绘制散点图

前面我们学习了用matplotlib绘制折线图,今天我们学习绘制散点图。其实简单的散点图与折线图的语法基本相同,只是作图函数由plot()变成了scatter()。下面就绘制一个散点图:import...

数据分析-相关性分析可视化(相关性分析数据处理)

前面介绍了相关性分析的原理、流程和常用的皮尔逊相关系数和斯皮尔曼相关系数,具体可以参考...

免费Python机器学习课程一:线性回归算法

学习线性回归的概念并从头开始在python中开发完整的线性回归算法最基本的机器学习算法必须是具有单个变量的线性回归算法。如今,可用的高级机器学习算法,库和技术如此之多,以至于线性回归似乎并不重要。但是...

用Python进行机器学习(2)之逻辑回归

前面介绍了线性回归,本次介绍的是逻辑回归。逻辑回归虽然名字里面带有“回归”两个字,但是它是一种分类算法,通常用于解决二分类问题,比如某个邮件是否是广告邮件,比如某个评价是否为正向的评价。逻辑回归也可以...

【Python机器学习系列】拟合和回归傻傻分不清?一文带你彻底搞懂

一、拟合和回归的区别拟合...

推荐2个十分好用的pandas数据探索分析神器

作者:俊欣来源:关于数据分析与可视化...

向量数据库:解锁大模型记忆的关键!选型指南+实战案例全解析

本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在...

用Python进行机器学习(11)-主成分分析PCA

我们在机器学习中有时候需要处理很多个参数,但是这些参数有时候彼此之间是有着各种关系的,这个时候我们就会想:是否可以找到一种方式来降低参数的个数呢?这就是今天我们要介绍的主成分分析,英文是Princip...

神经网络基础深度解析:从感知机到反向传播

本文较长,建议点赞收藏,以免遗失。更多AI大模型应用开发学习视频及资料,尽在...

Python实现基于机器学习的RFM模型

CDA数据分析师出品作者:CDALevelⅠ持证人岗位:数据分析师行业:大数据...

取消回复欢迎 发表评论: