学习了这么久的Vue今天我们来复习并且实战一下Vue的内容，今天的内容是写一个小练习。

模板代码

根据以下图片创建文件，并在其中添加模板代码


<!DOCTYPE html>

<html lang="en">
<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

  <link rel="stylesheet" href="./style.css">

</head>
<body>
  <div id="app"></div>



  <template id="my-app">

    <table>

      <thead>

        <th>序号</th>

        <th>书籍名称</th>

        <th>出版日期</th>

        <th>价格</th>

        <th>购买数量</th>

        <th>操作</th>

      </thead>

      <tbody>

        <tr>

          <td>1</td>

          <td>你不知道的JavaScript</td>

          <td>2009-10</td>

          <td>48.00</td>

          <td>

            <button disabled="true">-</button>

            <span class="counter">1</span>

            <button>+</button>

          </td>

          <td>

            <button>移除</button>

          </td>

        </tr>

      </tbody>

    </table>

    <h2>总价格: 48.00</h2>

  </template>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <script src="./index.js"></script>

</body>

</html>

Vue.createApp({

  template: "#my-app",

  data() {

    return {

      books: [

        {

          id: 1,

          name: '《算法导论》',

          date: '2006-9',

          price: 85.00,

          count: 1

        },

        {

          id: 2,

          name: '《UNIX编程艺术》',

          date: '2006-2',

          price: 59.00,

          count: 1

        },

        {

          id: 3,

          name: '《编程珠玑》',

          date: '2008-10',

          price: 39.00,

          count: 1

        },

        {

          id: 4,

          name: '《代码大全》',

          date: '2006-3',

          price: 128.00,

          count: 1

        },

      ]

    }

  },

  computed: {



  },

  methods: {

    

  }

}).mount("#app");

table {

  border: 1px solid #e9e9e9;

  border-collapse: collapse;

  border-spacing: 0;

}



th, td {

  padding: 8px 16px;

  border: 1px solid #e9e9e9;

  text-align: left;

}



th {

  background-color: #f7f7f7;

  color: #5c6b77;

  font-weight: 600;

}



.counter {

  margin: 0 5px;

}

以上是练习的模板代码，我们需要根据这个模板代码写一个简单的模拟购物车的小demo

要求如下：

实现在页面显示所有书籍
在点击+和-时可以进行数量的修改，并且在等于数量等于0时锁定-
点击移除时需要去除一整行并进行更新
进行操作后实时更新总价格

实际代码

html

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div id="app"></div>

    <template id="my-app">
        <table>
            <thead>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in books">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.date }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="minus(index) " :disabled="item.count===0">-</button>
                        <span class="counter">{{ item.count }}</span>
                        <button @click="add(index)">+</button>
                    </td>
                    <td>
                        <button @click="remove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h2>总价格:{{totalPrice}}</h2>
    </template>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="./index.js"></script>

</body>

</html>

解释

这段Html的代码的作用主要是这样的：

