Une introduction détaillée à la syntaxe de modèle commune dans Vue.js

Cet article présente principalement l'explication détaillée de la syntaxe commune du modèle des notes d'étude de Vue.js. L'éditeur pense qu'elle est assez bonne, je vais donc la partager avec vous maintenant et la donner comme référence. Venez jeter un œil avec l'éditeur

Cet article présente la syntaxe de modèle commune de Vue.js et la partage avec tout le monde. Les détails sont les suivants :

1. . Rendu du texte

Vue prend en charge le rendu dynamique du texte, c'est-à-dire le rendu du contenu du texte en temps réel tout en modifiant les attributs. Dans le même temps, afin d'améliorer l'efficacité du rendu, il est également pris en charge le rendu une seule fois, c'est-à-dire qu'après le premier rendu du texte, le contenu du texte ne changera plus avec le changement de la valeur de l'attribut.

Rendu en temps réel

 <p class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </p>

La directive v-model lie dynamiquement la valeur de la balise d'entrée à l'attribut msg , affiché sur la page via l'expression {{ msg }}. Lorsque le contenu de la zone de texte est modifié, le contenu des pages suivantes changera en temps réel et restera cohérent avec le contenu de la zone de texte.

Rendu une fois

 <p class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </p>

Ajouter des attributs à l'objet vm

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

Lorsque la page est chargée pour la première fois, la page s'affiche une fois..., lorsque la balise span est ajoutée avec l'instruction v-once, quelle que soit la manière dont le contenu de la zone de texte est modifié, le contenu de la page Rien ne changera.

Rendu du code HTML

Dans certains cas, la page doit insérer dynamiquement un morceau de code HTML

Ajouter des attributs à l'objet vm, le la valeur de l'attribut est Un morceau de code HTML

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

Après avoir ajouté la directive v-html à l'élément de page, l'élément correspondant

<🎜 dans la valeur de l'attribut sera affichée à la position correspondante de l'élément >

 <p class="row">
  <h2>文本 - HTML</h2>
  <p v-html="html"></p>
 </p>

2. >Comme déjà présenté ci-dessus C'est une expression simple. De plus, il existe quelques expressions couramment utilisées.

Expression d'opération {{ msg }}

Vous pouvez utiliser des opérateurs dans les expressions simples ci-dessus, et Vue rendra le résultat après l'opération sur la page

 <p>
  <h4>运算表达式</h4>
  <span v-pre>{{ Number(number)+ }}：</span>
  <input v-model="number" type="text" />
  <span>运算结果：{{ Number(number)+ }}</span>
 </p>

Entrez un nombre dans la zone de texte et Vue calculera le résultat en temps réel via les opérateurs de l'expression et l'affichera. Étant donné que le contenu de la zone de texte est une chaîne, l'attribut numérique doit être converti en nombre dans l'expression.

Expression d'opérateur ternaire

Vue prend en charge l'utilisation de l'opérateur ternaire dans les expressions

 <p>
  <h4>三元运算表达式</h4>
  <span v-pre>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}：</span><span>{{ ok ? &#39;YES&#39; : &#39;NO&#39; }}</span>
 </p>

Méthode Javascript

Les méthodes de base prises en charge par Javascript peuvent également être utilisées dans les expressions, et Vue exécutera dynamiquement la méthode et affichera le résultat final

 <p>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}：</span><span>{{msg_once.split(&#39;&#39;).reverse().join(&#39;&#39;)}}</span>
</p>

Cet exemple consiste à recombiner les caractères de la valeur de l'attribut msg_once dans l'ordre inverse.

3. Filtres

Les filtres sont souvent utilisés pour formater et afficher le contenu. Vue prend en charge les filtres personnalisés Tout d'abord, ajoutez des méthodes de filtrage dans l'objet

vm

Toutes les méthodes de filtrage doivent être définies dans le

, la première valeur du paramètre de la méthode est le contenu original transmis qui doit être traité, et la valeur de retour de la méthode est le nouveau contenu qui a été traité.

Le filtre personnalisé est utilisé comme suit

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       filter_msg: 'base'
     },
     filters: {
       filter: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter1';
       },
       filter2: function (value) {
         if (!value) {
           return '';
         }
 
         return value + '_filter2';
       },
       filter_arg: function (value, arg1, arg2) {
         if (!value) {
           return '';
         }
 
         return value + ' ' + arg1 + ' ' + arg2;
       }
     }
   });
 });

filters

Dans l'exemple ci-dessus, le filtre passe par le pipeline Le symbole "|" est connecté au contenu qui doit être traité, et la valeur de l'attribut

