What is the use of directive in vue

Editor to share with you what is the use of directive in vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Directive

Function: used to register custom instructions.

Usage:

/ / register a global custom directive `v-focus`Vue.directive ('focus', {/ / when the bound element is inserted into the DOM. Inserted: function (el) {/ / focus element el.focus ()}) / / registers a local instruction, and the component also accepts an option for directives directives: {focus: {/ / definition of instruction inserted: function (el) {el.focus ()}

Description:

Inserted is just one of the interpolation functions of the registration instruction, and the complete registration properties can also include:

Bind: called only once, when the instruction is first bound to an element, where you can make an one-time initialization setting.

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 the component in which it is located is updated, but may occur before its child VNode update. The value of the directive may or may not have changed, but unnecessary template updates can be ignored by comparing the values before and after the update.

ComponentUpdated: called after the VNode and its child VNode of the component to which the instruction belongs are all updated.

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

Vue.directive ('my-directive', {bind: function () {}, inserted: function () {}, update: function () {}, componentUpdated: function () {}, unbind: function () {}}) these are all the contents of the article "what's the use of directive in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!