Utilisation de la syntaxe des templates dans Vue.js 2

Interpolation

Texte


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <p>{{ texte }}</p>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    texte: 'Bonjour Vue.js !'
  }
})
</script>
</body>
</html>
HTML


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <div v-html="contenuHtml"></div>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    contenuHtml: '<h1>Exemple</h1>'
  }
})
</script>
</body>
</html>
Attributs


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<style>
.style-actif {
  background-color: #333;
  color: #f0f0f0;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <label for="toggle">Activer le style</label>
  <input type="checkbox" v-model="actif" id="toggle">
  <div v-bind:class="{'style-actif': actif}">
    Directive v-bind:class
  </div>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    actif: false
  }
})
</script>
</body>
</html>
Expressions


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  {{ 10 * 2 }}<br>
  {{ condition ? 'Vrai' : 'Faux' }}<br>
  {{ mot.split('').reverse().join('') }}
  <div v-bind:id="'element-' + identifiant">Contenu</div>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    condition: true,
    mot: 'exemple',
    identifiant: 5
  }
})
</script>
</body>
</html>

Diretcives

v-if


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <p v-if="visible">Ce texte est visible</p>
  <template v-if="valide">
    <h1>Section conditionnelle</h1>
  </template>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    visible: true,
    valide: true
  }
})
</script>
</body>
</html>

Paramètres

v-bind


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <a v-bind:href="lien">Lien dynamique</a>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    lien: 'https://www.example.com'
  }
})
</script>
</body>
</html>
v-on

<a v-on:click="nomMethode">Lien cliquable</a>

Modificateurs

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

Entrée utilisateur

v-model


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <p>{{ saisie }}</p>
  <input v-model="saisie">
</div>

<script>
new Vue({
  el: '#application',
  data: {
    saisie: 'texte initial'
  }
})
</script>
</body>
</html>
v-on pour les événements


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  <p>{{ texte }}</p>
  <button v-on:click="inverserTexte">Inverser</button>
</div>

<script>
new Vue({
  el: '#application',
  data: {
    texte: 'demo'
  },
  methods: {
    inverserTexte: function () {
      this.texte = this.texte.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

Filtres

Syntaxe de base

{{ valeur | filtreA }}
<div v-bind:id="idBrut | formaterId"></div>

Exemple


<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Exemple Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
</head>
<body>
<div id="application">
  {{ mot | majusculeInitiale }}
</div>

<script>
new Vue({
  el: '#application',
  data: {
    mot: 'exemple'
  },
  filters: {
    majusculeInitiale: function (valeur) {
      if (!valeur) return ''
      valeur = valeur.toString()
      return valeur.charAt(0).toUpperCase() + valeur.slice(1)
    }
  }
})
</script>
</body>
</html>
Filtres en série

{{ message | filtreA | filtreB }}

Filtres avec arguments

{{ message | filtreA('argument1', argument2) }}

Raccoucris

v-bind

<a :href="lien">Lien raccourci</a> ##### v-on

<button @click="action">Bouton raccourci</button>

Étiquettes: Vue.js JavaScript template syntax directives Interpolation

Publié le 23 juillet à 22h04

Étiquettes Populaires

©2026 L'Atelier Monstre