Introduction détaillée à certaines instructions couramment utilisées dans vue

Vue est un framework JavaScript populaire largement utilisé dans le développement front-end. Les directives sont un concept important dans le framework Vue, qui fournissent un moyen déclaratif de gérer les éléments DOM. Le jeu d'instructions de Vue contient une série d'instructions couramment utilisées. Ce qui suit est une introduction détaillée à ces instructions.

1. Instruction d'interpolation

L'instruction d'interpolation est l'instruction la plus élémentaire de Vue. Il est utilisé pour insérer des données d'une instance Vue dans un élément DOM. Le format de la commande d'interpolation est "{{}}", et "{{}}", "v-text" et "v-html" peuvent être utilisés.

1. "{{}}"
   "{{}}" est l'instruction d'interpolation la plus basique de Vue, qui peut directement insérer des données de l'instance Vue dans l'élément DOM. Par exemple :

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

Dans l'instance Vue, définissez l'attribut de message sur "Hello Vue!", puis le code ci-dessus affichera "Hello Vue!".

2. "v-text"
   La commande "v-text" a une fonction similaire à "{{}}". Elle peut également insérer des données de l'instance Vue dans l'élément DOM. Cependant, contrairement à "{{}}", la directive "v-text" peut résoudre le problème de scintillement dans le rendu du navigateur causé par la liaison de données. Par exemple :

<div v-text="message"></div>

Dans l'instance Vue, définissez l'attribut de message sur "Hello Vue!", puis le code ci-dessus affichera également "Hello Vue!".

3. "v-html"
   La directive "v-html" peut insérer des données d'une instance Vue dans un élément DOM sous forme de code HTML. Par exemple :

<div v-html="message"></div>

Dans l'instance Vue, définissez l'attribut de message sur "Hello Vue !", puis le code ci-dessus affichera "Hello Vue !" et la partie texte sera en gras.

2. Rendu conditionnel

L'instruction de rendu conditionnel est utilisée pour changer la visibilité des éléments dans les éléments DOM en fonction de la valeur d'une expression.

1. "v-if"
   L'instruction de rendu conditionnel la plus couramment utilisée est "v-if". Il détermine s'il faut afficher l'élément DOM correspondant en fonction de la valeur de l'expression. Par exemple :

<div v-if="isShow">Hello Vue!</div>

Dans l'instance Vue, définissez l'attribut isShow sur true, puis le code ci-dessus affichera "Bonjour Vue !", définissez l'attribut isShow sur false et l'élément DOM ne sera plus affiché.

2. "v-else"
   La directive "v-else" doit suivre la directive "v-if" sur le même élément, et est utilisée pour afficher du contenu lorsque l'expression de "v-if" est fausse. Par exemple :

<div v-if="isShow">Hello Vue!</div>
Vue is so great!

Dans une instance de Vue, si l'attribut isShow est vrai, le premier élément du DOM affichera "Bonjour Vue !", sinon le deuxième élément du DOM affichera "Vue est tellement géniale !".

3. "v-show"
   La commande "v-show" est similaire à la commande "v-if" et peut également contrôler l'affichage et le masquage des éléments. Cependant, contrairement à la directive "v-if", la directive "v-show" est toujours conservée dans l'élément DOM et contrôle uniquement la visibilité de l'élément en définissant l'attribut "style" de l'élément. Par exemple :

<div v-show="isShow">Hello Vue!</div>

Dans l'instance Vue, si l'attribut isShow est défini sur true, l'élément ci-dessus sera affiché, et si l'attribut isShow est défini sur false, l'élément sera masqué.

3. Rendu en boucle

L'instruction de rendu en boucle est utilisée pour restituer des données de tableau ou d'objet en éléments DOM.

1. "v-for"
   L'instruction de rendu en boucle la plus couramment utilisée est "v-for". Il peut parcourir un tableau ou un objet et restituer les données dans un élément DOM. Par exemple :

<ul>
    <li v-for="item in items">{{ item.name }}</li>
</ul>

Dans l'instance Vue, définissez l'attribut items sur un tableau contenant plusieurs objets {name: value}, puis le code ci-dessus affichera plusieurs éléments de liste, chaque élément de liste contenant le texte d'un attribut de nom.

2. Index de "v-for"
   Si vous avez besoin d'obtenir le numéro de séquence de la boucle, vous pouvez utiliser le deuxième paramètre de la commande "v-for". Par exemple :

<ul>
    <li v-for="(item, index) in items">{{ index }} - {{ item.name }}</li>
</ul>

Dans une instance Vue, si le code ci-dessus est appliqué à un tableau d'éléments contenant 2 objets, deux éléments de liste seront rendus. Chaque élément de liste affiche l'index de l'élément dans le tableau et le nom de l'élément. attribut.

4. Liaison d'événement

L'instruction de liaison d'événement est utilisée pour lier les écouteurs d'événements sur les éléments DOM et appeler des méthodes dans l'instance Vue lorsqu'un événement se produit.

1. "v-on"
   La directive de liaison d'événements la plus couramment utilisée est "v-on", qui est utilisée pour lier les écouteurs d'événements sur les éléments DOM. Par exemple :

<button v-on:click="onClick"></button>

Dans l'instance Vue, définissez une méthode nommée "onClick", puis le code ci-dessus signifie que la méthode "onClick" est appelée lorsque le bouton est cliqué.

2. Abréviation de "v-on"
   Il existe également une abréviation pour la commande "v-on", qui est le symbole "@". Par exemple :

<button @click="onClick"></button>

Dans l'instance Vue, définissez une méthode nommée "onClick", puis le code ci-dessus signifie que la méthode "onClick" est appelée lorsque le bouton est cliqué.

5. Liaison de données bidirectionnelle

L'instruction de liaison est utilisée pour lier dans les deux sens les éléments du formulaire et les données dans l'instance Vue.

1. "v-model"
   L'instruction de liaison la plus couramment utilisée est "v-model", qui peut lier dans les deux sens la valeur de l'élément de formulaire aux données de l'instance Vue. Par exemple :

<input v-model="message">

Dans l'instance Vue, lorsque le code ci-dessus est appliqué à une propriété nommée "message", la valeur de la zone de saisie est liée de manière bidirectionnelle à la valeur de la propriété "message".

6. Attributs calculés

计算属性用于根据Vue实例中的数据动态生成新的属性，从而方便DOM元素的渲染。

1. "computed"
   最常用的计算属性指令是"computed"，它可以自动追踪所依赖的数据，并在数据变化时更新该属性的值。例如：

Vue.component('my-component', {
    template: '<div>{{ reversedMessage }}</div>',
    data: {
        message: 'Hello Vue!'
    },
    computed: {
        reversedMessage: function () {
            return this.message.split('').reverse().join('')
        }
    }
})

在定义了一个名为"reversedMessage"的计算属性后，Vue会自动追踪message属性的变化，并在message变化时调用计算属性的计算函数，重新生成reversedMessage属性的值。

以上是Vue中常用的指令集的介绍，这些指令可以帮助我们更轻松地处理DOM元素的生成和渲染，提高开发效率。

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!