Syntaxe du modèle

Dans l'implémentation sous-jacente, Vue compile les modèles en fonctions de rendu DOM virtuel. Combiné avec le système réactif, Vue peut calculer intelligemment le nombre de composants qui doivent être restitués et minimiser le nombre d'opérations DOM.

Si vous êtes familier avec les DOM virtuels et préférez la puissance brute de JavaScript, vous pouvez également ignorer les modèles et écrire directement la fonction de rendu, en utilisant la syntaxe JSX facultative. 🎙

Fonctionnalités

Utiliser des expressions JavaScript

• • Commandes

  • Paramètres

  • Paramètres dynamiques

  • Modificateurs

  abréviation v-bind
interpolation

• • texte

  • La forme la plus courante de liaison de données consiste à utiliser la syntaxe "Moustache" (interpolation de texte entre doubles accolades) :

    <span>Message: {{ msg }}</span>

    Les balises Moustache seront remplacées par la valeur de l'attribut msg sur le correspondant objet de données. Chaque fois que la propriété msg sur l'objet de données lié change, le contenu au point d'interpolation est mis à jour.

  En utilisant la directive v-once
  • , vous pouvez également effectuer une interpolation unique lorsque Lorsque les données changent, le contenu de l'interpolation ne sera pas mis à jour. Mais veuillez noter que cela affectera les autres liaisons de données sur le nœud :

    <span v-once>这个将不会改变: {{ msg }}</span>

  original HTML

