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

This article mainly introduces what the commonly used instructions in Vue have related knowledge, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading the common instructions in this Vue. Let's take a look.

First of all, let's talk about the Vue framework. Vue is a progressive JavaScript framework for building a user interface, which is very friendly for beginners. Vue's virtual Dom and two-way data binding all enable developers to get started quickly, and I personally feel that Vue instructions are very convenient to use. Today's article will talk about commonly used Vue instructions.

V-for

When we first learned any language, we all came into contact with for more or less.

For (let I = 0; I < arr.length; iTunes +) {}

Vue's v-for is the same as the most fundamental concept in our js, that is, a two-word loop.

Item and index in parentheses after v-for are equivalent to arr [I] and I in the for loop, that is, each element and subscript corresponding to it. The arr behind in arr is the last arr of the array we want to loop: key= "item.id" is the core of v-for. If there is no this: key, our Vue will report an error, then why is there Key? what are the parameters to be given by Key? The parameter of Key is unique, that is, no matter how many times we loop, the key of each loop cannot be repeated. Here, we do not recommend using index as your Key. In the final analysis, the function of key is to determine whether the two nodes are the same when updating the component. The same is reused, and if different, delete the old and create the new. When rendering simple stateless components, if you do not add key components, they will be reused locally by default, and the added nodes will not be deleted, but only the text values in the list items will be changed. You should know that node operation is very performance-consuming. After adding key, when the comparison content is inconsistent, it will be regarded as two nodes, and the old node will be deleted first, and then the new node will be added.

{{item.name}} v-show

V-show renders according to Boolean values. True displays the page, but false does not. Its principle is to control the css style to make our corresponding components or boxes show, hide dispaly: "none", and show dispaly: "block".

I dispaly: "block" pull me dispaly: "none" pull / / pretend I'm hidden you can't see me v-if

V-if also renders according to Boolean values, which is similar to v-show. True displays the page, false does not display on the page, but v-if is lazy. If the initial value is a false component, it will not render until the first time its parameter changes to true. However, when his condition becomes false again, the subcomponents will be destroyed and rebuilt if appropriate. If you need to switch very frequently, it is better to use v-show. If conditions rarely change at run time, it is better to use v-if.

I was destroyed. / pretend I'm hidden. You can't see me, v-else.

When it comes to v-if, we also talk about that v-else will go directly to v-else when the v-if condition is not established. Remember that v-else cannot be followed by an equal sign. Components must be followed by v-if.

You can't see me / / because I'm not qualified, you can see me, v-else-if.

When it comes to v-if and v-else, you will also think that when the v-if condition is not established, v-else-if will go directly to the v-else-if to judge whether the condition is true, render the component if the condition is established, and follow the v-if before the component.

Awesome

Almost

V-once

The function of v-once is to define that its elements or components will only be rendered once, and after the first rendering, it will not be re-rendered with the update of the data, which is equivalent to a static content.

{{count}} you click count without adding export default {data () {return {count: 10}}, methods: {addCount: function () {this.count + = 1; console.log ('this.count:'+this.count);} v-text

V-text inserts data in the form of text. It is used to manipulate plain text. It will replace the contents of its own elements. If the data is updated, it will also change.

Hello.

V-html

V-html v-html is used to output html, which differs from v-text in that v-text outputs plain text, and browsers will no longer parse it for html, but v-html will output it as html tags are parsed

Awesome

The page shows:

Hello

/ / there will still be a p tag to wrap data: Hello, v-on.

An easy way to write v-on is "@". To put it simply, v-on is a binding event. You can bind multiple events in a tag. V-on: the first is the event, followed by a custom method.

Click mev-bind

V-bind also has a simple way to write ":" to put it simply, v-on is used to bind data and element attributes, and the most common method is to bind class dynamically.

V-model

V-model is a Vue bi-directional binding instruction, which can change the binding data property when the page is input, and also update the page state when the data property changes. We can often find it on input. It is actually bound in nature. V-model can be used with modifiers such as .marker, .trim and .number.

Change the real-time update of input to a change event, which will be triggered only when the input is out of focus

.trim removes spaces from the beginning and end of a string

.number converts data to a value type

This is the end of the article on "what are the common instructions in Vue?" Thank you for reading! I believe you all have a certain understanding of the knowledge of "what are the common instructions in Vue". If you want to learn more, you are welcome to follow the industry information channel.

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.