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

前言: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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏郭少华

(第二季)Vue2.0-全局API

全局API并不在构造器里,而是先声明全局变量或者直接在Vue上定义一些新功能,Vue内置了一些全局API,说的简单些就是,在构造器外部用Vue提供给我们的API...

11810
来自专栏技术墨客

React 非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有...

10420
来自专栏机器学习实践二三事

Shell && Vim快捷键

刚买到了自己一直想买的HHKB pro 2 type S,不得不说手感什么的确实没让我失望,重点是Ctrl的位置很适合类unix环境啊,不会快捷键都不好意思敲这...

21150
来自专栏河湾欢儿的专栏

Vue.js组件

组件: 顾名思义, 也就是组成的部件, 即整体的组成部分 这个组成部分是可以缺少的,但是其存在的意义是无可替代的 这个组成部分也是可以复用的 全局方法一:...

22640
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

一、表单输入绑定 1.1、基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,...

506140
来自专栏超然的博客

不容忽略的——CSS规范

         当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

12120
来自专栏技术墨客

React学习(6)—— 高阶应用:非受控组件

在大部分情况下,推荐使用 受控组件 来实现表单、输入框等状态控制。在受控组件中,表单等数据都有React组件自己处理。这里将介绍另外一种非受控组件,表单的数据有...

6420
来自专栏前端说吧

vue - 父组件数据变化控制子组件类名切换

先说当时的思路和实现 核心是父子组件传值和v-bind指令动态绑定class实现

15410
来自专栏Java帮帮-微信公众号-技术文章全总结

JSP简单入门(3)

3、<jsp:param>标签 当使用<jsp:include>标签和<jsp:forward>标签引入或将请求转发给的资源是一个能动态执行的程序时,还可以使用...

31240
来自专栏Golang语言社区

golang简单位运算示例

文实例讲述了golang简单位运算。分享给大家供大家参考,具体如下: // http://play.golang.org/p/idG7Ri_krU packa...

36890

扫码关注云+社区

领取腾讯云代金券