How to implement custom directives in Vue?

This article mainly introduces the usage of Vue’s native instructions and custom instructions. Friends in need can refer to

1. Native instructions

When I started learning Vue, I saw the word "instruction" when I looked at the official website. I was stunned, what? What is the instruction? Later, as we read on, "v-for", "v-show" and "v-if" like this are called instructions. Later, when I was almost done playing with Vue, when I started writing projects, I found that there were only a few common instructions, such as "v-if" "v-show" "v-model" "v-for" "v -bind” “v-on”.

You can think of this as syntax sugar or as a command. Among these common instructions, the general usage method is as follows:

1.v-text: string Usage: To update the textContent of the element, update the textContent of the part, you need to use {{Mustache}} interpolation.

2.v-show: any Usage: Switch the display css attribute of the element based on the true or false value of the expression.

3.v-if: any Usage: Render elements based on the true and false conditions of the expression. The element and its data bindings/components are destroyed and recreated on switch. If it is

4.v-for :Array | Object | number | string Usage: Render elements or template blocks multiple times based on source data Syntax: alias in expression.

5.v-on: Function | Inline Statement parameter $event(required) modifier.

6.v-bind: any Type: any (with argument) | Object (without argument) Parameter: attrOrProp (optional) ; Modifier: .prop --- is used to bind DOM attributes;. camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) Usage: Support other types of values when binding class and style attributes. Such as objects and arrays; when binding props, subcomponents must declare props.

