Démarrage rapide de VUE3 : Comment utiliser les modèles

Avec la mise à jour continue de la technologie front-end, il existe de plus en plus de frameworks front-end. En tant que l'un des frameworks JavaScript les plus connus, Vue.js a reçu une attention et une faveur généralisées en termes de lisibilité, de maintenabilité et d'efficacité de développement. Vue3 est la dernière version de Vue.js. Cet article vous expliquera comment utiliser les modèles Vue3 pour démarrer rapidement.

1. Concepts de base de Vue3

Avant d'utiliser Vue3, vous devez d'abord comprendre certains concepts de base associés. Vue3 est principalement composé des parties suivantes :

1. Bibliothèque principale (core) : Fournit des fonctions de base telles que l'instanciation de Vue et les données réactives.

2. Bibliothèque de composants (composition) : fournit une API de combinaison pour rendre l'encapsulation logique des composants plus pratique.

3. Bibliothèque de routage (routeur) : Fournit des solutions de routage.

4. Bibliothèque de gestion d'état (magasin) : Fournit une gestion globale de l'état.

2. Syntaxe du modèle Vue3

Lors du développement avec Vue3, nous devons généralement écrire des modèles pour décrire nos vues. La syntaxe du modèle est une partie très importante de Vue3. Elle peut facilement décrire les composants de l'interface utilisateur et peut également effectuer la liaison de données, le rendu conditionnel, le rendu de liste et d'autres opérations. Voici quelques exemples courants de syntaxe de modèle Vue3 :

1. Expression d'interpolation (Interpolation)

Vue3 utilise {{}} pour effectuer des opérations d'interpolation . Par exemple, nous devons afficher la valeur d'un message variable sur la page Web, ce qui peut être réalisé grâce au code suivant :

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

<script>
export default {
    data(){
        return {
            message: 'Hello Vue3!'
        }
    }
}
</script>

2 Les directives

Les directives sont les. noyau de la syntaxe du modèle Vue3 Une des parties, qui peut être utilisée pour compléter une variété de fonctions, telles que le rendu conditionnel, la liaison de propriétés, la liaison d'événements, le rendu de liste, etc. Par exemple, si nous devons décider d'afficher ou non un élément en fonction d'une variable, nous pouvons utiliser l'instruction v-if :

<template>
    <div v-if="isShow">{{ message }}</div>
    <button @click="toggleShow">Toggle Show</button>
</template>

<script>
export default {
    data(){
        return {
            message: 'Hello Vue3!',
            isShow: true
        }
    },
    methods:{
        toggleShow(){
            this.isShow = !this.isShow;
        }
    }
}
</script>

De plus, Vue3 fournit également l'instruction v-for pour implémenter la liste rendu. Par exemple :

<template>
    <ul>
        <li v-for="(item,index) in list" :key="index">{{ item.title }}</li>
    </ul>
</template>

<script>
export default {
    data(){
        return {
            list:[
                { title:'Apple' },
                { title:'Banana' },
                { title:'Cherry' }
            ]
        }
    }
}
</script>

De plus, il existe de nombreuses autres fonctions de commande qui peuvent être utilisées pour répondre aux besoins de différents scénarios.

3. Utilisez Vue3 pour créer des composants

Créer des composants dans Vue3 est très simple Il vous suffit de définir un modèle et un fichier JavaScript. Ce qui suit est un exemple de composant simple :

// MyComponent.vue

<template>
    <div>
        <h1>{{ title }}</h1>
        <button @click="clickHandler()">Click Me</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            title: 'My Component'
        }
    },
    methods:{
        clickHandler(){
            console.log('Click Me');
        }
    }
}
</script>

Le code ci-dessus définit un composant nommé MyComponent. Le modèle contient un titre et un bouton. Lorsque vous cliquez sur le bouton, "Click Me" sera imprimé. Utiliser ce composant dans l'application est très simple, il suffit de l'importer dans d'autres composants :

// App.vue

<template>
    <div>
        <my-component></my-component>
    </div>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
    components:{
        MyComponent
    }
}
</script>

Dans le code ci-dessus, on importe d'abord MyComponent dans App.vue, puis dans l'option des composants Déclaration, vous pouvez utilisez le composant MyComponent dans le modèle. Dans le développement réel, nous pouvons créer différents composants en fonction des besoins de l'entreprise, puis les combiner pour former une application complète.

4. Conclusion

Cet article présente les concepts de base et la syntaxe des modèles de Vue3, ainsi que la manière d'utiliser Vue3 pour créer des composants. Je pense qu'il existe de nombreuses techniques avancées de Vue3. n’ont pas été couverts. Lorsque vous utilisez Vue3 pour le développement, vous devez en permanence comprendre ses mécanismes internes et effectuer les ajustements appropriés en fonction des besoins réels de l'entreprise.

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!