为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 17、将数据渲染到组件(列表渲染、模板语法、父子组件之...

17、将数据渲染到组件(列表渲染、模板语法、父子组件之间的传值)

2018.09.02 18:15 1730浏览

前言: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 是数组元素迭代的别名。

webp

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给子组件下发数据,子组件通过事件给父组件发送信息。

webp

vue官网

具体我们在项目中动手实现简单的传值。

2、项目运用

(1)数据赋值于data中
上一篇我们用axios获取了数据并打印了,现在我们先把数据赋值data的属性中。

webp

赋值

(2)传值给轮播图子组件

  • ① 通过 v-bind动态赋值,把轮播图这个数据对象传递给轮播图组件carousel。

webp

父组件传值

:是v-bind的简写形式

  • ② 子组件接收数据
    子组件什么接收数据呢?很简单,在props中定义属性名就可以了;
    然后用type定义一下传过来的数据类型,进行验证;default属性则是定了个默认值。

webp

子组件接收值

  • ③ 接下来就是用v-for循环把数据渲染到页面上

webp

数据渲染

ok,至此为止,父子组件的基本传值就是这样了。

(3)分类模块
跟轮播图组件渲染数据的模式大同小异,不过多阐述。

webp

分类模块数据渲染

(4)推荐模块
这是除了使用前面提到的列表渲染外,就是使用Mustache语法 (双大括号) 的文本插值了。

webp

推荐模块数据渲染

3、章结

至此,我们就将首页的mock数据从建立—>到访问—>渲染到页面的一个基本的流程走完了,后面我们根据页面的拓展会对mock数据进行修改和添加,所以请实时关注;再者,当请求数据的接口多了,这样写axios肯定会麻烦,所以后面也会对axios进行下统一的封装。



作者:Ewall_
链接:https://www.jianshu.com/p/f9a16d092ded


点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
83
获赞与收藏
492

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消