Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to use the v-instruction in Vue". In the daily operation, I believe that many people have doubts about how to use the v-instruction in Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use the v-instruction in Vue". Next, please follow the editor to study!

V-instruction 1, v-html instruction commonly used in Vue.js

The v-html directive is used to output html code, as follows:

/ / templatePack is the html code path

2. V-text instruction

The v-text instruction is used to output text, as shown below:

/ / output the value of cell.value 3, v-once instruction

By using the v-once instruction to interpolate at once, when the data changes, the contents of the interpolation will not be updated, as shown below:

The value of {{msg}} / / msg remains unchanged 4. V-if instruction

The v-if instruction is to implement conditional rendering, insert or remove elements (true insert, false removal), as shown in the following figure:

The v-else directive ensures that the peer node has v-if | | v-else-if, which is used with v-if and must be immediately followed by v-if or v-else-if, otherwise it will not work, as shown in the figure below:

Note: v-if and v-else only cannot coexist, only one of them can exist.

V-else-if instruction is the else-if block that acts as v-if, which can be used many times in chain, and it is more convenient to realize the function of switch statement in the tag.

5. V-show instruction

The v-show directive is used to hide or show elements, as shown below:

/ / judge whether to display 6 or v-on instructions according to the Bool value of httpLoading

The v-on directive is used for event binding, which can be replaced by @, as shown below:

/ / bind click events to the div tag and use @ instead of v-on

7. V-for instruction

The v-for instruction implements the loop syntax, that is, the function of the for loop, as shown below:

8. V-bind instruction

The v-bind instruction is used to implement property binding, which can be abbreviated as follows:

/ / v-bind is not abbreviated

/ / v-bind abbreviation 9, v-model instruction

The v-model instruction is used to implement two-way data binding, as shown below:

V-instruction 1, v-pre instruction which are not commonly used in Vue.js

The v-pre instruction is used not to parse data, as shown below:

{{hello world}} / / display effect: {{hello world}} 2, v-cloak instruction

The v-cloak instruction is: before vue parsing, v-cloak exists on the page; when vue parsing is complete, v-cloak disappears. It can solve the problem of flickering of interpolation expressions, as shown below:

/ / css style [v-cloak] {display:none; color:red;}.... Loading... III. Custom instructions of Vue.js

In addition to the above core functions default built-in directives, Vue.js also allows you to register custom directives. In Vue2.0, the main form of code reuse and abstraction is components, but in some cases, you still need to perform low-level operations on ordinary DOM elements, and custom instructions are used.

1. Custom v-focus directive

Scene: let the input box get focus when the page is loaded.

As long as you haven't clicked anything after opening the page, the input box should still be in focus. Here, the v-focus directive is used to implement this requirement, as shown below:

/ / register the global custom directive `v-focus` Vue.directive ('focus', {/ / when the bound element is about to be inserted into the DOM, inserted: function (el) {/ / focus on the corresponding element el.focus ();}}); / / use the above custom directive 2, the custom object literal instruction where the input box is used

Scenario: if the instruction needs to have more than one value, you can pass in a literal amount of the JavaScript object, but the instruction function can accept all valid JavaScript expressions. The specific use is as follows:

Vue.directive ('demo', function (el, binding) {/ / console.log (binding.value.color); / / output result "red" console.log (binding.value.text); / / output result "hello world!"}); at this point, the study on "how to use the v-instruction in Vue" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.