Parlons en profondeur de quelques instructions courantes dans Vue

Cet article vous donnera une discussion approfondie de certaines instructions courantes dans Vue. J'espère qu'il vous sera utile.

Parlons d'abord du framework Vue Vue est un framework JavaScript progressif pour la création d'interfaces utilisateur. Il est très convivial pour les débutants. Le Dom virtuel et la liaison de données bidirectionnelle permettent aux développeurs d'obtenir. a commencé rapidement, et je pense personnellement que les commandes Vue sont très pratiques à utiliser. Dans l'article d'aujourd'hui, parlons des commandes Vue couramment utilisées !

v-for

Lorsque nous apprenons une langue pour la première fois, nous sommes plus ou moins entrés en contact avec for

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

}

Le v-for de Vue est toujours le même que le concept le plus basique de notre js, juste deux mots Loop

v-for Les item et index entre parenthèses après la boucle for sont équivalents aux arr[i] et i dans la boucle for, c'est-à-dire correspondant à chaque élément et subscript , derrière Le in arr Ce arr est le dernier du tableau que nous voulons boucler :key="item.id" est le noyau de v-for Sans this:key notre Vue. signalera une erreur, alors pourquoi y a-t-il Key, quels sont les paramètres à donner par Key ? Le paramètre de Key est unique, c'est-à-dire que peu importe le nombre de fois que nous effectuons une boucle, la clé de chaque boucle ne peut pas être répétée. Nous ne recommandons pas d'utiliser index comme clé ici. Après tout, la fonction de key est de juger deux nœuds. lors de la mise à jour des composants. Sont-ils identiques. S'ils sont identiques, réutilisez-les ; s'ils ne sont pas identiques, supprimez les anciens et créez-en de nouveaux. Lors du rendu de composants simples sans état, si vous n'ajoutez pas de composant clé, il sera réutilisé sur place par défaut. Le nœud ajouté ne sera pas supprimé, mais la valeur du texte dans l'élément de liste sera modifiée. sont très gourmands en performances. Après avoir ajouté la clé, lorsque le contenu de la comparaison est incohérent, il sera considéré comme deux nœuds, l'ancien nœud sera d'abord supprimé, puis le nouveau nœud sera ajouté.

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

v-show

v-show est rendu en fonction d'une valeur booléenne, true est affiché sur la page, false n'est pas affiché sur la page, son principe est en fait de contrôler le style css pour créer nos composants correspondants Ou la boîte est affichée ou masquée dispaly:"none" ，显示dispaly:"block"

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

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

v-if

v-if est également rendue en fonction des valeurs booléennes, ce qui est similaire à v-show sera affiché. sur la page, et false ne sera pas affiché sur la page. Mais v-if est paresseux si la valeur initiale est false, le composant ne sera pas rendu avant la première fois. Le paramètre devient true, mais sa condition redevient false, le sous-composant sera détruit et reconstruit selon le cas. Si vous devez changer très fréquemment, il est préférable d'utiliser v-show si les conditions changent rarement. pendant l'exécution, il est préférable d'utiliser v-if .

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

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

v-else

a mentionné

v-if

et a également parlé de v-else Lorsque la condition v-if n'est pas remplie, il ira directement à v-else, souviens-toiv - else ne peut pas être suivi d'un signe égal. Le composant doit être précédé de v-if

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

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

v-else-if

Mentionné

v-if

et v-else viendront également à l'esprit . v- else-if Lorsque la condition v-if n'est pas établie, elle ira directement à v-else-if pour voir si la condition est établie. Si la condition est établie, le composant sera rendu. Le composant doit être précédé de v-if

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

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

v-once

v-once

Sa fonction est que l'élément ou le composant qui le définit ne sera rendu qu'une seule fois. Après le premier rendu, il ne le sera pas. restitué au fur et à mesure que les données sont mises à jour, ce qui équivaut à Un contenu statique

<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

v-text

insère des données sous forme de texte, qui est utilisé pour faire fonctionner du texte brut Il remplacera le contenu. sur l'élément lui-même. Si les données sont mises à jour, cela se produira également. Changement

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

v-html

v-html

v-html est utilisé pour générer du HTML. La différence entre celui-ci et v-text est que v. -text génère du texte brut, et le navigateur ne l'analysera pas comme du HTML, mais v-html l'analysera comme une balise html et le produira

<p v-html="data">厉害</p>


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



data:<h1>你好啊<h1>

v-on

v-on

Une façon simple de l'écrire est " @ " En termes simples, v-on est un événement de liaison, vous pouvez lier plusieurs événements à une étiquette, v-on : le premier est l'événement, et l'événement est suivi d'une méthode personnalisée

 <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教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!