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
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux系统集群架构线上项目配置实战(四)
- Linux系统集群架构线上项目配置实战 五(完结篇)
- 生产Mysql数据库数据恢复实战过程
- voliate工作实际应用场景
- Linux三剑客命令之Awk
- 面试2万月薪必会知识:AQS
- MyBatis XML详解
- Linux三剑客命令之Sed
- Linux运维必会的100道MySql面试题之(四)
- 开源组件ELK日志系统配置与管理
- MySQL集群高可用架构之MHA
- MySQL 主从同步架构中你不知道的“坑”
- Nginx+keepalived高可用配置实战(内附彩蛋)
- MySQL 主从同步架构中你不知道的“坑”(完结篇)
- 分布式文件系统FastDFS详解