购物车列表渲染

1.将 mock 文件夹放入 public 文件夹，模仿后台，这个时候可以通过/mock/cart.json 的方式访问到相应的 json 文件，但是要注意把浏览器地址栏的#删掉，要不然是访问不到的。
2.用 axios 访问后台拿数据，因为现在没有后台，就用 mock 来模拟一个。这里为什么安装 vue-axios 这个插件呢。首先如果不用这个插件，那么就需要在使用 axios 的时候提前导入，例如

import axios from "axios"
​

然后通过，axios.get()，里边里边的参数为访问地址，例如 https://api/v1/getlist
但是如果采用了 vue-axios 这个组件，那么 vue 会把 axios 封装成为一个 vue 对象，那么通过 this 就可以直接访问的到，不需要再引入 axios 这个组件了。如下方式

this.axios.get();
​

3.如何获取 axios 返回的数据，如：
这里是第一种方式，这样的嵌套函数是没有作用域的，所以在函数内部也可以使用 this，如果没有这个，而采取的第二种方式

this.axios.get("/mock/cart.json").then((response) => {
                    window.console.log(response);
                });
​

这种方式会有作用域的概念，即在函数中就不能使用 this 了，这个地方可以类比与微信小程序中，必须在外部将 this 指针保存成一个 that 才能在内部使用。

this.axios.get("/mock/cart.json").then(function(response){
                    window.console.log(response);
                });
​

取出里边的数据基本上是和小程序一致的，

this.axios.get("/mock/cart.json").then((response) => {
                    window.console.log(response);
                    let res = response.data;
                    this.cartList = res.data;
                });
​

4.列表渲染
v-for 指令，写到要循环渲染的那个标签上，item in cartList，那么 item 就是那个数组里的一个元素
绑定 src 属性：

<img v-bind:src="'/imgs/' + item.productImage">
​

绑定文字：

<div class="item-name">{{item.productName}}</div>
​

内部赋值计算

<div class="item-price-total">￥{{item.productNum*item.productPrice}}元</div>
​

绑定 class

<a href="javascipt:;" class="checkbox-btn item-check-btn" v-bind:class="{'checked':item.checked}">
​

v-for 指令后加上 id，提高渲染效率

<li v-for="item in cartList" v-bind:key="item.productId">
​