This article will give you an in-depth discussion of some common instructions in Vue. I hope it will be helpful to you.

First let’s talk about theVueframework.Vueis a progressive JavaScript framework for building user interfaces. It is very friendly to beginners. Vue’s virtual Dom and two-way data binding allow developers to get started quickly. I personally feel that theVueinstructions are very convenient to use. Today’s In this article, let’s talk about the commonly usedVueinstructions!

v-for

When we first learn any language, we have more or less come into contact withfor

for (let i = 0; i < arr.length; i++) { }

Vue’s v-for The most fundamental concept in our js is still the same as the two wordsloop

v-for in the brackets behinditemandindexIt is equivalent toarr[i]andiin the for loop, which is the correspondingelementandsubscript, followed byin arrThisarris the last:key="item.id" of the array we want to loop. It is the core of v-for. Without this:key we Vue will report an error, so why is there Key, and what are the parameters for Key? The parameter of Key is unique, that is, no matter how many times we loop, the key of each loop cannot be repeated. We do not recommend using index as your Key here. After all, the function of key is to judge two nodes when updating components. Are they the same. If they are the same, reuse them; if they are not the same, delete the old ones and create new ones. When rendering a simple stateless component, if you do not add a key component, it will be reused in place by default. The added node will not be deleted, but the text value in the list item will be changed. You must know that node operations are very performance-intensive. After adding the key, when the comparison content is inconsistent, it will be considered to be two nodes, the old node will be deleted first, and then the new node will be added.

 {{ item.name }} 

v-show

v-showis rendered based on a Boolean value,trueis displayed on the page,falseIt is not displayed on the page. Its principle is actually to control the css style to make our corresponding component or box display. Hidedispaly:"none"and displaydispaly:"block"

 我 dispaly:"block" 拉 
 
 我 dispaly:"none" 拉 
 //假装我隐藏了 你看不见我

v-if

v-ifis also rendered based on Boolean values, which is similar tov-show,trueAs long as the page is displayed,falsewill not be displayed on the page butv-ifis lazy. If the initial value isfalse, the component will not be rendered until the first Once its parameters becometrue, it will render, but when its condition becomesfalse, the subcomponent will be destroyed and rebuilt appropriately, if necessary. If you switch very frequently, it is better to usev-show; if the conditions rarely change during runtime, it is better to usev-if.

 
 
 我被销毁了呜呜呜 
 //假装我隐藏了 你看不见我

v-else

mentionedv-ifand also talked aboutv-elseinv-ifWhen the condition is not established, it will go directly tov-else. Remember thatv-elsecannot be followed by an equal sign, and the component must be preceded byv-if##.#

 你看不到我啊 
 //因为我条件不成立 
 你能看到我 

v-else-if

Mention

v-ifandv-elseand also think ofv- else-ifWhen thev-ifcondition is not established, it will go directly tov-else-ifto see whether the condition is established or not. If the condition is established, the component will be rendered. The component It must be preceded byv-if

厉害
 
差不多

v-once

v-onceIts function is to define its element or component only Rendering once, after the first rendering, it will not be re-rendered as the data is updated, which is equivalent to a static content

v-text

v- textInsert data in the form of text, which is used to operate plain text. It will replace the content on the element itself. If the data is updated, the attempt will also change

 你好你好 

v-html

v-htmlv-html is used to output html. The difference between it and v-text is that v-text outputs plain text, and the browser will not parse it as html, but v-html will parse it as an html tag and output it

厉害
 页面显示：
 
你好啊
 
 // 外层还是会有p标签来包裹 data:
你好啊

v-on

v-onThere is a simple way to write it: "@"Simply speaking,v-onis a binding event. You can bind multiple events to a label.v-on: The first one is an event, and the event is followed by a self Define method

click me

v-bind

v-bind也有一个简便的写法就是":" 简单来说v-on就是用于绑定数据和元素属性 ， 最常用的方法就是用于动态绑定class

v-model

v-model是Vue双向绑定指令 ， 它可以在页面是输入的状态同时改变绑定data属性 ， 也会在data属性发生改变的时候也更新页面的状态 ， 我们经常在input上面能发现他的存在 ， 他的本质上其实是绑定了7a3f9db32469ed541a9a9f23cd4ac481，v-model后面可以跟修饰符比如.lazy、.trim和.number这些修饰符一起使用

.lazy将input的实时更新改为一个change事件 ， 只有失焦的时候input才会触发事件

.trim去除字符串首尾的空格

.number将数据转化为值类型

【相关推荐：vue.js教程】

The above is the detailed content of Let’s talk in depth about some common instructions in Vue. For more information, please follow other related articles on the PHP Chinese website!