没时间学 Vue (9) —— 小结（一）：绑定 + 渲染 + 事件处理，你已经很厉害了

到这里，我们已经把最核心的 绑定、渲染和事件处理的内容都说了一遍。

如果你把之前的思考题都做了一遍，那么，恭喜你，你现在已经很厉害了！

现在，让我们一起来见证，一个内功扎实的你是如何的优秀。

 

1、内容回顾

---

分类	内容	要点
简介	没时间学 Vue (1) -—— 开篇	花时间掌握关键点 —— 思路总体正确即可，其余的交给搜索引擎 前端开发的本质，就是写各种各样的 HTML 元素 常用的参考网站：现代 JavaScript 教程、网道 JavaScript 教程、CSS 速查手册、 MDN HTML 教程、 MDN CSS 教程、MDN WEB 开发教程
绑定	没时间学 Vue (2) —— 绑定（一）：简介	{{ }} 以及表达式 模板渲染 (Mustache) 充分发挥想象力和创造力、灵活运用模板化渲染的各种功能，才是折腾 Vue 的正确姿势。
	没时间学 Vue (3) —— 绑定（二）：v-bind 和 v-model	所有的 attribute 绑定，都得用 v-bind v-bind 可以简写成冒号(:)，不要看漏了 输入类组件的绑定用 v-model v-model 是双向 “绑定”，可以拿到用户输入的数据
	没时间学 Vue (4) —— 绑定（三）：面向各种文本框的 v-model	第一性原理： 1）理解本质 —— HTML 原生的元素是怎么用的; 2）推导用法 —— 试着用 Vue 来简化 HTML 的用法，同时写一些简单的测试代码来验证我们推导出来的用法。 单行文本框 <input type="text"> 其他风格的文本框 <input type="xxx"> 多行文本框 <textarea>
	没时间学 Vue (5) —— 绑定（四）：面向单选、复选和选择框的 v-model	最为混乱的组件小团体，注意写法和 v-model 的使用方式 ~~~ 单选按钮 <input type="radio"> 复选框 <input type="checkbox"> 选择框 <select>
渲染	没时间学 Vue (6) —— 渲染（一）：列表渲染 v-for	v-for —— 动态的、可以批量生成多个、具有相同格式的组件的技术 JavaScript 原生的 for ... in 和 for ... of JavaScript 原生的 Array.forEach()
	没时间学 Vue (7) —— 渲染（二）：条件渲染 v-if	v-if v-else、v-else-if v-if 与 v-for 的混合使用 v-show （与 v-if 的差别）
事件处理	没时间学 Vue (8) —— 事件处理（一）：简单 DOM 事件的处理方式	v-on 和简写 @ 参数传递 调用 data 和 methods 中的内容要加 this 常见的原生 DOM 事件

 

2、展现实力

---

有了上面这些神功护体，我们就能做很多很复杂的前端应用了。比如说下面这个 【模拟购物车】的功能。

最终效果：

   

 

初看上去好像很难，拆解成一块一块之后，你会发现其实完全在可以轻松搞定的范围之内。

1）第 1 步：显示所有的商品

 

2）第 2 步：加入查询功能，显示符合查询条件的商品

- 新增 matchedItems 数据，用来表示符合检索条件的商品的列表；

- 点击【查询】按钮时，根据查询条件重新计算 matchedItems 的值。

Array.filter() 的参考资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter。

 

3）第 3 步：新增显示购物车内容的组件（不写具体的逻辑，只写数据绑定，同时用假数据验证绑定写得是否正确）

 

4）第 4 步：补充 “加入购物车” 的处理

【加入购物车】按钮按下的时候，要做哪些处理呢？

- 把本行对应的商品、加入到 购物车中的商品列表 中。

  要使用 Array.push() 函数。参照：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push。

- 更新购物车中所有商品的总价。

  可以遍历所有购物车中的商品（for ... of 或者 Array.forEach），也可以只是在现有的总价基础上加上新的商品的价格。

没有头绪的话，可以参考下面的提示。

 

5）第 5 步：加入 “移出购物车” 的处理

【移出购物车】按钮按下的时候，要做哪些处理呢？

- 把本行对应的商品、从 购物车中的商品列表 中删除。

  由于同一个商品可能会被添加多次到购物车中，所以我们要按照 列表中的 index 来删除。

  具体会使用 Array.splice() 函数，可以参照：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice。

- 更新购物车中所有商品的总价。

  可以遍历所有购物车中的商品（for ... of 或者 Array.forEach），也可以只是在现有的总价基础上减去要移出的商品的价格。

如果还没有头绪，可以看看下面的提示代码：

 

6）第 6 步：加入 “清空购物车” 的处理

【移出购物车】按钮按下的时候，要做哪些处理呢？

- 清空 购物车中的商品列表 。直接 = [] 就行了。

- 充值 购物车中所有商品的总价。直接 = 0 就行了。

 

大功告成！

都说了，你已经很厉害很厉害了 👍👍👍

从下一篇起，咱们就要贴近实战了，加油吧骚年！