7.v-model: Limitcomponents.2. Custom instructionsHowever, relying on the above alone is sometimes not enough, such as a recent project our company did , the UI makes a page. Then when the UI and I were discussing the requirements, I said it would be best to add an effect to this input box. When the input box pops up, it will gain focus and display a jumping cursor. This way the user can more clearly see where to type.After reaching a consensus, when writing the function, I suddenly realized, WTF? I'm using Vue, a data-driven view, so I can'tdocument.getElementById(inputid).focus().Ever since, I went to find the document, and suddenly I found a word directive. I checked the meaning of this word:I took a look The general meaning of the document is that although the v-model and v-show are already very easy to use, they cannot stop the unscrupulous front-end personnel from doing the crazy operations. Therefore, in some cases, it is necessary to perform low-level processing on ordinary DOM elements. Operation, custom instructions will be used at this time. Of course, the official example was what I needed, and I immediately gained a wave of new knowledge.Just like this HTML I wrote down casually, there is a v-focus in it. I have probably never seen it before. What is it? Don’t worry, keep reading:That’s right, this v-focus is a command I defined myself. Of course, you can also use other than keywords. Words to name, convenient and free.Let’s take a look at this custom instruction. I believe everyone understands the following part. It is nothing more than that if the value of value is equal to true, then el will focus and gain focus.What does the previous update mean? update means update, this is a hook function, that is, function is called when focusState is updated. When calling the function, continue to judge focusState - if true, get the focus; if false, go ahead and cool off. Similarly, when we check the official documentation, we will find that the same hook functions are:•bind: only called once, called when the instruction is bound to the element for the first time. One-time initialization settings can be performed here.•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 is updated, but may occur before its child VNode is updated. 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.•componentUpdated: Called after all the VNode of the component where the instruction is located and its sub-VNodes have been updated.•unbind: Called only once, when the instruction is unbound from the element.Using these operations, we can complete many more cool routines. For example, when loading a large image, we can first use a solid color placeholder, and then render it directly after the image is loaded. For example, the picture below:In this example, the hook function we call is inserted, which is triggered after inserting the parent node. When the image has not been loaded, first replace it with a random color. After the image is loaded, remove the background color and replace it with the image.The parameters we pass in here are el----the current dom node and binding-----an object, including the following attributes:•def: hook function.•rawName: The name of the instruction.•value: The value passed to the commandThe above is what I compiled for everyone. I hope it will be helpful to everyone in the future.Related articles:How to create an automatic website building project with vue (detailed tutorial)How to implement a node express personalized chat room?How to load the five-level regions across the country after clicking in the zTree tree plug-inThe above is the detailed content of How to implement custom directives in Vue?. For more information, please follow other related articles on the PHP Chinese website!Related labels：vue custom directivesource：php.cnPrevious article：How to implement the exchange method of two variable values in JSNext article：How to modify the style of subcomponent through parent component in vueStatement of this WebsiteThe content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cnLatest Articles by AuthorProblems with pop-up windows not being centered in weebox2018-06-23 18:19:43How to use excel-like components in vue+canvas2018-06-23 18:17:39How to call class in JavaScript2018-06-23 18:11:37How to implement pull-up refresh function using Vue framework2018-06-23 18:10:14How to implement image cropping component using Vue mobile terminal2018-06-23 18:06:43About WeChat mini program templates and modular usage (detailed tutorial)2018-06-23 18:04:28How to implement pull-up loading function in vue22018-06-23 18:02:45How to implement three-level linkage using Vue22018-06-23 18:00:45How to implement data request display loading graph in vue22018-06-23 17:58:23How to set up and monitor using element full screen2018-06-23 17:56:41Latest IssuesAdding Vue directives to elements programmatically: a step-by-step guide to v-ifWe can programmatically add custom attributes to elements using pure JS, like element.attr...From 2023-09-07 13:54:5401292vue.js - A project developed by vue. I want to automatically focus the input when the page is opened. I use the official custom instructions, but the test on the real iOS machine is invalid.{code...} {code...}From 2017-07-06 10:36:42032482javascript - Error when running the command of vue source codeAs shown in the picture:From 2017-07-05 10:57:3803565javascript - Is Vue's dependency tracking one-way data binding or two-way binding?As mentioned in the official website documentation, Vue’s v-model directive implements two...From 2017-07-05 10:53:3601605javascript - Problems encountered when traversing arrays with Vue's v-for instructionI traversed like this: But the browser gave this error: It said [index] could not be found...From 2017-06-14 10:54:4304570Related TopicsMore>Apple mobile phone antivirusHow to change pycharm to Chinesefloat usage in cssWhat is Bitcoin? Is it legal? Is it a scam?What caching mechanisms does php have?How the temperature sensor worksvivox100s parameter configuration detailsHow to solve too many loginsPopular Recommendationswhat does js meanHow to convert string to array in js?How to refresh the page using javascriptHow to delete an item in js arrayHow to use sqrt functionPopular TutorialsMore>Related TutorialsPopular RecommendationsLatest coursesThe latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1395779PHP introductory tutorial one: Learn PHP in one week4208219JAVA Beginner's Video Tutorial2358172Little Turtle's zero-based introduction to learning Python video tutorial493739PHP zero-based introductory tutorial827188The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)1395779 times of learningJAVA Beginner's Video Tutorial2358172 times of learningLittle Turtle's zero-based introduction to learning Python video tutorial493739 times of learningQuick introduction to web front-end development213570 times of learningMaster PS video tutorials from scratch844893 times of learning[Web front-end] Node.js quick start3303 times of learningComplete collection of foreign web development full-stack courses2647 times of learningGo language practical GraphQL2092 times of learning550W fan master learns JavaScript from scratch step by step476 times of learningPython master Mosh, a beginner with zero basic knowledge can get started in 6 hours11460 times of learningLatest DownloadsMore>Web EffectsWebsite Source CodeWebsite MaterialsFront End Template[form button] jQuery enterprise message form contact code[Player special effects] HTML5 MP3 music box playback effects[Menu navigation] HTML5 cool particle animation navigation menu special effects[form button] jQuery visual form drag and drop editing code[Player special effects] VUE.JS imitation Kugou music player code[html5 special effects] Classic html5 pushing box game[Picture special effects] jQuery scrolling to add or reduce image effects[Photo album effects] CSS3 personal album cover hover zoom effect[Front-end template] Home Decor Cleaning and Repair Service Company Website Template[Front-end template] Fresh color personal resume guide page template[Front-end template] Designer Creative Job Resume Web Template[Front-end template] Modern engineering construction company website template[Front-end template] Responsive HTML5 template for educational service institutions[Front-end template] Online e-book store mall website template[Front-end template] IT technology solves Internet company website template[Front-end template] Purple style foreign exchange trading service website template[PNG material] Cute summer elements vector material (EPS PNG)[PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)[banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)[PNG material] Golden graduation cap vector material (EPS PNG)[PNG material] Black and white style mountain icon vector material (EPS PNG)[PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses[banner picture] Flat style Arbor Day banner vector material (AI+EPS)[PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)[Front-end template] Home Decor Cleaning and Repair Service Company Website Template[Front-end template] Fresh color personal resume guide page template[Front-end template] Designer Creative Job Resume Web Template[Front-end template] Modern engineering construction company website template[Front-end template] Responsive HTML5 template for educational service institutions[Front-end template] Online e-book store mall website template[Front-end template] IT technology solves Internet company website template[Front-end template] Purple style foreign exchange trading service website templateAbout usDisclaimerSitemapphp.cn：Public welfare online PHP training，Help PHP learners grow quickly！