Modèles et interpolations Vue.js

Vue.js utilise un langage de modélisation qui est un sur-ensemble de HTML. Tout HTML est un modèle Vue.js valide, et en plus de cela, Vue.js fournit deux choses puissantes: l'interpolation et les directives.

Vue.js utilise un langage de modélisation qui est un sur-ensemble de HTML.

Tout HTML est un modèle Vue.js valide, et en plus de cela, Vue.js fournit deux choses puissantes:interpolationetdirectives.

Ceci est un modèle Vue.js valide:

<span>Hello!</span>

Ce modèle peut être placé dans un composant Vue déclaré explicitement:

new Vue({
  template: '<span>Hello!</span>'
})

ou il peut être mis dans unComposant de fichier unique:

<template>
  <span>Hello!</span>
</template>

Ce premier exemple est très basique. L'étape suivante consiste à lui faire afficher une partie de l'état du composant, par exemple, un nom.

Cela peut être fait par interpolation. Tout d'abord, nous ajoutons des données à notre composant:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello!</span>'
})

puis nous pouvons l'ajouter à notre modèle en utilisant la syntaxe des doubles crochets:

new Vue({
  data: {
    name: 'Flavio'
  },
  template: '<span>Hello {{name}}!</span>'
})

Une chose intéressante ici. Voyez comment nous venons d'utilisernameau lieu dethis.data.name?

En effet, Vue.js effectue une liaison interne et permet au modèle d'utiliser la propriété comme si elle était locale. Assez pratique.

Dans un seul composant de fichier, ce serait:

<template>
  <span>Hello {{name}}!</span>
</template>
<script>
export default {
data() {
return {
name: ‘Flavio’
}
}
}
</script>

J'ai utilisé une fonction régulière dans mon export. Pourquoi pas une fonction flèche?

C'est parce que dansdatanous pourrions avoir besoin d'accéder à une méthode dans notre instance de composant, et nous ne pouvons pas le faire sithisn'est pas lié au composant, donc l'utilisation des fonctions fléchées n'est pas possible.

Nous pourrions utiliser une fonction fléchée, mais je devrais alors me rappeler de passer à une fonction normale au cas où j'utiliseraisthis. Mieux vaut jouer prudemment, je pense.

Maintenant, revenons à l'interpolation.

{{ name }}rappelle l'interpolation de modèle Moustache / Guidon, mais ce n'est qu'un rappel visuel.

Alors que dans ces moteurs de modèles, ils sont «stupides», dans Vue, vous pouvez faire beaucoup plus, c'est plus flexible.

Vous pouvez utilisertoute expression JavaScriptà l'intérieur de vos interpolations, mais vous êtes limité à une seule expression:

{{ name.reverse() }}

{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue donne accès à certains objets globaux dans des modèles, y compris Math et Date, afin que vous puissiez les utiliser:

{{ Math.sqrt(16) * Math.random() }}

Il est préférable d'éviter d'ajouter une logique complexe aux modèles, mais le fait que Vue le permet nous donne plus de flexibilité, en particulier lorsque vous essayez des choses.

Nous pouvons d'abord essayer de mettre une expression dans le modèle, puis la déplacer ultérieurement vers une propriété ou une méthode calculée.

La valeur incluse dans toute interpolation sera mise à jour lors d'un changement de l'une des propriétés de données sur lesquelles elle s'appuie.

Vous pouvez éviter cette réactivité en utilisant lev-oncedirectif.

Le résultat est toujours échappé, vous ne pouvez donc pas avoir de HTML dans la sortie.

Si vous avez besoin d'un extrait de code HTML, vous devez utiliser lev-htmldirective à la place.

Téléchargez mon gratuitManuel de Vue

Modèles et interpolations Vue.js

Vue.js utilise un langage de modélisation qui est un sur-ensemble de HTML. Tout HTML est un modèle Vue.js valide, et en plus de cela, Vue.js fournit deux choses puissantes: l'interpolation et les directives.

Plus de tutoriels vue: