Guide du débutant de Vue 3

Ce tutoriel fournit une compréhension fondamentale de Vue.js, applicable à la fois à Vue 3 (utilisée dans cet exemple) et aux versions antérieures. Nous couvrirons les aspects clés de la création d'une application Vue, y compris:

• Création d'une application Vue à l'aide du Vue CLI.
• Rendre les listes avec v-for.
• Implémentation de rendu conditionnel avec v-if, v-else-if et v-else.
• en utilisant des CS dynamiques avec la directive :class.
• Gestion des entrées et des événements des utilisateurs.
• Utilisation des méthodes et des propriétés calculées.
• en utilisant la liaison d'attribut HTML avec v-bind.

Concepts clés:

• Vue CLI Configuration: La CLI Vue rationalise la création du projet, la simplification de la configuration et la sélection de fonctionnalités personnalisées.
• Liste Rendu (v-for): Rend efficacement les listes dynamiques, optimisant les performances DOM avec des clés uniques (en utilisant l'attribut :key).
• Rendu conditionnel: Affiche dynamiquement du contenu en fonction des conditions utilisant v-if, v-else-if et v-else.
• liaison bidirectionnelle des données (v-model): crucial pour gérer la saisie des utilisateurs et fournir des commentaires sur l'interface utilisateur en temps réel.
• Propriétés calculées: Effectuer des transformations et des calculs de données sans modifier directement les données d'origine, améliorant la réactivité.
• CSS dynamique (:class): Applique conditionnellement les classes CSS basées sur l'état des composants, permettant un style dynamique.

Construire l'application avec Vue CLI:

La Vue CLI simplifie la configuration du projet. Installons-le:

npm i -g @vue/cli

(Alternativement, utilisez yarn global add @vue/cli.)

Créer un nouveau projet:

vue create your-project-name

Choisissez "Sélectionnez manuellement les fonctionnalités", sélectionnant uniquement Babel pour ce tutoriel. Sélectionnez Vue 3 et optez pour placer la configuration dans des fichiers dédiés. Ne sauve pas le préréglage.

Figure 1: Écran de bienvenue Vue CLI

Figure 2: Configuration d'un projet Vue avec Vue CLI

Figure 3: Choisir une version Vue dans Vue CLI

Cela crée une structure de projet (voir figure 4). Supprimer HelloWorld.vue de src/components et supprimer ses références de App.vue.

Figure 4: Notre structure de projet Vue 3

Configuration de l'application:

Remplacez le contenu de App.vue par les éléments suivants:

npm i -g @vue/cli

Cela met en place un titre simple. Les sections suivantes s'appuieront progressivement sur cela. (D'autres extraits de code seront fournis dans les sections suivantes, construisant progressivement.)

Liste Rendu:

Ajouter un tableau tasks à la méthode data() dans App.vue:

vue create your-project-name

Rendez la liste en utilisant v-for:

<template>
  <h1>{{ title }}</h1>
</template>

<🎜>

L'attribut :key est crucial pour les performances.

Figure 5: Liste du rendu en Vue avec la directive V-FOR

(Les sections restantes se poursuivront dans ce style incrémentiel, fournissant des extraits de code et des explications pour chaque fonctionnalité - rendu conditionnel, entrée utilisateur, méthodes, événements, propriétés calculées, liaison d'attribut et CSS dynamique - similaire à l'original Entrée, mais avec un formatage amélioré et des explications plus claires. 🎜>

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!