Let's talk in depth about some common instructions in Vue

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 the Vue framework. Vue is 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 the Vue instructions are very convenient to use. Today’s In this article, let’s talk about the commonly used Vue instructions!

v-for

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

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 words loop

v-for in the brackets behind item and index It is equivalent to arr[i] and i in the for loop, which is the corresponding element and subscript, followed by in arr This arr is 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.

<li v-for="(item,index) in arr" :key="item.id">
     {{ item.name }}
</li>

v-show

v-show is rendered based on a Boolean value, true is displayed on the page, false It is not displayed on the page. Its principle is actually to control the css style to make our corresponding component or box display. Hide dispaly:"none" and display dispaly:"block"

<div v-show="true"> 我 dispaly:"block" 拉 </div>

<div v-show="false"> 我 dispaly:"none" 拉 </div> //假装我隐藏了 你看不见我

v-if

v-if is also rendered based on Boolean values, which is similar to v-show, true As long as the page is displayed, false will not be displayed on the page but v-if is lazy. If the initial value is false, the component will not be rendered until the first Once its parameters become true, it will render, but when its condition becomes false, the subcomponent will be destroyed and rebuilt appropriately, if necessary. If you switch very frequently, it is better to use v-show; if the conditions rarely change during runtime, it is better to use v-if.

<div v-if="true">  </div>

<div v-if="false"> 我被销毁了呜呜呜 </div> //假装我隐藏了 你看不见我

v-else

mentioned v-if and also talked about v-else in v-if When the condition is not established, it will go directly to v-else. Remember that v-else cannot be followed by an equal sign, and the component must be preceded by v-if##. #

<div v-if="false"> 你看不到我啊  </div> //因为我条件不成立

<div v-else> 你能看到我 </div>

v-if and v-else and also think of v- else-if When the v-if condition is not established, it will go directly to v-else-if to see whether the condition is established or not. If the condition is established, the component will be rendered. The component It must be preceded by v-if

<p v-if="score>=90">厉害</p>

<p v-else-if="score>=60">差不多</p>

v-once Its 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

<template>
    <div v-once>{{count}}</div>
    <button v-on:click="addCount"> 你点我count也不加 </button>
</template>



<script>
    export default {
        data() {
            return { count: 10 } 
        },
        methods: { 
        addCount: function () {
            this.count += 1;
            console.log(&#39;this.count:&#39;+this.count); 
            } 
        }
    }
</script>

v- text Insert 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

<p v-text="data"> 你好你好 </p>

v-html v-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 v-html="data">厉害</p>


页面显示：<p>
            <h1>你好啊<h1>
        </p> // 外层还是会有p标签来包裹



data:<h1>你好啊<h1>

v-on There is a simple way to write it: " @ "Simply speaking, v-on is 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

 <button v-on:mouseenter=&#39;onenter&#39; @click=&#39;leave&#39;>click me</button>

v-bind

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

 <ul  :class="classObject"></ul>

v-model

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

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

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

.number 将数据转化为值类型

<input v-model="test">

<input v-model.lazy="msg" >

<input v-model.trim="msg">

<input v-model.number="age" type="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!