前言

当我们打开购物软件，准备“清空”购物车，每勾选一件商品，右下角的合计值就会自动增加，这是如何实现的呢，接下来，我将会利用vue的组件化，简单实现一下该功能

正文

1.命令行生成项目文件 在Vscode中我们打开终端输入:npm create vue@latest 会出现几个的问题 第一个是问你项目名称，我们在终端输入我们项目名称即可，接下来的几个问题，我们可以忽略，全部选择NO。

这样我们就利用命令行生成了一个项目文件。除此之外，我们需要一些小操作。我们可以看到生成的项目文件中有许多文件，我们找到src文件夹，只保留App.vue和main.js这两个文件，剩下的文件或者文件夹删除，然后打开main.js 找到第一行的

我们也删除，不需要它。 终端告诉了我们三个操作

cd vue 是进入vue这个文件夹 npm install 是下载依赖，你也可以写npm i npm run dev 则是执行代码，打开端口

点击http://localhost:5173/ 我们就可以进入页面了，值得注意的是，如果5173这个端口被占用时，代码是无法执行的，需要使用另外一个端口就好了。 2.搭建App.vue页面 在App.vue页面，我们就要开始写我们的代码了，首先请大家在VsCode安装一个插件

安装好插件后，我们打开App.vue,删除里面的原有代码，使用快捷方式"vb3s"

就会自动生成一个框架，在style部分我们把scss改成css.

搭建html部分

在页面上我们写了两个按钮，两个按钮都利用vue指令绑定了点击事件changeTab(1) 常用vue-指令

v-for 给dom绑定遍历

在src目录下，我们创建一个components文件夹(虽然我们把原有的删除了，这些都是小问题) 根据需求，我们需要一个购物车页面以及一个todos页面，我们在components文件夹下分别创建shopping.vue和todos.vue文件，同样的我们使用快捷方式"vb3s".接下来我们返回App.vue,在js部分我们将Shopping.vue以及todos.vue导入进来

然后我们就可以把Shopping和todos当标签使用。 现在我们来实现，点击购物车，展现购物车，点击todos展现todos部分。我们利用指令v-if来实现，让v-if判断tabIndex的值，如果是1 则展示购物车，否则展示todos,这里我们默认给tabIndex的值为1.在两个按钮中我们绑定了函数changeTab(index),我们点击按钮，就会修改tabIndex的值，从而完成shopping和todos两个页面之间的切换

那么这个ref是什么呢，因为在这里我们的tabIndex不是一个响应式数据，哪怕你点击无数下，在

中的tabIndex也无法改变，所以我们从vue中导入ref，让tabIndex变成一个响应式数据。注意我们修改响应式数据的值要用xxx.value. 下面是页面的css部分

来到我们的shopping.vue页面，完成开头我们说的添加后总价自动更新

这里写了一个简单的表格，在主要数据部分，我们使用了v-for,给tr绑定了一个for循环，把books对象中的值输入到表格中 在减号按钮中我们使用了vue指令v-bind：的简写，当book.count的值小于0时，就不可以继续该操作了

在Js部分我们导入了{reactive,computed},reactive作用和ref一样的，只不过是reactive是用于引用类型。 computed则是计算属性值，当computed中的变量值变更时，computed就会重新执行一遍，等效于自动更新了。这样我们的总价就会自动更新。