Directives Vue.js

Vue.js utilise un langage de modélisation qui est un sur-ensemble de HTML. Nous pouvons utiliser l'interpolation et les directives. Cet article explique les directives.

Nous avons vu dansModèles et interpolations Vue.jscomment vous pouvez intégrer des données dans des modèles Vue.

Cet article explique l'autre technique proposée par Vue.js dans les templates:directives.

Les directives sont fondamentalement comme des attributs HTML qui sont ajoutés à l'intérieur des modèles. Ils commencent tous parv-, pour indiquer que c'est un attribut spécial de Vue.

Voyons chacune des directives Vue en détail.

`v-text`

Au lieu d'utiliser l'interpolation, vous pouvez utiliser lev-textdirectif. Il effectue le même travail:

<span v-text="name"></span>

`v-once`

Tu sais comment{{ name }}se lie aunamepropriété des données du composant.

À tout momentnamechangements dans vos données de composants, Vue va mettre à jour la valeur représentée dans le navigateur.

Sauf si vous utilisez lev-oncedirective, qui est fondamentalement comme un attribut HTML:

<span v-once>{{ name }}</span>

`v-html`

Lorsque vous utilisez l'interpolation pour imprimer une propriété de données, le code HTML est échappé. C'est un excellent moyen que Vue utilise pour se protéger automatiquement contreXSSattaques.

Il existe cependant des cas où vous souhaitez générer du HTML et le faire interpréter par le navigateur. Vous pouvez utiliser lev-htmldirectif:

<span v-html="someHtml"></span>

`v-bind`

L'interpolation ne fonctionne que dans le contenu de la balise. Vous ne pouvez pas l'utiliser sur les attributs.

Les attributs doivent utiliserv-bind:

<a v-bind:href="url">{{ linkText }}</a>

v-bindest si courant qu'il existe une syntaxe abrégée pour cela:

<a v-bind:href="url">{{ linkText }}</a>
<a :href="url">{{ linkText }}</a>

Liaison bidirectionnelle utilisant`v-model`

v-modelpermet de lier un élément d'entrée de formulaire par exemple, et de le faire changer la propriété de données Vue lorsque l'utilisateur modifie le contenu du champ:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>

<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

Utiliser des expressions

Vous pouvez utiliser n'importe quelle expression JavaScript dans une directive:

<span v-text="'Hi, ' + name + '!'"></span>

<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

Toute variable utilisée dans une directive fait référence à la propriété data correspondante.

Conditionnels

À l'intérieur d'une directive, vous pouvez utiliser l'opérateur ternaire pour effectuer une vérification conditionnelle, car c'est une expression:

<span v-text="name == Flavio ? 'Hi Flavio!' : 'Hi' + name + '!'"></span>

Il existe des directives dédiées qui vous permettent d'effectuer des conditions plus organisées:v-if,v-elseetv-else-if.

<p v-if="shouldShowThis">Hey!</p>

shouldShowThisest une valeur booléenne contenue dans les données du composant.

Boucles

v-forvous permet de rendre une liste d'éléments. Utilisez-le en combinaison avecv-bindpour définir les propriétés de chaque élément de la liste.

Vous pouvez itérer sur un simple tableau de valeurs:

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>
<script>
export default {
data() {
return {
items: [‘car’, ‘bike’, ‘dog’]
}
}
}
</script>

Ou sur un tableau d'objets:

<template>
  <div>
    <!-- using interpolation -->
    <ul>
      <li v-for="todo in todos">{{ todo.title }}</li>
    </ul>
    <!-- using v-text -->
    <ul>
      <li v-for="todo in todos" v-text="todo.title"></li>
    </ul>
  </div>
</template>
<script>
export default {
data() {
return {
todos: [
{ id: 1, title: ‘Do something’ },
{ id: 2, title: ‘Do something else’ }
]
}
}
}
</script>

v-forpeut vous donner l'index en utilisant:

<li v-for="(todo, index) in todos"></li>

Événements

v-onvous permet d'écouter les événements DOM et de déclencher une méthode lorsque l'événement se produit. Ici, nous écoutons un événement de clic:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function() {
alert(‘test’)
}
}
}
</script>

Vous pouvez transmettre des paramètres à n'importe quel événement:

<template>
  <a v-on:click="handleClick('test')">Click me!</a>
</template>
<script>
export default {
methods: {
handleClick: function(value) {
alert(value)
}
}
}
</script>

et de petits morceaux de JavaScript (une seule expression) peuvent être placés directement dans le modèle:

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>
<script>
export default {
data: function() {
return {
counter: 0
}
}
}
</script>

clickest juste un type d'événement. Un événement courant estsubmit, que vous pouvez lier en utilisantv-on:submit.

v-onest si commun qu'il existe une syntaxe abrégée pour cela,@:

<a v-on:click="handleClick">Click me!</a>
<a @click="handleClick">Click me!</a>

Plus de détails surv-ondans leÉvénements Vue

Afficher ou masquer

Vous pouvez choisir de n'afficher un élément dans le DOM que si une propriété particulière de l'instance Vue est évaluée à true, en utilisantv-show:

<p v-show="isTrue">Something</p>

L'élément est toujours inséré dans le DOM, mais défini surdisplay: nonesi la condition n'est pas remplie.

Modificateurs de directive d'événement

Vue propose des modificateurs d'événement facultatifs que vous pouvez utiliser en association avecv-on, qui fait automatiquement faire quelque chose à l'événement sans que vous le codiez explicitement dans votre gestionnaire d'événements.

Un bon exemple est.prevent, qui appelle automatiquementpreventDefault()sur l'événement.

Dans ce cas, le formulaire ne provoque pas le rechargement de la page, ce qui est le comportement par défaut:

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

Les autres modificateurs incluent.stop,.capture,.self,.once,.passiveet ils sontdécrit en détail dans la documentation officielle.

Directives personnalisées

Les directives par défaut de Vue vous permettent déjà de faire beaucoup de travail, mais vous pouvez toujours ajouter de nouvelles directives personnalisées si vous le souhaitez.

Lirehttps://vuejs.org/v2/guide/custom-directive.htmlsi vous souhaitez en savoir plus.

Téléchargez mon gratuitManuel de Vue