How to use Vue's custom directive to complete a drop-down menu

What I bring to you this time is how to use Vue’s custom instructions to complete a drop-down menu. We know that vue’s custom instructions are very powerful, so this article will give you a good analysis. one time.

What I’m sharing this time is about how to use Vue custom instructions. After learning the basics, let’s actually complete a drop-down list. Without further ado, let’s get straight to the practical stuff

//全局注册
Vue.directive('my-directive', {
 // 指令选项
})
  
// 局部注册
var app = new Vue({
 el: '#app'
 directives: {
  'my-directive': {
    // 指令选项
  }
})

I believe that people who are familiar with Vue will know the writing method and components of directive after reading it. Basically similar, except that the method name is changed from component to directive. The above example only registers the custom instruction v-my-directive, and has not yet implemented the specific function. It is introduced in detail below. Various options for custom directives.

InstructionDefinition function Provides several hook functions (optional):

bind: only called once, called when the instruction is bound to an element for the first time, use This hook function can define an initialization action that is executed once during binding.

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

update: Called when the VNode of the component is updated, but it may occur in the VNode of its child before updating. The value of the directive may or may not have changed. But you can ignore unnecessary template updates by comparing the values ​​before and after the update (detailed hookfunction parameterssee below).

componentUpdated: Called when all the VNode of the component and its children's VNode are updated.

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

Can be used in different hook functions according to needs Complete the logic code inside, such as v-focus below. We hope to call it when the element is inserted into the parent node. The best one to use is inserted.

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to delete the style generated after the link is clicked

How to use the class attribute in JS

js code case - calculate the day of the week based on the date

The above is the detailed content of How to use Vue's custom directive to complete a drop-down menu. For more information, please follow other related articles on the PHP Chinese website!