Bina aplikasi Senarai Belanja dengan API Komposisi Vue 3.0

menguasai API komposisi Vue 3 untuk membina aplikasi senarai belanja

Artikel ini akan menunjukkan cara membina aplikasi senarai membeli -belah menggunakan API Komposisi VUE 3.0 dan menerangkan kelebihannya untuk menjadikan kodnya lebih mudah untuk dibaca dan diselenggara. API komposisi, sebagai cara baru untuk membuat dan menganjurkan komponen dalam Vue 3, menjadikan definisi logik komponen responsif lebih intuitif dengan mengumpulkan semua kod untuk fungsi tertentu (seperti carian). Ini akan menjadikan aplikasi anda lebih berskala dan boleh diguna semula.

mata teras:

API Komposisi VUE 3.0 Vue memberikan akses yang lebih mudah dan cara yang lebih intuitif untuk menentukan logik komponen responsif, menjadikan aplikasi lebih berskala dan boleh diguna semula.

• API Komposisi boleh dipasang secara global atau diimport ke dalam komponen tertentu apabila diminta.
• Gunakan API Komposisi untuk membina aplikasi senarai membeli -belah untuk menambah dan mengeluarkan item. Status permohonan dan kaedahnya ditakrifkan dalam kaedah
.
• setup API Komposisi meningkatkan bagaimana kaedah dan keadaan komponen ditangani untuk menjadikannya lebih mudah dan responsif. Ia boleh digunakan bersempena dengan API Pilihan dan menyediakan keadaan yang lebih fleksibel dan responsif untuk pengurusan negeri yang lebih baik.

Penyediaan:

Anda memerlukan asas -asas HTML, CSS, JavaScript dan VUE, serta editor teks, pelayar web, Node.js dan Vue CLI.

Tetapkan Vue App:

pemasangan global Vue CLI:

npm install -g vue-cli

Buat projek:

vue create vueshoppinglist

Masukkan direktori projek dan mulakan pelayan pembangunan:

Permohonan

akan dijalankan dalam

cd vueshoppinglist
npm run serve

.

localhost:8080

Memasang dan menggunakan API Komposisi:

Memasang API Komposisi:

Daftar secara global dalam

npm install --save @vue/composition-api

Komposisi API:

2. src/main.vue

Membina antara muka pengguna:

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

3 Kemudian, import dan gunakan komponen

dalam

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

Ringkasan: App.vue ShoppingList.vue

Kami telah membina aplikasi senarai membeli -belah yang mudah menggunakan API Komposisi Vue 3. Penggunaan API Komposisi dalam Vue 2 juga bernilai memberi perhatian kepada. Kelebihan utamanya adalah kaedah yang lebih mudah diakses dan pemprosesan keadaan komponen, serta ciri -ciri responsifnya.

FAQ:

(dipermudahkan, elakkan duplikasi)

Versi ini telah membuat penulisan semula teks yang lebih baik dan mengekalkan kedudukan dan format imej. Intinya adalah untuk mengatur dan mengulas bahagian kod dengan lebih jelas untuk menjadikannya lebih mudah difahami. Pada masa yang sama, struktur artikel juga telah diselaraskan untuk menjadikannya lebih lancar dan mudah dibaca.

Atas ialah kandungan terperinci Bina aplikasi Senarai Belanja dengan API Komposisi Vue 3.0. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!