Comment rendre en vue

Vue.js est un framework front-end populaire. Sa tâche principale est de lier les données et les vues et de restituer automatiquement le contenu correct.

Dans Vue.js, les vues sont généralement rendues à l'aide des méthodes suivantes :

1. Utilisation d'expressions d'interpolation {{}} pour la liaison de données

Vue.js prend en charge l'utilisation d'expressions d'interpolation pour la liaison de données dans les modèles. Les expressions d'interpolation sont l'une des directives les plus élémentaires de Vue.js et sont utilisées pour lier des données dans des modèles. Vue.js utilise la syntaxe Moustache (c'est-à-dire des doubles accolades) pour insérer des expressions dans les modèles HTML.

Par exemple, le modèle suivant affichera un message simple :

<div>
    {{ message }}
</div>

Dans l'instance Vue.js, vous pouvez définir une valeur pour l'attribut message, qui sera rendu dynamiquement dans le modèle :

new Vue({
    el: '#app',
    data: {
        message: 'Hello, Vue.js!'
    }
});

Cela rendra un balise div contenant le message "Bonjour, Vue.js!".

2. Utilisez la directive v-bind pour la liaison d'attributs

La directive v-bind est utilisée pour lier les données aux attributs des éléments HTML. Par exemple, dans le code suivant, v-bind lie l'attribut title à la variable de chaîne msg :

<div v-bind:title="msg">
    Hover your mouse to see the title
</div>

Dans une instance Vue.js, vous pouvez définir une valeur pour l'attribut msg, qui sera rendu dynamiquement dans le modèle :

new Vue({
    el: '#app',
    data: {
        msg: 'Hello, Vue.js!'
    }
});

Lorsque l'utilisateur passe le pointeur de la souris sur cet élément, le navigateur affiche une info-bulle contenant la valeur de l'attribut msg.

3. Utilisez la directive v-for pour le rendu en boucle

Vue.js utilise la directive v-for pour implémenter le rendu de liste, qui restitue à plusieurs reprises un fragment HTML en fonction de chaque élément de la source de données. Par exemple, dans le code suivant, la directive v-for restituera chaque chaîne du tableau messages sous la forme d'un élément li :

<ul>
    <li v-for="message in messages">{{ message }}</li>
</ul>

Dans une instance Vue.js, vous pouvez définir un tableau pour l'attribut messages, qui sera affiché dans le modèle Rendu dynamiquement dans :

new Vue({
    el: '#app',
    data: {
        messages: ['Hello', 'Vue', 'JS']
    }
});

Cela affichera une liste non ordonnée de trois messages.

4. Rendu conditionnellement des éléments à l'aide des directives v-if et v-show

Les directives v-if et v-show peuvent être utilisées pour rendre conditionnellement des éléments dans des modèles. La directive v-if restitue un élément de manière conditionnelle en fonction de l'évaluation d'une expression, tandis que la directive v-show affiche ou masque un élément via CSS au lieu de le restituer ou de le détruire complètement.

Par exemple, dans le code suivant, l'élément h1 de la page sera rendu conditionnellement, en fonction de la valeur de la variable showHeading :

<h1 v-if="showHeading">This is the heading</h1>

Dans l'instance Vue.js, vous pouvez définir une valeur pour l'attribut showHeading, qui sera affiché dans le modèle Rendu dynamiquement dans :

new Vue({
    el: '#app',
    data: {
        showHeading: true
    }
});

Si la valeur showHeading est vraie, l'élément h1 sera rendu, sinon il ne sera pas rendu.

Résumé

Ci-dessus sont quelques techniques de rendu de base dans Vue.js. Comprendre et maîtriser les principes et techniques de rendu de Vue.js est la clé pour développer des applications Web efficaces et maintenables. Vue.js fournit une multitude d'instructions et d'options pour simplifier le traitement de la liaison et du rendu des données, tout en améliorant l'efficacité du développement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!