Vue脚手架小练习（购物车）

最新推荐文章于 2024-10-09 16:27:07 发布

weixin_45368324

最新推荐文章于 2024-10-09 16:27:07 发布

阅读量1.5k

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45368324/article/details/106567988

版权

这篇博客通过一个简单的购物车小案例介绍了Vue的实战应用。包括App.vue组件、cart.vue购物车组件、main.js入口文件以及vue.config.js配置文件的实现细节。

摘要由CSDN通过智能技术生成

简单小案例

效果图

在这里插入图片描述

实现

App.vue

<template>
  <div>
    <p>
      <input type="text" v-model="text" />
      <button @click="addGood">加购物车</button>
    </p>
    <ul>
      <li v-for="(good, index) in goods" :key="good.id">
        <span>{
  {good.text}}</span>
        <span>￥{
  {good.price}}</span>
        <button @click="addCart(index)">加购物车</button>
      </li>
    </ul>
    <!-- 购物车 -->
    <Cart :name="name"></Cart>
  </div>
</template>

<script>
import Cart from "./components/Cart";
import axios from "axios";

export default {
  data() {
    return {
      name: "购物车",
      text: "",
      cart: [],
      goods: []
    };
  },
  // 使用es7的async+await 语法
  // async created() {
  //   // 使用axios获取接口数据

  //   // 查询产品列表
  //   try {
  //     const response = await axios.get("/api/goods");
  //     console.log(response);
  //     this.goods = r