VUE入门：vue组件化实现shopping_todos（1）

前言

Vue.js 的组件化是其核心特性之一，它允许开发者将 UI 拆分成可复用的独立单元，即组件。每个 Vue 组件都包含了自己的模板、逻辑和样式，它们是 Vue 应用构建块。组件化开发不仅提高了开发效率，还使得代码更加模块化和易于维护。

初始化

初始化我们的项目，安装vue的基本框架，主要步骤如下：

1. 在终端中输入指令：

npm create vue@latest

2. 为你的项目取名，一路点否
3. 切换到你新创建好的文件夹进行操作
4. 下载依赖包

npm i 

5. 启动你的项目

npm run dev

6. 将vue架构中中对我们现阶段学习无用的文件夹删除，比如assets和components

目标效果

要实现以上效果我们先需要搞清楚这个小demo我们首先现需要这个页面的需求

• 首先我们发现在这个页面中有两个页面，且能实现跳转功能，两个页面相互独立
• 购物车中有许多购买项目，且按钮，购买数量和总价格都为响应式为响应式
• 在todos界面中

组件化开发

在整个界面中，头部的导航栏（购物车，todos）标识是不变的，所以我们需要将他们写进根组件 App.vue 中 。且当点击按钮时会跳转到另一个页���，所以我们可以要为他们绑定点击事件。当点击事件触发时，会跳转到另一个页面

实操：

• 除了根组件外，我们还需要再建造两个组件；说白了就是再建造两个文件来装我们跳转的页面，这里我们使用标签语法，提供 和 标签，之后在js中通过标签和import...from 引入我们建造的这两个文件夹

import Shopping from '../components/Shopping.vue'
import Todos from '../components/Todos.vue'

这就是组件化开发，新建的文件是组件，他们是可复用的独立单元，App.vue是根组件。组件化开发的思想就是------------把一个庞大的项目分出多个组件各自开发，将多个组件引入根组件实现一个界面实现多个页面的跳转。所以接下来我们需要做的事是开发根组件这两个组件。

开发根组件

• 我们首先需要两个按钮，然后为这两个按钮绑定点击事件changeTab
• 引入标签化语法，引入组件
• 可以使用v-if判断，控制两个页面的运行
• 为点击事件传入参数，运作响应式页面
• 关于参数的选择我们可以直接传入参数index=1，2------------与两个页面相对应
• 我们再定义一个tabIndex，当他的值为1时将跳转购物页面

<template>
  <div class="app">
    <button class="btn" @click="changeTab(1)">购物车</button>
    <button class="btn" @click="changeTab(2)">todos</button>

    <!-- shopping -->
    <Shopping v-if="tabIndex === 1"></Shopping>
    <!-- todos -->
    <Todos v-else></Todos>

  </div>
</template>

<script setup>
import { ref } from 'vue'
import Shopping from './components/Shopping.vue'
import Todos from './components/Todos.vue'

let tabIndex = ref(1)

const changeTab = (index) => {
  tabIndex.value = index
}
</script>

<style lang="css" scoped>
.app {
  text-align: center;
}

.btn {
  font-size: 20px;
  width: 100px;
  height: 40px;
  margin: 20px;
}
</style>

最后实现这个效果

购物车

接下来我们需要开发的是购物车页面，开发这个界面需要的数据我已经为大家准备好了

标签表格

制作这个表格，我们可以使用表格标签

1. <table> ：这是用于定义HTML表格的标签。包含了一个或多个<tr>（表格行）、<th>（表格头部单元格）或<td>（表格标准单元格）元素。

2. <tbody> ：这个标签用于组合HTML表格的主体内容。<tbody> 元素应该包含表格的所有行（<tr>），除了表头（<thead>）和表尾（<tfoot>）的内容。

3. <tr> ：定义表格中的一行。一个<tr>元素可以包含多个<th>或<td>元素。

4. <th> ：定义表格中的表头单元格。<th> 元素内部的文本通常会呈现为粗体并且居中。

5. <td> ：定义表格中的标准单元格。

6. <thead> ：这个标签用于组合HTML表格的表头内容。<thead> 元素应该包含至少一个<tr>元素，通常是包含<th>元素的那些行，用于定义列标题。

所以通过css后我们可以制作出如下表格

<template>
    <div class="shopping">
        <table>
            <thead>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </thead>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
                <td >
                    <button>+</button>
                      <span class="counter">6</span>
                    <button>-</button>
                </td>
            </tr>


        </table>
    </div>
</template>

<script setup>

</script>

<style lang="css" scoped>
table {
    width: 100%;
    height: 60%;
    margin: 0 auto;
    border: 1px solid #e9e9e9;
    border-collapse: collapse;// 边框坍塌
    border-spacing: 0;
}

th,
td {
    padding: 8px 16px;
    border: 1px solid #000;
}

.counter {
    margin: 0 5px
}
</style>

数组

我们使用123等等数字代替了需要填入的数字，接下来我们需要拿到数据，做数据的导入工作。数据在数组中，我们先将这些数据变成响应式，通过reactive我们可以轻松做到数组的响应化

import { reactive } from 'vue'

const books = reactive(
    [
        {
            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
        },
    ]
)

使用v-for循环遍历books，将表格中的值设为变量

   <tr v-for="(book, index) in books">
                <td>{{ index + 1 }}</td>
                <td>{{ book.name }}</td>
                <td>{{ book.date }}</td>
                <td>{{ book.price }}</td>
                <td>{{ book.count }}</td>
                <td>
                    <button ">-</button>
                    <span class="counter">{{ book.count }}</span>

                    <button ">+</button>

到现在我们已经基本完成了表格的制作，接下来需要行使js职能

实现交互功能

我们需要实现两个功能

1. 点击加减号时购买数量和价格会对应改变，且数量不能低于0
2. 需要计算出购买的总价格

1.实现按钮功能

为按钮绑定事件decrementCount()和addCount()，为这两个方法打造函数；

• index 我们可以利用函数被执行时被带出来的数组下标index完成对应书本的加减。所以为这个数组传入参数index,对应数组的下标0，1，2，3...
• disabled 当书本购买数量小于0时为减少按钮添加这个属性，这将会为这个按钮添加一个禁用状态，按钮对照的函数将不再能执行，，所以我们可以通过v-bind绑定这个属性，当book.count <= 0为true时，这个属性会被自动添加

 <td>
                        <button :disabled="book.count <= 0" @click="decrementCount(index)">-</button>
                        <span class="counter">{{ book.count }}</span>

                        <button @click="addCount(index)">+</button>
                    </td>

const addCount = (index) => {
    console.log(index);
    books[index].count++
}

const decrementCount = (index) => {
    books[index].count--
}

2.实现计算总数的功能

• computed

计算属性能帮我们很好的监听事件的改变，每当购买数量变更时他都能实时监听。

computed接收一个回调函数，当函数执行时他会帮我们返回其结果。所以我们先定义一个常量totalPrice，将computed的执行结果返回给他。

在打造的计算函数中，循环遍历数组中的每一个item（就是每一个对象，每一本书），将每一个对象的价格和购买数量相乘返回一个计算结果

 <h3>总价格：{{ totalPrice }}</h3>

const totalPrice = computed(() => {
    let total = 0
    books.forEach(item => {
        total += item.price * item.count
    })

    return total
})

最终功能实现

小结

学完这篇文章你应该掌握的知识点：

1. 组件化开发，单界面多页面开发
2. 如何通过绑定同一个事件跳转页面
3. 下标index的多种用法
4. computed()的使用方法