VUE 3.0 CompositionAPIを使用して買い物リストアプリを構築する

ショッピングリストを構築するためにVUE 3 COOCTISS APIをマスター

この記事では、VUE 3.0 Composition APIを使用して買い物リストのアプリケーションを構築する方法を示し、コードを読みやすくしやすくするための利点を説明します。構成APIは、VUE 3のコンポーネントを作成および整理するオプションの新しい方法として、特定の機能（検索など）のすべてのコードをグループ化することにより、レスポンシブコンポーネントロジックの定義をより直感的にします。これにより、アプリケーションがよりスケーラブルで再利用可能になります。

コアポイント：

• VUE 3.0 Composition APIは、応答性のあるコンポーネントロジックを定義するための簡単なアクセスとより直感的な方法を提供し、アプリケーションをよりスケーラブルで再利用可能にします。
• 組成APIは、グローバルにインストールするか、オンデマンドで特定のコンポーネントにインポートできます。
• 構成APIを使用して、ショッピングリストアプリケーションを構築してアイテムを追加および削除します。アプリケーションステータスとそのメソッドは、setupメソッドで定義されています。
• 構成APIにより、メソッドとコンポーネントの状態がどのように処理され、よりアクセスしやすくなり、応答性があります。 Options APIと組み合わせて使用​​でき、より柔軟で応答性の高い状態を提供して、より良い状態管理を提供します。

準備：

HTML、CSS、JavaScript、Vueの基本、およびテキストエディター、Webブラウザー、node.js、Vue CLIの基本が必要です。

vueアプリの設定：

Vue CLIのグローバルインストール：

npm install -g vue-cli

プロジェクトの作成：

vue create vueshoppinglist

プロジェクトディレクトリを入力して、開発サーバーを起動します。

アプリケーションは

cd vueshoppinglist
npm run serve

で実行されます。

localhost:8080

組成APIのインストールと使用：

組成APIのインストール：

npm install --save @vue/composition-api

構成APIでグローバルに登録します：
2. src/main.vue

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

ユーザーインターフェイスのビルド：

（

ディレクトリにある）という名前のコンポーネントを作成し、次のコードを追加します。 ShoppingList.vue src/components次に、

のコンポーネントをインポートして使用します。

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

App.vueShoppingList.vue

概要：

Vue 3 Composition APIを使用して、シンプルな買い物リストアプリを構築しました。 VUE 2の構成APIの適用も注意を払う価値があります。その主な利点は、よりアクセスしやすい方法とコンポーネントの状態処理、およびその応答性のある特性です。

faq：

（簡略化され、複製を避けてください）

このバージョンは、元のテキストをより合理化した書き直しを行い、画像の位置と形式を維持しました。 ポイントは、コードセクションをより明確に整理してコメントして、理解しやすくすることです。 同時に、記事構造も調整されて、よりスムーズで読みやすくします。

以上がVUE 3.0 CompositionAPIを使用して買い物リストアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。