How to develop custom directives in vue-JS Tutorial-php.cn

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() // 聚焦元素 } })

Copy after login

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

Copy after login

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

Copy after login

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:

Copy after login

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

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!