前言：GitHub：https://github.com/Ewall1106/mall（请选择分支17）
1、基础语法
（1）v-for语法
https://cn.vuejs.org/v2/guide/list.html
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
vue官网
（2）模板语法
https://cn.vuejs.org/v2/guide/syntax.html
我们获取到的值要用模板语法将值插入到页面中， 数据绑定最常见的形式就是使用Mustache语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
（3）父子组件之间的传值
https://cn.vuejs.org/v2/guide/components-props.html
在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
vue官网
具体我们在项目中动手实现简单的传值。
2、项目运用
（1）数据赋值于data中
上一篇我们用axios获取了数据并打印了，现在我们先把数据赋值data的属性中。
赋值
（2）传值给轮播图子组件
- ① 通过
v-bind动态赋值，把轮播图这个数据对象传递给轮播图组件carousel。
父组件传值
:是v-bind的简写形式
- ② 子组件接收数据
子组件什么接收数据呢？很简单，在props中定义属性名就可以了；
然后用type定义一下传过来的数据类型，进行验证；default属性则是定了个默认值。
子组件接收值
- ③ 接下来就是用
v-for循环把数据渲染到页面上
数据渲染
ok，至此为止，父子组件的基本传值就是这样了。
（3）分类模块
跟轮播图组件渲染数据的模式大同小异，不过多阐述。
分类模块数据渲染
（4）推荐模块
这是除了使用前面提到的列表渲染外，就是使用Mustache语法 (双大括号) 的文本插值了。
推荐模块数据渲染
3、章结
至此，我们就将首页的mock数据从建立—>到访问—>渲染到页面的一个基本的流程走完了，后面我们根据页面的拓展会对mock数据进行修改和添加，所以请实时关注；再者，当请求数据的接口多了，这样写axios肯定会麻烦，所以后面也会对axios进行下统一的封装。
参考学习
https://cn.vuejs.org/v2/guide/list.html
https://cn.vuejs.org/v2/guide/syntax.html
https://github.com/Ewall1106/mall
网友评论