Construisez une application de liste d'achat avec l'API de composition Vue 3.0

Maître l'API de composition Vue 3 pour créer des applications de liste de courses

Cet article montrera comment créer une application de liste d'achat à l'aide de l'API de composition Vue 3.0 et expliquer ses avantages pour rendre son code plus facile à lire et à maintenir. L'API de composition, en tant que nouvelle façon facultative de créer et d'organiser des composants dans Vue 3, rend la définition de la logique des composants réactive plus intuitive en regroupant tous les code pour des fonctions spécifiques (telles que la recherche). Cela rendra votre application plus évolutive et réutilisable.

Points de base:

L'API de composition
• Vue 3.0 offre un accès plus facile et un moyen plus intuitif de définir la logique des composants réactive, ce qui rend les applications plus évolutives et réutilisables.
L'API de composition
• peut être installée à l'échelle mondiale ou importée dans des composants spécifiques à la demande.
• Utilisez l'API de composition pour créer des applications de liste de courses pour ajouter et supprimer des articles. L'état de l'application et ses méthodes sont définis dans la méthode setup.
• La composition API améliore la façon dont les méthodes et les états de composants sont gérés pour les rendre plus accessibles et réactifs. Il peut être utilisé conjointement avec l'API Options et fournit un état plus flexible et réactif pour une meilleure gestion de l'État.

Préparation:

Vous avez besoin des bases de HTML, CSS, JavaScript et Vue, ainsi que les éditeurs de texte, les navigateurs Web, Node.js et Vue CLI.

Définir l'application Vue:

1. Installation globale de Vue CLI:

npm install -g vue-cli

2. Créer un projet:

vue create vueshoppinglist

3. Entrez le répertoire du projet et démarrez le serveur de développement:

cd vueshoppinglist
npm run serve

L'application

s'exécutera dans localhost:8080.

Installation et utilisation de l'API de composition:

1. Installation de l'API de composition:

npm install --save @vue/composition-api

2. Inscrivez-vous à l'échelle mondiale dans src/main.vue API de composition:

import Vue from 'vue'
import App from './App.vue'
import VueCompositionApi from '@vue/composition-api'

Vue.config.productionTip = false
Vue.use(VueCompositionApi)

new Vue({
  render: h => h(App),
}).$mount('#app')

Créer une interface utilisateur:

Créez un composant nommé ShoppingList.vue (situé dans le répertoire src/components) et ajoutez le code suivant:

<template>
  <div>
    <div class="form-container">
      <h2>我的购物清单</h2>
      <form @submit.prevent="addItem">
        <div>
          <label>商品名称</label><br>
          <input v-model="state.input" type="text">
        </div>
        <div>
          <button type="submit" class="submit">添加商品</button>
        </div>
      </form>
    </div>
    <div class="list-container">
      <ul>
        <li v-for="(item, index) in state.items" :key="index">
          {{ item }}
          <span @click="removeItem(index)" style="float:right;padding-right:10px;">X</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<🎜>

<style scoped>
/* CSS样式 */
</style>

Ensuite, importez et utilisez le composant App.vue dans ShoppingList.vue.

Résumé:

Nous avons construit une application de liste de shopping simple à l'aide de l'API de composition Vue 3. L'application de l'API de composition dans Vue 2 vaut également la peine de prêter attention. Ses principaux avantages sont les méthodes plus accessibles et le traitement de l'état des composants, ainsi que ses caractéristiques réactives.

FAQ: (simplifié, éviter la duplication)

Cette version a fait une réécriture plus rationalisée du texte d'origine et a maintenu la position et le format de l'image. Le but est d'organiser et de commenter les sections de code plus clairement pour les rendre plus faciles à comprendre. Dans le même temps, la structure de l'article a également été ajustée pour la rendre plus fluide et plus facile à lire.

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!