Vue小项目二手书商城:(三)前端渲染数据
实现内容:
- axios取到的数据在前端使用(父子组件各自应该怎么使用)
一.简单使用(在哪取在哪用)
1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop,prop优先级高于data,这个我们稍后讨论),created中的this.xxx就指向data中的数据(简单来说就是先在data中定义)
2.我现在是直接在App.vue中写的getScience、getLiterature、getHumanity取得数据,要在App.vue中直接用的话这样写:
- 图片、书名、作者、价格都看到了
3.但是我们有很多内容,不能一直literature[0]、literature[1]......这样写下去吧,我们可以用v-for
- literature中所有元素都出来了
二.子组件使用(要父传过来,或者我自己用axios取)
我们要在子组件使用可以在子组件重新引入数据,但太麻烦了。数据现在传到父组件App.vue中,我们之前在App.vue中用<router-link></router-link><router-view></router-view>实现点击不同路由呈现不同内容(文学、科学、人文三个组件)。也就是说文学、科学、人文现在是App.vue的子组件。子组件想用父组件的数据,用到prop(它写在子组件中)
1.父组件中这样写,而且data中要有literature[ ]这一项(data是爸爸的钱包,爸爸有钱才能给儿子)
2.子组件中这样写,前面提到prop的优先级比data高,所以写了prop就不用写data了,现在可以直接在子组件literature.vue中使用数据literature了
Vue小项目二手书商城:(三)前端渲染数据的更多相关文章
- Vue小项目二手书商城:(二)axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- Vue小项目二手书商城:(一)准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- Vue小项目二手书商城:(四)详情页和购物车(emit、prop、computed)
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
- Vue小项目二手书商城:(五)参考资料
本项目基于vue2.5.2,如有错误,望指正. 完整程序:https://github.com/M-M-Monica/bukesi Vue.js官方文档:https://cn.vuejs.org/v2 ...
- vue小项目---管理系统
在上一篇文章中我们已经学习了vue的基本语法,常用属性,了解了vue的基本使用,现在让我们用vue配合Bootstrap来完成一个小项目. 首先导入Bootstap文件. <link rel=& ...
- 学习笔记之Python人机交互小项目二:名片管理系统
继上次利用列表相关知识做了简单的人机交互的小项目名字管理系统后,当学习到字典时,老师又让我们结合列表和字典的知识,结合一起做一个名片管理系统,这里分享给在学习Python的伙伴! 1.不使用函数 1 ...
- vue项目echarts画布删除历史数据重新渲染数据
vue用到echarts时,根据select多选下拉框进行echarts折线图渲染.发现折现只能增加不能减少,后来根据echarts API文档发现 调用方式: chart.setOption(opt ...
- angular,vue,react的基本语法—插值表达式,渲染数据,响应式数据
基本语法: 1.插值表达式: vue:{{}} react:{} angular:{{}} 2.渲染数据 vue js: export default{ data(){ return{ msg:&qu ...
- 今天写了一个SSM小项目,运行之后,前端页面的CSS、js样式显示不出来,具体操作如下:
因为SSM中我们设置了拦截器,拦截器会拦截CSS和JS,所有样式渲染不出来,在Web.xml中写上 1 <servlet-mapping> 2 <servlet-name>de ...
随机推荐
- Java博客目录
JavaWeb 1.Tomcat使用 2.Servlet入门 3.JSP&EL&JSTL 4.Listener&Filter Java框架 Hibernate 1.简介及初使用 ...
- python 循环结构 while for...in
# ### 循环结构 while for...in """ 循环结构的特点:减少代码的冗余,提高代码的效率 语法形式: """ # 打印1~ ...
- ORA-27300 ORA-27301 ORA-27302 sskgpcreates
1.环境信息 OS:SUSE 12SP3 DB:12.2.0.1.0 2.数据库启动失败 SQL> startup ORA-27154: post/wait create failed ORA- ...
- VMVare的窗口自适应
啊!好久没来博客园了.原因很简单,我把密码丢了. 最近才从系统申请重置了密码,这不,又能登录了.你可能好奇,是的,我也在疑惑:我是不是搞IT的啊?因为只要密码丢失,我就认为世界完蛋了,我完蛋了:) 这 ...
- Respone弹窗
Response.Write("<script>window.open('default.aspx?iID=" + GridView1.DataKeys[GridVie ...
- 使用Shader制作loading旋转动画
效果图: 1.绕Z轴旋转的旋转矩阵 2.UV旋转的步骤 (1) 由于旋转矩阵是绕原点旋转的,要把要旋转的UV坐标平移到原点 i.uv -= float2(0.5, 0.5); float2 tempU ...
- JavaFX-Application
JavaFX—Application 1.Application是JavaFX程序的入口,任何javafx应用程序程序都要继承该类并重写start()方法 public class TsetStage ...
- FREERTOS学习笔记
2012-02-25 21:43:40 为提升自己对实时操作系统(RTOS)的认识,我学习了freeRTOS. 理解了OS任务的状态.优先级的概念.信号量的概念.互斥的概念.队列.内存管理.这都是和R ...
- linux随
Linux 1991芬兰大学生linus 安全 开源 免费 可靠 (堡垒机)(跳转机) 多用户 多任务 处理并发及速度比windows好很多 命令:ifconfig pwd ls -a -l -t(时 ...
- 加域电脑登陆系统后桌面文件丢失,登录系统提示用户名为“Temp”。
注册表中定位到“HKEY_LOCAL_MACHINE\\\\SOFTWARE\\\\Microsoft\\\\Windows NT\\\\CurrentVersion\\\\ProfileList”, ...