How to develop custom directives in vue

This article mainly introduces the relevant information of vue custom instruction directive. The following is an introduction to you through examples. Friends who need it can refer to it.

The following is an introduction to vue customization. Instruction directive, the specific content is as follows:

##Official website screenshot example

vue In addition to some core internally defined instructions (

v-model, v-if, v-for, v-show), vue also allows users to register some of their own functional instructions. Sometimes you really want to operate the Dom. At this time, it is automatic It is most appropriate to define instructions.

Let’s look at the example directly: when the page is loaded, the element gets focus (autofocus is not supported in the mobile version of Safari), that is, when the page is loaded, the form automatically gets focus and the cursor does not do any operations. The code automatically on a form is as follows:

Vue.directive('zsqfocus', { // 注册一个全局自定义指令 `v-zsqfocus`，在main.js文件里
 inserted: function (el) { // 当被绑定的元素插入到 DOM 中时自动调用
 el.focus() // 聚焦元素
 }
})

If you want to register a local directive, the component also accepts a directives option:

<script>
export default {
 directives: { // 指令的定义
  zsqfocus: {
   inserted: function (el) { // 获得焦点
    el.focus()
   }
  }
  }
 }
</script>

Then you can use the new one on any component in the template The v-zsqfocus attribute is as follows:

<template>
 <input v-zsqfocus /> //调用 
</template>

gives the same example as the official website. Directives, methods, mounted, etc. are at the same level and can be used at the same time.

PS: Let’s take a look at the example code of vue’s custom instruction directive. The specific code is as follows:

<template>
 <p>
  <input v-model="dir1" v-my-directive1="dir1"/>　　　　 <input v-model="dir2" v-my-directive2="dir2"/>
 </p>
</template>
<script>
 export default {
  data(){
   return {　　　　　　　　　dir1:&#39;&#39;,　　　　　　　　　dir2:&#39;&#39;
　　　　　　　}
  },
  directives:{　　　　　　　//直接绑定函数，作用等同于update,不做准备工作和扫尾工作
   myDirective1(val){
    console.log(val)
   },　　　　　　　myDirective2:{　　　　　　　　　　bind(){　　　　　　　　　　　　　//第一次绑定到元素的准备工作　　　　　　　　　　},　　　　　　　　　　update(val，old){　　　　　　　　　　　　//在绑定到元素后立即以初始值第一次调用，然后每次example2变化都会调用update　　　　　　　　　　　　console.log(val)　　　　　　　　　　},　　　　　　　　　　　　unbind(){　　　　　　　　　　　　//销毁前的清理工作　　　　　　　　　　}　　　　　　　}
  }
 }
</script>

The above is what I compiled For everyone, I hope it will be helpful to everyone in the future.

Related articles:

How to implement sliding with fingers in vue

How to compile, package and view index files in vue

How to use Jade template in vue

Passing template to component in Angular

Using Async and Await functions in Node.js

Solving the problem that webpack cannot access 127.0.0.1

In webpack-dev-server Implement remote access configuration method

The above is the detailed content of How to develop custom directives in vue. For more information, please follow other related articles on the PHP Chinese website!