Vue.js est un framework progressif JavaScript populaire développé par Evan You qui nous aide à créer des applications monopage (SPA) modernes, efficaces, interactives et évolutives. Cet article présentera la syntaxe de base de Vue.js, y compris les modèles, les directives, les propriétés calculées et les événements liés.
syntaxe du modèle
La syntaxe de modèle de Vue.js est une syntaxe étendue basée sur HTML, qui nous permet de combiner des modèles et des données et de mettre en œuvre des mises à jour dynamiques.
interpolation
La syntaxe d'interpolation de Vue.js, qui lie les données au modèle avec des accolades doubles ({ { ... }}), est la suivante :
<div>{
{ message }}</div>Il convient de noter que l'expression d'interpolation n'est qu'une liaison à sens unique, complétant une liaison des données à la vue.
lier la propriété
Nous pouvons lier les données aux attributs des éléments HTML en utilisant la directive v-bind comme suit :
<img v-bind:src="imageUrl">instruction
Les directives sont des commandes dans Vue.js qui sont utilisées pour lier des données à des éléments DOM et implémenter un comportement dynamique. Les commandes intégrées courantes sont les suivantes :
v-if和v-else
La directive v-if peut afficher ou masquer des éléments en fonction d'une condition (valeur vrai/faux d'une expression). Si la condition est fausse, l'élément sera supprimé.
<p v-if="showMessage">显示的消息</p>À l'aide de la directive v-else, vous pouvez spécifier ce qu'il faut afficher lorsqu'un élément est masqué.
<p v-if="showMessage">显示的消息</p>
<p v-else>隐藏的消息</p>v-pour
L'instruction v-for est une instruction de boucle de Vue.js, qui est utilisée pour parcourir des tableaux ou des objets, générer plusieurs éléments DOM et les restituer dans la vue.
<ul>
<li v-for="item in items">{
{ item }}</li>
</ul>liaison v
La directive v-bind peut lier dynamiquement les données Vue.js aux attributs des éléments DOM.
<a v-bind:href="url">{
{ linkText }}</a>propriété calculée
Une propriété calculée est une propriété spéciale de Vue.js, c'est un moyen de fournir des données pour le calcul dynamique et de mettre en cache la valeur calculée. Les propriétés calculées peuvent être liées à des modèles, tout comme les propriétés de données.
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}Lorsque vous l'utilisez, récupérez simplement la propriété calculée directement dans le modèle :
<p>{
{ reversedMessage }}</p>liaison d'événement
Dans Vue.js, nous pouvons lier des événements spécifiques à des éléments DOM via la directive v-on, par exemple :
<button v-on:click="counter += 1">增加计数器</button>Vous pouvez même utiliser directement des modificateurs d'événement pour transmettre des paramètres afin de répondre à des besoins métier spécifiques.
<button v-on:click="showMessage('Hello World')">显示消息</button>épilogue
Ce qui précède est l'introduction à la syntaxe de base de Vue.js, couvrant la syntaxe courante telle que les modèles, les instructions, les propriétés calculées et la liaison d'événements. Dans les applications pratiques, différentes exigences commerciales et modèles de conception auront différentes méthodes de mise en œuvre. Les fonctionnalités uniques de Vue.js et son système de composants hautement flexible aident les développeurs à créer rapidement des applications Web de haute qualité.