SoFunction
Updated on 2025-04-05

Introduction to Vue custom directives and basic usage examples

Custom commands

1. Instruction introduction

  • Built-in commands:v-html、v-if、v-bind、v-on… These are some built-in instructions for us by Vue, which can be used directly
  • Custom directives: Vue also supports letting developers register some directives by themselves. These instructions are calledCustom commands

Each command has its own independent functions

2. Custom commands

Concept: The command you define yourself, you canEncapsulate some DOM operations, extending additional features

3. Custom instruction syntax

Global registration

//In('Instruction Name', {
  "inserted" (el) {
    // Can extend additional functions to the el tag    ()
  }
})

Local registration

//In the configuration items of Vue componentsdirectives: {
  "Instruction Name": {
    inserted () {
      // Can extend additional functions to the el tag      ()
    }
  }
}

User command

Note: When using the command, you mustRegister first，Use again, otherwise an error will be reported
Use instruction syntax: v-directive name. like:

registerWhen instructingNeed notaddv-Prefix,butWhen usingMust beAdd v-prefix

4. Introduction to configuration items in the command

inserted: The hook function called when the bound element is inserted into the parent node

el: The DOM element that uses the instruction

5. Code Example

Requirements: When the page loads, let the element get focus (autofocus is compatible with safari browser）

<template>
  <div>
    <h1>Custom commands</h1>
    <input v-focus ref="inp" type="text">
  </div>
</template>
<script>
export default {
  // mounted () {
  //   this.$()
  // }
  // 2. Local registration instructions  directives: {
    // Instruction name: The configuration item of the command    focus: {
      inserted (el) {
        ()
      }
    }
  }
}
</script>
<style>
</style>

import Vue from 'vue'
import App from './'
 = false
// // 1. Global registration instruction// ('focus', {
// // inserted will trigger when the element where the directive is located is inserted into the page//   inserted (el) {
// // el is the element bound to the instruction//     // (el);
//     ()
//   }
// })
new Vue({
  render: h => h(App),
}).$mount('#app')

Custom directive - the value of the directive

1. Requirements

Implement a color directive - pass in different colors and set text color to the label

2. Syntax

1. When binding an instruction, the instruction can be bound to the specific parameter value in the form of an "equal sign".

<div v-color="color">I'm content</div>

2. You can get the command value throughThe command value modification will trigger the update function

directives: {
  color: {
    inserted (el, binding) {
       = 
    },
    update (el, binding) {
       = 
    }
  }
}

3. Code examples

<template>
  <div>
    <h1 v-color="color1">The value of the instruction1test</h1>
    <h1 v-color="color2">The value of the instruction2test</h1>
  </div>
</template>
<script>
export default {
  data () {
    return {
      color1: 'red',
      color2: 'orange'
    }
  },
  directives: {
    color: {
      // 1. inserted provides the logic when an element is added to the page      inserted (el, binding) {
        // (el, );
        // It is the value of the command         = 
      },
      // 2. The update instruction is triggered when the value of the update instruction is modified, and the logic to update the dom after the value changes is provided.      update (el, binding) {
        ('The value of the instruction has been modified');
         = 
      }
    }
  }
}
</script>
<style>
</style>

import Vue from 'vue'
import App from './'
 = false
new Vue({
  render: h => h(App),
}).$mount('#app')

Custom directive - encapsulation of v-loading directive

1. Scene

During the actual development process, it takes time to send a request. When the requested data does not come back, the page will be inBlank status=> Poor user experience

2. Requirements

Encapsulate a v-loading instruction to achieve loading effects

3. Analysis

1. Essence The loading effect is a mask, covered on the box

2. In the data request, turn on loading status and add mask

3. After the data request is completed, close the loading state and remove the mask

4. Implementation

1. Prepare a loading class, set the width and height through pseudo-element positioning, and realize the masking layer

2. Turn on and close loading state (add the removal mask), the essence is just to add the removal class.

3. Encapsulation and reuse in combination with the syntax of custom instructions

.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url("./") no-repeat center;
}

5. Prepare the code

<template>
  <div class="main">
    <div class="box" v-loading="isLoading">
      <ul>
        <li v-for="item in list" :key="" class="news">
          <div class="left">
            <div class="title">{{  }}</div>
            <div class="info">
              <span>{{  }}</span>
              <span>{{  }}</span>
            </div>
          </div>
          <div class="right">
            <img :src="" alt="">
          </div>
        </li>
      </ul>
    </div>
    <div class="box2" v-loading="isLoading2"></div>
  </div>
</template>
<script>
// Install axios => yarn add axiosimport axios from 'axios'
// Interface address: /api/news// Request method: getexport default {
  data () {
    return {
      list: [],
      isLoading: true,
      isLoading2: true
    }
  },
  async created () {
    // 1. Send a request to obtain data    const res = await ('/api/news')
    setTimeout(() => {
      // 2. Update to list for page rendering v-for       = 
       = false
    }, 2000)
  },
  directives: {
    loading: {
      inserted (el, binding) {
         ? ('loading') : ('loading')
      },
      update (el, binding) {
         ? ('loading') : ('loading')
      }
    }
  }
}
</script>
<style>
.loading:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff url('./') no-repeat center;
}
.box2 {
  width: 400px;
  height: 400px;
  border: 2px solid #000;
  position: relative;
}
.box {
  width: 800px;
  min-height: 500px;
  border: 3px solid orange;
  border-radius: 5px;
  position: relative;
}
.news {
  display: flex;
  height: 120px;
  width: 600px;
  margin: 0 auto;
  padding: 20px 0;
  cursor: pointer;
}
.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news .left .title {
  font-size: 20px;
}
.news .left .info {
  color: #999999;
}
.news .left .info span {
  margin-right: 20px;
}
.news .right {
  width: 160px;
  height: 120px;
}
.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

This is the end of this article about the introduction and basic use of Vue custom commands. For more related contents of Vue custom commands, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!