Vue.js 2 项目实战（五）：水果购物车

前言

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的计划目标是通过采用易于上手的布局和强大的功能，使前端开发变得更加简便和高效。以下是 Vue.js 的一些关键特性和优点：
核心特性

• 声明式渲染
  
  
  
  • Vue.js 使用声明式语法来描述用户界面，数据和视图是双向绑定的。当数据变革时，视图会自动更新。
    
  
  
• 组件系统
  
  
  
  • Vue.js 提供了一个机动的组件系统，允许开发者将 UI 分解成可复用的组件，每个组件都有自己的逻辑和样式。
    
  
  
• 单文件组件 (SFC)
  
  
  
  • Vue.js 允许开发者将 HTML、CSS 和 JavaScript 放在同一个 .vue 文件中，如许可以更容易地管理组件。
    
  
  
• 虚拟 DOM
  
  
  
  • Vue.js 使用虚拟 DOM 来优化更新过程，通过最小化现实 DOM 操纵来进步性能。
    
  
  
• 反应式数据绑定
  
  
  
  • Vue.js 提供了响应式的数据绑定系统，使得数据与 DOM 之间的同步变得简单和高效。
    
  
  
• 指令
  
  
  
  • Vue.js 提供了一组内置指令（如 v-bind、v-model 和 v-for），帮助开发者轻松地操纵 DOM。
    
  
  

优点

• 易于上手
  
  
  
  • Vue.js 的学习曲线较低，适合新手入门，而且文档详细、社区活跃。
    
  
  
• 机动性
  
  
  
  • Vue.js 可以与现有项目集成，也可以用于构建复杂的单页面应用（SPA）。
    
  
  
• 性能高效
  
  
  
  • 得益于虚拟 DOM 和响应式系统，Vue.js 在处理大量数据更新时表现出色。
    
  
  
• 生态系统
  
  
  
  • Vue.js 拥有丰富的生态系统，包罗 Vue Router、Vuex、Vue CLI 等工具和库，支持开发者在不同场景下使用。
    
  
  
• 强大的社区支持
  
  
  
  • Vue.js 有一个环球活跃的社区，提供了大量的插件、教程和支持资源。
    
  
  

知识点

1. v-if v-else 条件渲染，如果没有数据则显示空车
2. v-for 循环遍历渲染数组
3. v-bind 绑定 class 设置条件
4. v-model 绑定属性
5. v-bind 绑定 src
6. 插值语法
7. @click 点击事件实现数量加减
8. filter() 方法更新数组达到删除元素的效果
9. find() 方法通过 id 找到对应的水果
10. :disabled 动态属性绑定限制用户
11. 盘算属性完备写法实现全选的两个功能 
12. every() 方法检查每一个元素
13. foreach() 方法设置每一个元素 
14. some() 方法实现如果有恣意一个按钮不是 true，则全选，反之取消全部选择
15. reduce() 方法盘算总价与数量
16. 判定条件实现没有选中的则不添加
项目效果

初始页面

添加水果

全选按钮

删除水果

当地缓存

源代码

index.css

