Syntaxe de template Vue3

Vue utilise une syntaxe de template basée sur HTML qui permet aux développeurs de lier de manière déclarative le DOM aux données de l'instance Vue sous-jacente.

Au cœur de Vue se trouve un système qui vous permet de rendre des données de manière déclarative dans le DOM à l'aide d'une syntaxe de template concise.

Combiné au système de réactivité, lorsque l'état de l'application change, Vue peut calculer intelligemment le coût minimal de re-rendu des composants et l'appliquer aux opérations DOM.

Exemple

<template>
  <div>
    <!--Interpolation-->
    <p>{{ message }}</p>
   
    <!-- v-bind -->
    <a :href="url">Lien</a>
   
    <!-- v-sur -->
    <button @click="handleClick">Cliquez-moi</button>
   
    <!-- v-for -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

Interpolation

Texte

La forme la plus courante de liaison de données consiste à utiliser{{...}}l'interpolation de texte avec des doubles accolades :

Interpolation de texte

<div id="app"> <p>{{ message }}</p> </div>

Essayez-le vous-même »

{{...}}Le contenu de la balise sera remplacé par la valeur de la propriétémessagede l'instance de composant correspondante, si la valeur de la propriétémessagechange,{{...}}le contenu de la balise sera également mis à jour.

Si vous ne souhaitez pas modifier le contenu de la balise, vous pouvez utiliserv-oncela directive pour effectuer une interpolation unique. Lorsque les données changent, le contenu au niveau de l'interpolation ne sera pas mis à jour.

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

Html

Utilisez la directive v-html pour afficher du code HTML :

Directive v-html

<div id="example1" class="demo"> <p>Interpolation de texte avec des doubles accolades : {{ rawHtml }}</p> <p>Utilisation de la directive v-html :<span v-html="rawHtml"></span></p> </div> <script> const RenderHtmlApp = { data() { return { rawHtml: '<span style="color: red">Ceci s'affichera en rouge !</span>' } } } Vue.createApp(RenderHtmlApp).mount('#example1') </script>

Essayez-le vous-même »

Attributes

Les valeurs dans les attributs HTML doivent utiliser la directive v-bind.

<div v-bind:id="dynamicId"></div>
Pour les attributs booléens, les valeurs conventionnelles sont true ou false. Si la valeur de l'attribut est null ou undefined, l'attribut ne sera pas affiché.
<button v-bind:disabled="isButtonDisabled">按钮</button>

Dans le code ci-dessus, si la valeur de isButtonDisabled est null ou undefined, l'attribut disabled ne sera même pas inclus dans l'élément <button> rendu.

L'exemple suivant vérifie la valeur de use. Si elle est true, il utilise le style de class1 ; sinon, il n'utilise pas cette classe :

Directive v-bind

<div id="app"> <label for="r1">Changer la couleur</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}">directive v-bind:class</div> </div> <script> const app = { data() { return { use: false } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Expressions

Vue.js offre un support complet pour les expressions JavaScript.

Expressions JavaScript

<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">Exemple</div> </div> <script> const app = { data() { return { ok: true, message: 'EXAMPLE!!', id: 1 } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Les expressions sont analysées comme du JavaScript dans la portée des données de l'instance active actuelle. Il y a une limitation : chaque liaison ne peut contenir qu'une seule expression, donc les exemples suivants ne fonctionneront pas :

<!--  这是语句，不是表达式：-->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

Directives

Les directives sont des attributs spéciaux avec le préfixe v-.

Les directives sont utilisées pour appliquer certains comportements au DOM lorsque la valeur d'une expression change. Voir l'exemple suivant :

Exemple

<div id="app"> <p v-if="seen">Maintenant vous me voyez</p> </div> <script>const app = { data() { return { seen: true /* Passez à false, et le message ne sera pas affiché */ } } } Vue.createApp(app).mount('#app')</script>

Essayez-le vous-même »

Ici, la directive v-if décidera s'il faut insérer l'élément p en fonction de la valeur de l'expression seen (true ou false).

Il existe de nombreuses autres directives, chacune ayant une fonction spécifique. Par exemple, la directive v-for peut lier des données provenant d'un tableau pour afficher une liste d'éléments :

Exemple

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'Google' },
        { text: 'Example' },
        { text: 'Taobao' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

Essayez-le vous-même »

Arguments

Les arguments sont indiqués après une directive par deux-points. Par exemple, la directive v-bind est utilisée pour mettre à jour réactivement les attributs HTML :

Exemple

<div id="app"> <p><a v-bind:href="url">Example</a></p> </div> <script> const app = { data() { return { url: 'https://www.example.com' } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Ici, href est l'argument, indiquant à la directive v-bind de lier 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 :

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

<!-- 缩写 -->
<a @click="doSomething"> ... </a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

Ici, l'argument est le nom de l'événement écouté.

Modificateurs

Modifiers are indicated by a half-width period.comme suffixes spéciaux, utilisés pour indiquer qu'une directive doit être liée d'une manière spéciale. Par exemple,.preventLe modificateur indique àv-onthe directive to call for the triggered eventevent.preventDefault()：

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

Entrée utilisateur

Dans le champ de saisie, nous pouvons utiliser la directive v-model pour réaliser une liaison de données bidirectionnelle :

Liaison de données bidirectionnelle

<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> const app = { data() { return { message: 'Example!' } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

v-modelLa directive est utilisée pour créer une liaison de données bidirectionnelle sur les éléments de contrôle de formulaire tels que input, select, textarea, checkbox et radio. En fonction des valeurs du formulaire, elle met automatiquement à jour les valeurs des éléments liés.

Pour les événements de bouton, nous pouvons utiliser v-on pour écouter les événements et répondre aux entrées de l'utilisateur.

L'exemple suivant inverse la chaîne après que l'utilisateur a cliqué sur le bouton :

Inversion de chaîne

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Test Example - Example (example.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Inverser la chaîne</button> </div> <script> const app = { data() { return { message: 'Example!' } }, methods: { reverseMessage() { this.message = this.message .split('') .reverse() .join('') } } } Vue.createApp(app).mount('#app') </script>

Essayez-le vous-même »

Raccourcis

Raccourci v-bind

Vue.js fournit des raccourcis spéciaux pour les deux directives les plus couramment utilisées :

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

Raccourci v-on

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