Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to use directives custom components in vue.js". In daily operation, I believe many people have doubts about how to use directives custom components in vue.js. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use directives custom components in vue.js". Next, please follow the editor to study!

Code example:

Directives: {mybind: {bind:function (el) {el.value = "this is mybind-bind"}

When the page is initialized, this is mybind-bind is displayed in the input.

Register the custom instruction mybind through directives, and several hooks are provided in each custom instruction. For example, the function of bind,bind in the example is to define an initialization action to be performed once during binding, to observe the bind function, which takes the DOM bound by the instruction as a parameter, and directly manipulates the DOM node to assign values to input in the function body.

Hook functions for custom instructions:

Bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {}

Official statement:

Bind: called only once, when the instruction is first bound to an element, this hook function allows you to define an initialization action that is performed once during binding.

Inserted: called when the bound element is inserted into the parent node (when the parent node exists, it does not have to exist in the document).

Update: called when the template of the bound element is updated, regardless of whether the bound value changes or not. Unnecessary template updates can be ignored by comparing the binding values before and after the update (see below for detailed hook function parameters).

ComponentUpdated: called when the template of the bound element completes an update cycle.

Unbind: called only once, when the instruction is unbound from the element.

The hook function also provides some parameters, such as the el of bind:function (el) in the above example

Official description of hook function parameters:

El: the element bound by the instruction that can be used to directly manipulate the DOM.

Binding: an object that contains the following properties:

Name: instruction name, excluding the v-prefix.

Value: the binding value of the instruction, for example: vMurmyMutual directive = "1 + 1", and the value of value is 2.

OldValue: the previous value bound by the instruction, available only in update and componentUpdated hooks. Available regardless of whether the value changes or not.

Expression: the string form of the bound value. For example, the value of expression is "1 + 1" and the value is "1 + 1".

Arg: the parameter passed to the instruction. For example, v-my-directive:foo, the value of arg is "foo".

Modifiers: an object that contains modifiers. For example: v-my-directive.foo.bar, the value of the modifier object modifiers is {foo: true, bar: true}.

Vnode: the virtual node generated by Vue compilation. Check out VNode API for more details.

OldVnode: the last virtual node, available only in update and componentUpdated hooks.

At this point, the study on "how to use directives custom components in vue.js" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.