1. .app-container {
2.   padding-bottom: 300px;
3.   width: 800px;
4.   margin: 0 auto;
5. }
6. @media screen and (max-width: 800px) {
7.   .app-container {
8.     width: 600px;
9.   }
10. }
11. .app-container .banner-box {
12.   border-radius: 20px;
13.   overflow: hidden;
14.   margin-bottom: 10px;
15. }
16. .app-container .banner-box img {
17.   width: 100%;
18. }
19. .app-container .nav-box {
20.   background: #ddedec;
21.   height: 60px;
22.   border-radius: 10px;
23.   padding-left: 20px;
24.   display: flex;
25.   align-items: center;
26. }
27. .app-container .nav-box .my-nav {
28.   display: inline-block;
29.   background: #5fca71;
30.   border-radius: 5px;
31.   width: 90px;
32.   height: 35px;
33.   color: white;
34.   text-align: center;
35.   line-height: 35px;
36.   margin-right: 10px;
37. }
39. .breadcrumb {
40.   font-size: 16px;
41.   color: gray;
42. }
43. .table {
44.   width: 100%;
45.   text-align: left;
46.   border-radius: 2px 2px 0 0;
47.   border-collapse: separate;
48.   border-spacing: 0;
49. }
50. .th {
51.   color: rgba(0, 0, 0, 0.85);
52.   font-weight: 500;
53.   text-align: left;
54.   background: #fafafa;
55.   border-bottom: 1px solid #f0f0f0;
56.   transition: background 0.3s ease;
57. }
58. .th.num-th {
59.   flex: 1.5;
60. }
61. .th {
62.   text-align: center;
63. }
64. .th:nth-child(4),
65. .th:nth-child(5),
66. .th:nth-child(6),
67. .th:nth-child(7) {
68.   text-align: center;
69. }
70. .th.th-pic {
71.   flex: 1.3;
72. }
73. .th:nth-child(6) {
74.   flex: 1.3;
75. }
77. .th,
78. .td {
79.   position: relative;
80.   padding: 16px 16px;
81.   overflow-wrap: break-word;
82.   flex: 1;
83. }
84. .pick-td {
85.   font-size: 14px;
86. }
87. .main,
88. .empty {
89.   border: 1px solid #f0f0f0;
90.   margin-top: 10px;
91. }
92. .tr {
93.   display: flex;
94.   cursor: pointer;
95.   border-bottom: 1px solid #ebeef5;
96. }
97. .tr.active {
98.   background-color: #f5f7fa;
99. }
100. .td {
101.   display: flex;
102.   justify-content: center;
103.   align-items: center;
104. }
106. .table img {
107.   width: 100px;
108.   height: 100px;
109. }
111. button {
112.   outline: 0;
113.   box-shadow: none;
114.   color: #fff;
115.   background: #d9363e;
116.   border-color: #d9363e;
117.   color: #fff;
118.   background: #d9363e;
119.   border-color: #d9363e;
120.   line-height: 1.5715;
121.   position: relative;
122.   display: inline-block;
123.   font-weight: 400;
124.   white-space: nowrap;
125.   text-align: center;
126.   background-image: none;
127.   border: 1px solid transparent;
128.   box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
129.   cursor: pointer;
130.   transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
131.   -webkit-user-select: none;
132.   -moz-user-select: none;
133.   -ms-user-select: none;
134.   user-select: none;
135.   touch-action: manipulation;
136.   height: 32px;
137.   padding: 4px 15px;
138.   font-size: 14px;
139.   border-radius: 2px;
140. }
141. button.pay {
142.   background-color: #3f85ed;
143.   margin-left: 20px;
144. }
146. .bottom {
147.   height: 60px;
148.   display: flex;
149.   align-items: center;
150.   justify-content: space-between;
151.   padding-right: 20px;
152.   border: 1px solid #f0f0f0;
153.   border-top: none;
154.   padding-left: 20px;
155. }
156. .right-box {
157.   display: flex;
158.   align-items: center;
159. }
160. .check-all {
161.   cursor: pointer;
162. }
163. .price {
164.   color: hotpink;
165.   font-size: 30px;
166.   font-weight: 700;
167. }
168. .price-box {
169.   display: flex;
170.   align-items: center;
171. }
172. .empty {
173.   padding: 20px;
174.   text-align: center;
175.   font-size: 30px;
176.   color: #909399;
177. }
178. .my-input-number {
179.   display: flex;
180. }
181. .my-input-number button {
182.   height: 40px;
183.   color: #333;
184.   border: 1px solid #dcdfe6;
185.   background-color: #f5f7fa;
186. }
187. .my-input-number button:disabled {
188.   cursor: not-allowed!important;
189. }
190. .my-input-number .my-input__inner {
191.   height: 40px;
192.   width: 50px;
193.   padding: 0;
194.   border: none;
195.   border-top: 1px solid #dcdfe6;
196.   border-bottom: 1px solid #dcdfe6;

复制代码

inputnumber.css

1. .my-input-number {
2.   position: relative;
3.   display: inline-block;
4.   width: 140px;
5.   line-height: 38px;
6. }
7. .my-input-number span {
8.   -moz-user-select: none;
9.   -webkit-user-select: none;
10.   -ms-user-select: none;
11. }
12. .my-input-number .my-input {
13.   display: block;
14.   position: relative;
15.   font-size: 14px;
16.   width: 100%;
17. }
18. .my-input-number .my-input__inner {
19.   -webkit-appearance: none;
20.   background-color: #fff;
21.   background-image: none;
22.   border-radius: 4px;
23.   border: 1px solid #dcdfe6;
24.   box-sizing: border-box;
25.   color: #606266;
26.   display: inline-block;
27.   font-size: inherit;
28.   height: 40px;
29.   line-height: 40px;
30.   outline: none;
31.   padding: 0 15px;
32.   transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
33.   width: 100%;
34.   padding-left: 50px;
35.   padding-right: 50px;
36.   text-align: center;
37. }
38. .my-input-number .my-input-number__decrease,
39. .my-input-number .my-input-number__increase {
40.   position: absolute;
41.   z-index: 1;
42.   top: 1px;
43.   width: 40px;
44.   height: auto;
45.   text-align: center;
46.   background: #f5f7fa;
47.   color: #606266;
48.   cursor: pointer;
49.   font-size: 13px;
50. }
51. .my-input-number .my-input-number__decrease {
52.   left: 1px;
53.   border-radius: 4px 0 0 4px;
54.   border-right: 1px solid #dcdfe6;
55. }
56. .my-input-number .my-input-number__increase {
57.   right: 1px;
58.   border-radius: 0 4px 4px 0;
59.   border-left: 1px solid #dcdfe6;
60. }
61. .my-input-number .my-input-number__decrease.is-disabled,
62. .my-input-number .my-input-number__increase.is-disabled {
63.   color: #c0c4cc;
64.   cursor: not-allowed;
65. }

复制代码

html
[code]<!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" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>购物车</title>
  </head>
  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="./img/fruit.jpg" alt="Fruit"></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>