Master the Vue 3 Composition API to build shopping list applications

This article will demonstrate how to build a shopping list application using the Vue 3.0 Composition API and explain its advantages to make its code easier to read and maintain. The Composition API, as an optional new way of creating and organizing components in Vue 3, makes the definition of responsive component logic more intuitive by grouping all code for specific functions (such as search). This will make your application more scalable and reusable.

Core points:

• Vue 3.0 Composition API provides easier access and more intuitive way to define responsive component logic, making applications more scalable and reusable.
• Composition API can be installed globally or imported into specific components on demand.
• Use the Composition API to build shopping list applications to add and remove items. The application status and its methods are defined in the setup method.
• Composition API improves how methods and component states are handled to make them more accessible and responsive. It can be used in conjunction with the Options API and provides more flexible and responsive state for better state management.

Preparation:

You need the basics of HTML, CSS, JavaScript and Vue, as well as text editors, web browsers, Node.js and Vue CLI.

Set Vue app:

1. Global installation of Vue CLI:

npm install -g vue-cli

2. Create a project:

vue create vueshoppinglist

3. Enter the project directory and start the development server:

cd vueshoppinglist
npm run serve

application will run in localhost:8080.

Installing and using Composition API:

1. Installing Composition API:

npm install --save @vue/composition-api

2. Register globally in 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')

Build user interface:

Create a component named ShoppingList.vue (located in the src/components directory) and add the following code:

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

Then, import and use the App.vue component in ShoppingList.vue.

Summary:

We have built a simple shopping list app using the Vue 3 Composition API. The application of Composition API in Vue 2 is also worth paying attention to. Its main advantages are more accessible methods and component state processing, as well as its responsive characteristics.

FAQ: (Simplified, avoid duplication)

This version has made a more streamlined rewrite of the original text and maintained the image position and format. The point is to organize and comment the code sections more clearly to make them easier to understand. At the same time, the article structure has also been adjusted to make it more smooth and easy to read.

The above is the detailed content of Build a Shopping List App with the Vue 3.0 Composition API. For more information, please follow other related articles on the PHP Chinese website!