• Les doubles accolades interpréteront les données comme du texte ordinaire, plutôt que du HTML. code. Afin de générer du vrai HTML, vous devez utiliser la directive v-html :

  <p>Using mustaches: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>

  • Le contenu de ce span sera remplacé par la valeur d'attribut rawHtml, directement au format HTML - la liaison des données dans la valeur d'attribut analysée sera ignorée. Notez que vous ne pouvez pas utiliser v-html pour composer des modèles partiels car Vue n'est pas un moteur de modèles basé sur des chaînes. En revanche, pour les interfaces utilisateur (UI), les composants conviennent mieux en tant qu'unités de base réutilisables et composables. span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

    你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

    
    

    特性

    Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

    <div v-bind:id="dynamicId"></div>

    对于布尔特性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

    <button v-bind:disabled="isButtonDisabled">Button</button>

    如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

    
    

    使用 JavaScript 表达式

    迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

    {{ number + 1 }}
    
    {{ ok ? 'YES' : 'NO' }}
    
    {{ message.split('').reverse().join('') }}
    
    <div v-bind:id="'list-' + id"></div>

    这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

    <!-- 这是语句，不是表达式 -->
    {{ var a = 1 }}
    
    <!-- 流控制也不会生效，请使用三元表达式 -->
    {{ if (ok) { return message } }}

    模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

    
    

    指令

    ---

    指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：

    <p v-if="seen">现在你看到我了</p>

    这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除 <p>

    Le HTML arbitraire rendu dynamiquement sur votre site peut être très dangereux car il peut facilement conduire à XSS attaque. Veuillez utiliser uniquement l'interpolation HTML pour le contenu fiable et

    jamais
    n'utilisez l'interpolation pour le contenu fourni par l'utilisateur.

    Caractéristiques

    🎜🎜🎜La syntaxe Moustache ne peut pas être appliquée aux caractéristiques HTML. Dans ce cas, vous devez utiliser directive v-bind : 🎜

    <a v-bind:href="url">...</a>

    🎜Pour les propriétés booléennes (leur présence signifie que la valeur est true ), v-bind fonctionne légèrement différemment, dans cet exemple : 🎜

    <a v-on:click="doSomething">...</a>

    🎜Si la valeur de isButtonDisabled est null, undefined< /code> ou false, l'attribut disabled ne sera même pas inclus dans l'élément <button> rendu. 🎜🎜🎜🎜

    🎜🎜Utilisation d'expressions JavaScript🎜🎜🎜🎜Jusqu'à présent, dans nos modèles, nous n'avons lié que des valeurs de clé de propriété simples. Mais en fait, pour toutes les liaisons de données, Vue.js fournit une prise en charge complète des expressions JavaScript. 🎜

    <a v-bind:[attributeName]="url"> ... </a>

    🎜Ces expressions seront analysées en tant que JavaScript dans la portée des données de l'instance Vue à laquelle elles appartiennent. Il existe une limitation selon laquelle chaque liaison ne peut contenir 🎜 qu'une seule expression 🎜, donc les exemples suivants 🎜 ne prendront pas 🎜 effet. 🎜

    <a v-on:[eventName]="doSomething"> ... </a>

    🎜Les expressions de modèle sont placées dans un bac à sable et ne peuvent accéder qu'à une liste blanche de variables globales, telles que Math et Date . Vous ne devez pas tenter d'accéder aux variables globales définies par l'utilisateur dans les expressions de modèle. 🎜

    🎜🎜🎜

    🎜Instructions🎜🎜

    ---

    🎜Les instructions (Directives) sont avec < Spécial propriétés du préfixe code>v-. La valeur d'un attribut de directive devrait être une 🎜expression JavaScript unique🎜 (v-for est l'exception, mais nous en discuterons plus tard). La responsabilité d'une directive est d'appliquer de manière réactive ses effets associés au DOM lorsque la valeur d'une expression change. En repensant à l'exemple que nous avons vu dans l'introduction : 🎜

    <!-- 这会触发一个编译警告 -->
    <a v-bind:['foo' + bar]="value"> ... </a>

    🎜Ici, la directive v-if va insérer/supprimer seen ><p>. 🎜🎜🎜🎜🎜🎜🎜paramètres🎜🎜🎜

    Certaines commandes peuvent recevoir un "paramètre", représenté par deux points après le nom de la commande. Par exemple, la directive v-bind peut être utilisée pour mettre à jour les fonctionnalités HTML de manière réactive : v-bind 指令可以用于响应式地更新 HTML 特性：

    <!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
    <a v-bind:[someAttr]="value"> ... </a>

    在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。

    另一个例子是 v-on 指令，它用于监听 DOM 事件：

    <form v-on:submit.prevent="onSubmit">...</form>

    在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

    
    

    动态参数

    2.6.0 新增

    从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    
    <!-- 缩写 -->
    <a :href="url">...</a>

    这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 v-bind:href。

    同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    
    <!-- 缩写 -->
    <a @click="doSomething">...</a>

    同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

    对动态参数的值的约束

    动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

    对动态参数表达式的约束

    动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。

    例如，下面的代码是无效的：

    rrreee

    变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

    另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写：

    rrreee

    
    

    修饰符

    修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

    rrreee

    在接下来对 v-on 和 v-forrrreeeIci, href est un paramètre, indiquant à v-bind La directive lie l'attribut href de l'élément à la valeur de l'expression url.
    

    Un autre exemple est la directive v-on, qui est utilisée pour écouter les événements DOM :

    rrreee
    Le paramètre ici est le nom de l'événement à écouter. Nous discuterons également de la gestion des événements plus en détail.

    🎜🎜🎜

    Paramètres dynamiques🎜

    🎜2.6.0 Nouveau 🎜

    🎜À partir de la version 2.6.0, les expressions JavaScript entre crochets peuvent être utilisées comme paramètres d'une commande : 🎜rrreee🎜Le attributeName ici sera traité dynamiquement comme une expression JavaScript Evaluate, et la valeur obtenue sera utilisée comme paramètre final. Par exemple, si votre instance Vue a un attribut data attributeName avec la valeur "href", alors cette liaison sera équivalente à < code> v-bind:href. 🎜🎜De même, vous pouvez utiliser des paramètres dynamiques pour lier une fonction de gestionnaire à un nom d'événement dynamique : 🎜rrreee🎜De même, lorsque la valeur de eventName est "focus" , < code>v-on:[eventName] sera équivalent à v-on:focus. 🎜🎜Contraintes sur les valeurs des paramètres dynamiques🎜🎜Les paramètres dynamiques sont censés être évalués sous la forme d'une chaîne, et la valeur est nulle dans des cas exceptionnels. Cette valeur spéciale null peut être utilisée pour supprimer explicitement une liaison. Toute autre valeur autre qu'une chaîne déclenchera un avertissement. 🎜🎜Contraintes sur les expressions de paramètres dynamiques🎜

    🎜Les expressions de paramètres dynamiques ont certaines contraintes de syntaxe, car certains caractères, tels que les espaces et les guillemets, ne sont pas valides dans les noms d'attributs HTML. De même, vous devez éviter de mettre en majuscule les noms de clés lorsque vous utilisez des modèles dans le DOM. 🎜

    🎜Par exemple, le code suivant n'est pas valide : 🎜rrreee🎜Une solution de contournement consiste à utiliser une expression sans espaces ni guillemets, ou à remplacer une expression aussi complexe par une propriété calculée. 🎜🎜De plus, si vous utilisez des modèles dans le DOM (écrivez le modèle directement dans un fichier HTML), sachez que le navigateur forcera tous les noms d'attributs à être en minuscules : 🎜rrreee🎜🎜🎜

    < span style="font-size: 18px;">Modificateur🎜🎜Modificateur (modificateur) ​​est un suffixe spécial spécifié avec un point demi-largeur. Il est utilisé pour. indique qu'une commande doit être spécifiée avec une manière spéciale de se lier. Par exemple, le modificateur .prevent indique à la directive v-on d'appeler event.preventDefault() pour l'événement déclenché : 🎜rrreee🎜 Suivant pour v-on🎜 et v-for🎜. 🎜🎜🎜🎜🎜

    Abréviation

    ---

    Le préfixe v- sert de repère visuel pour identifier les fonctionnalités spécifiques à Vue dans le modèle. Lorsque vous utilisez Vue.js pour ajouter un comportement dynamique aux balises existantes, le préfixe v- est utile. Cependant, pour certaines directives fréquemment utilisées, vous aurez l'impression d'utiliser Cumbersome. En même temps, lors de la création d'une Application monopage (SPA - application monopage), le préfixe v- devient également moins important. Par conséquent, Vue fournit des abréviations spécifiques pour les deux instructions les plus couramment utilisées : v-bind et v-on : v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：
    

    
    

    v-bind 缩写

    rrreee

    …

    
    

    v-on 缩写

    rrreee

    …

    它们看起来可能与普通的 HTML 略有不同，但 : 与 @

    
    

    v-bind abréviation

    🎜🎜rrreee🎜…🎜🎜🎜🎜

    🎜v- sur les abréviations 🎜🎜🎜rrreee🎜…🎜🎜Ils peuvent sembler légèrement différents du HTML normal, mais : et @ sont tous deux des caractères légaux pour les noms de propriété, ils peuvent être analysés correctement dans tous les cas. navigateurs prenant en charge Vue. De plus, ils n’apparaîtront pas dans le balisage final rendu. La syntaxe des abréviations est totalement facultative, mais à mesure que vous comprendrez mieux leur rôle, vous serez heureux de les avoir. 🎜🎜🎜🎜🎜 🎜