Erstellen Sie eine Einkaufslisten -App mit der Vue 3.0 -Kompositions -API

Meister Sie die Vue 3 -Kompositions -API, um Einkaufslistenanwendungen zu erstellen

Dieser Artikel zeigt, wie eine Einkaufslistenanwendung mit der VUE 3.0 -Kompositions -API erstellt und deren Vorteile erläutert wird, um den Code leichter zu lesen und zu warten. Die Kompositions -API als optionale neue Art zum Erstellen und Organisieren von Komponenten in VUE 3 macht die Definition der Reaktionskomponentenlogik intuitiver, indem alle Code für bestimmte Funktionen (z. B. die Suche) gruppiert werden. Dadurch wird Ihre Bewerbung skalierbar und wiederverwendbarer.

Kernpunkte:

• Vue 3.0 -Kompositions -API bietet einen einfacheren Zugriff und eine intuitivere Möglichkeit, die reaktionsschnelle Komponentenlogik zu definieren und Anwendungen skalierbarer und wiederverwendbarer zu gestalten.
• Kompositions -API kann weltweit installiert oder in bestimmte Komponenten bei Bedarf importiert werden.
• Verwenden Sie die Kompositions -API, um Einkaufslistenanwendungen zu erstellen, um Elemente hinzuzufügen und zu entfernen. Der Anwendungsstatus und seine Methoden sind in der Methode setup definiert.
• Kompositions -API verbessert, wie Methoden und Komponentenzustände behandelt werden, um sie zugänglicher und reaktionsschneller zu gestalten. Es kann in Verbindung mit der Options -API verwendet werden und bietet flexibleren und reaktionsschnelleren Zustand für ein besseres staatliches Management.

Vorbereitung:

Sie benötigen die Grundlagen von HTML, CSS, JavaScript und Vue sowie Textredakteuren, Webbrowser, Node.js und Vue CLI.

vue App einstellen:

1. Globale Installation von Vue CLI:

npm install -g vue-cli

2. Erstellen Sie ein Projekt:

vue create vueshoppinglist

3. Geben Sie das Projektverzeichnis ein und starten Sie den Entwicklungsserver:

cd vueshoppinglist
npm run serve

Die Anwendung

wird in localhost:8080 ausgeführt.

Installieren und Verwenden von Kompositions -API:

1. Kompositions -API installieren:

npm install --save @vue/composition-api

2. Registrieren Sie sich weltweit in der src/main.vue -Composition -API:

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')

Benutzeroberfläche erstellen:

Erstellen Sie eine Komponente mit dem Namen ShoppingList.vue (im Verzeichnis src/components) und fügen Sie den folgenden Code hinzu:

<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>

importieren und verwenden Sie die App.vue -Komponente in ShoppingList.vue.

Zusammenfassung:

Wir haben eine einfache Einkaufslisten -App mit der Vue 3 -Kompositions -API erstellt. Die Anwendung der Kompositions -API in VUE 2 ist es auch wert, auf die Aufmerksamkeit zu achten. Die Hauptvorteile sind besser zugängliche Methoden und Komponentenzustandsverarbeitung sowie ihre reaktionsschnellen Merkmale.

FAQ: (vereinfacht, Duplizierung vermeiden)

Diese Version hat einen optimierten Umschreiben des Originaltextes erstellt und die Bildposition und das Format beibehalten. Es geht darum, die Code -Abschnitte klarer zu organisieren und zu kommentieren, um sie leichter zu verstehen. Gleichzeitig wurde die Artikelstruktur auch so angepasst, dass sie reibungsloser und einfacher zu lesen ist.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine Einkaufslisten -App mit der Vue 3.0 -Kompositions -API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!