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">
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于