Analyse de la syntaxe du modèle de Vue, des propriétés calculées et des écouteurs

Le contenu partagé dans cet article concerne l'analyse de la syntaxe des modèles de Vue, des propriétés calculées et des écouteurs. Les amis dans le besoin peuvent s'y référer.

ModèleSyntaxe, CalculPropriétés et auditeurs

Objectifs :

1 Maîtriser l'utilisation de la syntaxe des modèles de vue

utilisation des propriétés calculées et de l'écouteur et les scénarios d'application

Syntaxe du modèle

<div id="app">
<!-- 以下说绑定的值都可以写成js表达式形式 -->
<!-- {{}}: 双大括弧语法 -->
<!-- 如果不想让它响应更新,可以添加v-once指令(只渲染一次) -->
<p>
first: {{firstName}}<br>
last: {{lastName}}<br>
{{firstName + &#39; &#39; + lastName}}
</p>
<!-- 以下的绑定都会优先显示,也就是原本标签之间的值的会无效 -->
<!-- 使用v-html: html会被解析 -->
<p v-html="test"></p>
<!-- 使用v-text: html不会被解析,直接以文本输出 -->
<p v-text="test">123</p>
 
<!-- 标签属性绑定v-bind, 简写":" -->
<img v-bind:height="imgHeight" :width="imgWidth" style="border: 1px solid #000"></img>
</div>
 
<script>
var vm = new Vue({
el: &#39;#app&#39;,
data: {
firstName: &#39;Chi&#39;,
lastName: &#39;Chan&#39;,
test: &#39;<h1>哈哈哈<h1>&#39;,
imgHeight: &#39;200px&#39;,
imgWidth: 200
}
})
</script>

2. Attribut calculé (calculé)

Les propriétés et méthodes calculées sont différentes, Les propriétés calculées sont mises en cache en fonction de leurs dépendances,, Lorsque le les variables pertinentes du changement d'attribut calculé, le calcul sera recalculé, Sinon, les résultats du calcul précédent seront lus directement à partir du cache.( Cela peut réduire la consommation de performances)

Les propriétés calculées incluent getter et setter, Vous pouvez définir séparément les fonctions qui seront exécutées lors de la définition et de l'obtention de la valeur.

Écouteur( regarder)

Si nous n'avons besoin d'écouter qu'une seule donnée,ou d'effectuer certaines opérations lorsqu'une donnée change( Pour modifier plusieurs données), et ces modifications peuvent ne pas avoir de dépendances sur ces données, Ensuite, vous pouvez utiliser l'écouteur de détection .

Listener , peut écouter les changements dans une donnée ,Puis effectuer les opérations correspondantes .

4. Scénarios d'utilisation

est bonne à gérer : une donnée affecte plusieurs données ( Un changement)2. calculé
est bon pour traiter les scénarios : une donnée est affectée par plusieurs données ( Modifications multiples,Renvoie finalement une donnée)

Relativement courante, besoin de déclencher activement, peut également rendre le code compliqué,Et si , utilisez la méthode dans les scénarios ci-dessus, il y aura une plus grande consommation de performances.

Recommandations associées :

cycle de vie vue, instance vue, syntaxe du modèle

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!