<!DOCTYPE html>: 声明文档类型为 HTML5。
<html lang="en">: HTML 根元素，指定文档的语言为英语。
<head>: 包含了一些关于文档的元数据，比如字符集、视口设置和标题等。
- <meta charset="UTF-8">: 设置字符集为 UTF-8，以支持包含多语言字符的文本。
- <meta http-equiv="X-UA-Compatible" content="IE=edge">: 指示 Internet Explorer 使用最新的渲染引擎。
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 设置视口的宽度等于设备的宽度，并且初始缩放为 1.0。
- <title>Document</title>: 设置文档的标题。
- <link rel="stylesheet" href="./style.css">: 引入样式表，用于美化页面外观。
<body>: 包含了页面的主要内容。
- <div id="app"></div>: Vue 应用的根容器，Vue 将在这里挂载应用。
- <template id="my-app">: Vue 的模板，定义了书籍列表的结构和交互逻辑。
  - <table>: 表格用于展示书籍列表。
    - <thead>: 表头部分，包含列标题。
      - <th>序号</th>, <th>书籍名称</th>, <th>出版日期</th>, <th>价格</th>, <th>购买数量</th>, <th>操作</th>: 列标题。
    - <tbody>: 表格主体部分，包含实际的书籍数据。
      - <tr v-for="(item,index) in books">: 使用 v-for 指令循环渲染书籍列表中的每一本书。
        
        <td>{{ item.id }}</td>, <td>{{ item.name }}</td>, <td>{{ item.date }}</td>, <td>{{ item.price }}</td>: 显示书籍的 id、名称、日期和价格。
        
        <td> 中包含购买数量的控制按钮和显示数量的元素。
        
        <button @click="minus(index)" :disabled="item.count===0">-</button>: 减少数量按钮，点击时调用 minus 方法减少数量，如果数量为 0 则禁用。
        
        <span class="counter">{{ item.count }}</span>: 显示购买数量。
        
        <button @click="add(index)">+</button>: 增加数量按钮，点击时调用 add 方法增加数量。
        
        <td> 中包含移除按钮，点击时调用 remove 方法移除该书籍。
  - <h2>总价格:{{totalPrice}}</h2>: 显示所有书籍的总价格。
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>: 引入 Vue.js 库，用于处理数据绑定和 DOM 渲染。
<script src="./index.js"></script>: 引入应用的 JavaScript 文件，包含 Vue 应用的逻辑代码。

js

代码

Vue.createApp({
    template: "#my-app",
    data() {
      return {
        isShow: true,
        books: [
          {
            id: 1,
            name: '《算法导论》',
            date: '2006-9',
            price: 85.00,
            count: 1
          },
          {
            id: 2,
            name: '《UNIX编程艺术》',
            date: '2006-2',
            price: 59.00,
            count: 1
          },
          {
            id: 3,
            name: '《编程珠玑》',
            date: '2008-10',
            price: 39.00,
            count: 1
          },
          {
            id: 4,
            name: '《代码大全》',
            date: '2006-3',
            price: 128.00,
            count: 1
          },
        ]
      }
    },
    computed: {
      totalPrice() {
        return this.books.reduce((total, book) => total + (book.price * book.count), 0);
      },
      
    },
    methods: {
      add(index){
        this.books[index].count++;
      },
      minus(index){
        if(this.books[index].count > 0)
        this.books[index].count--;
        else return 0;
      },
      remove(index) {
        this.books.splice(index, 1);
        // 更新剩余书籍的序号
        this.books.forEach((book, idx) => {
          book.id = idx + 1;
        });
      }
    }
  }).mount("#app");

解释

Vue.createApp({ ... }): 创建一个 Vue 应用实例。
template: "#my-app": 指定应用的模板为 id 为 "my-app" 的模板，即之前在 <template> 标签中定义的模板内容。
data() { ... }: 定义应用的数据。
- isShow: true: 一个布尔值，用于控制是否显示书籍列表。
- books: [ ... ]: 包含了书籍列表的数组，每本书包括 id、name、date、price 和 count 属性。
computed: { ... }: 定义应用的计算属性。
- totalPrice() { ... }: 计算所有书籍的总价格，通过 reduce 方法遍历所有书籍，累加每本书的价格乘以数量。
methods: { ... }: 定义应用的方法。
- add(index) { ... }: 增加指定索引处书籍的数量。
- minus(index) { ... }: 减少指定索引处书籍的数量，如果数量为 0，则不执行减少操作。
- remove(index) { ... }: 移除指定索引处的书籍，并更新剩余书籍的 id。
mount("#app"): 将应用挂载到 id 为 "app" 的元素上，即将应用的模板渲染到页面中。

总结

这个小demo的作用主要是帮助大家复习一下前面所介绍的Vue的几个模板语法，帮助大家实际开始上手写代码，只有敲在手上才能实际感受代码的作用！！

假如您也和我一样，在准备春招。欢迎加我微信 shunwuyu ，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！

Vue入门（四）：小练习

模板代码

实际代码

html

代码

解释

js

代码

解释

总结