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.
v-text
v-once
v-html
v-bind
- Liaison bidirectionnelle utilisant
v-model
- Utiliser des expressions
- Conditionnels
- Boucles
- Événements
- Afficher ou masquer
- Modificateurs de directive d'événement
- Directives personnalisées
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-text
directif. Il effectue le même travail:
<span v-text="name"></span>
v-once
Tu sais comment{{ name }}
se lie auname
propriété des données du composant.
À tout momentname
changements dans vos données de composants, Vue va mettre à jour la valeur représentée dans le navigateur.
Sauf si vous utilisez lev-once
directive, 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-html
directif:
<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-bind
est 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 utilisantv-model
v-model
permet 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-else
etv-else-if
.
<p v-if="shouldShowThis">Hey!</p>
shouldShowThis
est une valeur booléenne contenue dans les données du composant.
Boucles
v-for
vous permet de rendre une liste d'éléments. Utilisez-le en combinaison avecv-bind
pour 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-for
peut vous donner l'index en utilisant:
<li v-for="(todo, index) in todos"></li>
Événements
v-on
vous 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>
click
est juste un type d'événement. Un événement courant estsubmit
, que vous pouvez lier en utilisantv-on:submit
.
v-on
est 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 sur
v-on
dans 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: none
si 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
,.passive
et 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
Plus de tutoriels vue:
- Un aperçu de Vue.js
- La CLI Vue.js: apprenez à l'utiliser
- Les DevTools Vue.js
- Configurer VS Code pour le développement Vue
- Créez votre première application avec Vue.js
- Composants de fichier unique Vue.js
- Modèles et interpolations Vue.js
- Directives Vue.js
- Méthodes Vue.js
- Propriétés calculées Vue.js
- Styliser les composants Vue.js à l'aide de CSS
- Observateurs Vue.js
- Méthodes Vue vs observateurs vs propriétés calculées
- Filtres Vue.js
- Composants Vue.js
- Machines à sous Vue.js
- Accessoires de composants Vue.js
- Événements Vue.js
- Communication des composants Vue.js
- Vuex, le gestionnaire d'état de Vue.js
- Vue, utilisez un composant à l'intérieur d'un autre composant
- Vue, comment utiliser un accessoire comme nom de classe
- Comment utiliser SCSS avec les composants de fichier unique Vue.js
- Utilisation de Tailwind avec Vue.js
- Le routeur Vue
- Afficher dynamiquement un composant Vue
- La feuille de triche Vue.js
- Stocker les données Vue sur localStorage à l'aide de Vuex
- Comment appliquer dynamiquement une classe à l'aide de Vue
- Vue, comment utiliser v-model
- Vue, pourquoi les données doivent être une fonction
- Roadmap to become a Vue.js developer in 2020