话说前端51-vue的自定义指令

分享兴趣，传播快乐，增长见闻，留下美好！ 大家好，这里是小编。欢迎大家继续访问学苑内容，我们将竭诚为您带来更多更好的内容分享。

Share interest, spread happiness, increase knowledge, and leave a good impression! Hello everyone, this is Xiaobian. Welcome to continue to visit the content of Xueyuan, and we will wholeheartedly bring you more and better content to share.

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

网址：https://cn.vuejs.org/v2/guide/custom-directive.html

Directive: In addition to the default built-in instructions (v-model and v-show) of core functions, Vue also allows you to register custom instructions. Note that in Vue2.0, the main form of code reuse and abstraction is components. However, in some cases, you still need to perform the underlying operations on ordinary DOM elements, and then you will use custom instructions. Global customization instruction: Vue.directive Local customization instruction: directives

Website: https://cn.vuejs.org/v2/guide/custom-directive.html

定义全局指令：自定义全局指令，让页面刚加载完输入光标在第二个输入框

Define global command: customize the global command so that the input cursor is in the second input box just after the page is loaded.

定义局部指令：自定义局部指令，让页面刚加载完输入光标在第二个输入框

Define local instructions: customize local instructions so that the input cursor is in the second input box just after the page is loaded.

钩子函数：一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind

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

inserted

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

update

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

Hook function: an instruction definition object can provide the following hook functions (all optional):

bind

Called only once, when the instruction is first bound to an element. One-time initialization settings can be made here.

inserted

Called when the bound element is inserted into the parent node (only the parent node is guaranteed to exist, but not necessarily inserted into the document).

update

Called when the VNode of its component is updated, but it may happen before its child VNode is updated. The value of the instruction may or may not have changed. But you can ignore unnecessary template updates by comparing the values before and after the update.

componentUpdated

指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind

只调用一次，指令与元素解绑时调用。

指令钩子函数会被传入以下参数：

el

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

binding

一个对象，包含一下这些属性(name、value、oldValue、expression、arg、modifiers)

componentUpdated

Called after the VNode of the component where the instruction is located and its child VNode are all updated.

unbind

Called only once, when the instruction is unbound from the element.

The instruction hook function will be passed the following parameters:

el

Directives are bound to elements that can be used to directly manipulate DOM.

binding

An object that contains these attributes (name, value, oldValue, expression, arg, modifiers).

vnode

vue 编译生成的虚拟节点。

oldVnode

上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

binding：name：指令名，不包括 v- 前缀。

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

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

expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

vnode

Virtual nodes generated by vue compilation.

oldVnode

Last virtual node, available only in update and componentUpdated hooks.

Binding：name: instruction name, excluding v- prefix.

Value: the binding value of the instruction, for example: v-my-directive="1+1 ",the binding value is 2.

OldValue: the previous value of the instruction binding, which is only available in update and componentUpdated hooks. Available whether the value changes or not.

Expression: an instruction expression in the form of a string. For example, in v-my-directive="1+1 ",the expression is" 1+1 ".

Arg: parameter passed to the instruction, optional. For example, in v-my-directional: foo, the parameter is "foo".

Modifiers: An object containing modifiers. For example, in v-my-directive.foo.bar, the modifier object is {foo: true, bar: true}.

今天的分享就到这里了

如果您对今天的文章有独特的想法

欢迎给我们留言

让我们相约明天

祝您今天过得开心快乐！

That's all for today's sharing. If you have unique ideas about today's article, please leave us a message. Let's meet tomorrow. I wish you a happy day today!

翻译：百度翻译

本文由learningyard新学苑原创，部分文字图片来源于他处，如有侵权，请联系删除