<p>
  <h4>单一过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 }}：</span><span>{{ filter_msg | filter1 }}</span>
 </p>

est transmise à travers le filtre

, et le contenu est ajouté et affiché.

En même temps, Vue prend également en charge la connexion de plusieurs filtres

filter_msg filter1

Dans cet exemple, via le Le symbole de tuyau "|" peut connecter plusieurs filtres, et la sortie de chaque filtre précédent sera utilisée comme entrée du filtre suivant jusqu'à ce que le résultat final soit affiché.

 <p>
  <h4>串联过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 | filter2 }}：</span><span>{{ filter_msg | filter1 | filter2 }}</span>
 </p>

Lorsque le filtre a plusieurs paramètres, Vue prend également en charge les appels avec des paramètres

四、常用指令

指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。

常用的指令如下：

• v-bind

• v-on

• v-for

• v-if

• v-else-if

• v-else

• v-show

v-bind

该指令用来给元素绑定一个或多个特性

 <p>
  <h>v-bind（属性绑定）</h>
  <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled")：</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/>
  <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled")：</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/>
  <span v-pre>缩写(:disabled="!btn_enabled")：</span><button :disabled="!btn_enabled" type="button">可以点击的按钮</button>
 </p>

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       btn_enabled: true
     }
   });
 });

在上面的例子里，给 vm 对象增加一个名称为 btn_enabled 的布尔属性，在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值

页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。

v-on

该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时，只能监听原生 DOM 事件。在监听原生 DOM 事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个 $event 属性。

在 vm 对象的 methods 属性里添加自定义方法

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     methods: {
       btn_click: function () {
         console.log("button click!");
       },
       btn_clickWithEvent: function($event){
         console.log($event);
       },
       btn_clickWithMsg: function (msg) {
         console.log("Message is:" + msg);
       }
     }
   });
 });

通过属性 v-on:click="btn_click" 在按钮上添加 click 事件

 <p>
  <h4>v-on（事件绑定）</h4>
  <span v-pre>点击事件(v-on:click="btn_click")：</span><button v-on:click="btn_click" type="button">点我！</button><br/>
  <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)")：</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我！</button><br/>
  <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)")：</span><button v-on:click="btn_clickWithMsg(&#39;Hello world!&#39;)" type="button">点我！</button><br/>
  <span v-pre>缩写(@click="btn_click")：</span><button @click="btn_click" type="button">点我！</button>
 </p>

页面效果如下

v-on指令也支持缩写，用@符号代替，比如： @click="btn_click" 。

v-for

该指令用来基于源数据多次渲染元素或模板块。

在 vm 对象里添加一个数组类型的属性 books

 require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入浅出node", "C#本质论", "编程珠玑"]
     }
   });
 });

通过 v-for 指令实现一个简单列表

 <p>
  <h4>v-for（循环）</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </p>

页面效果如下

v-for 属性值是一个 item in expression 结构的表达式，其中 item 代表 expression 运算结果的每一项。最终的HTML代码如下

v-if、v-else-if、v-else

条件渲染指令，通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用，而 v-else-if 、 v-else 必须和 v-if 一起使用。

下面是一个简单用法的例子

 <p>
  <h4>v-if、v-else-if、v-else（分支）</h4>
  <span>分支示例：</span>
  <input type="text" v-model="number" />
  <span v-if="number>10">大于10</span>
  <span v-else-if="number==10">等于10</span>
  <span v-else>小于10</span><br/>
 </p>

页面显示如下

当文本框里输入小于10的数字时，右侧只显示“小于10”的文本内容。

查看源码发现，只有“小于10”的内容的 span 标签存在，另外两个标签被插入到页面中。

同样，在输入大于10的数字时，右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。

v-show

该指令也是条件渲染指令，但是与上述的 v-if 有不同。这可以通过一个例子来说明。

 <p>
  <h4>v-show（条件渲染）</h4>
  <span>v-show示例：</span>
 <input type="text" v-model="number" />
  <span v-show="number>10">大于10</span>
  <span v-show="number==10">等于10</span>
  <span v-show="number<10">小于10</span><br/>
 </p>

将上面例子里的指令都换成 v-show ，页面显示如下

从页面显示的结果上看，没有任何区别。但是查看源码会发现，符合表达式结果判断的元素内容将被显示，不符合结果判断的元素将被隐藏，即被加上 display: none; 的样式。

Comme le montre la comparaison des deux exemples ci-dessus

1. v-if : insérer ou supprimer dynamiquement des éléments

2. v-show : afficher ou masquer dynamiquement des éléments

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!