Vue实战记录(3)

2019.10.4----请求数据，组件传值、数据渲染

1、首页的结构是循环结构（标签页+content)，这里的content是父组件（同时也属于公共组件）,content又包括轮播图，分类宫格，商品列表这三个公共子组件。其结构一样，但是要根据请求到的数据进行对应的渲染。

在首页的index文件里面created周期里面Axios请求后端接口数据，将请求得到数据保存到组件的data属性中。index里面的content绑定属性拿到请求到的数据。

2、父组件传值通过props拿到父组件的属性值

3、子组件拿到父组件传过来的值之后必要的话需要对数据进行处理成方便取值渲染的格式

因为函数return 的就是可以渲染的数据，当然可以v-for函数了

4、路由传参编程式导航实现的有点击category类别可以跳转到goodslist商品列表里面以及点击goodslist商品列表可以跳转到goodsbuy购买详情组件

category类别

绑定事件，传递参数的编程式导航

跳转到goodslist组件里面在请求数据时候是进行带参数的请求，这样才能请求到与字段想对应的数据渲染到正确的页面

goodslist商品列表

绑定事件，传递参数的编程式导航

跳转到goodsbuy组件里面在请求数据时候是进行带参数的请求，这样才能请求到与字段想对应的数据渲染到正确的页面

对于请求到的数据复杂时，可以先做一些简单的处理，一一存储的data属性里面。确保需要的数据可以准确拿到

5、为了减少同数据重复发送请求，在路由视图里面加上keep-alive缓存

但是对于商品详情列表，就需要点击的时候重新发送请求，而不能使用缓存，基本点击的都是新的商品

原文地址：https://www.cnblogs.com/zyl0123/p/11622300.html

时间： 2024-10-10 21:19:10

Vue实战记录(3)的相关文章

Vue实战记录（2）

2019.10.2----路由组件.静态布局 1.继续使用vant完成部分页面布局以及手写一个页面布局,对于vant需要现在main.js里面进行全局注册 2.对于需要重复出现在多个页面的部分进行独立成公共组件,建立好组件之后在main.js里面进行全局注册,然后那里需要就在哪里使用.注册全局组件如下 3.路由嵌套,某个路由组件下面还有<router-view>时,建立的路由列表要注意是一级还是二级,是应在存在于哪个<router-view>中例如我建立的商品详情组件是属于一级

Vue实战记录(1)---仅供自己参考

2019.10.1------底部标签栏 1.公共组件标签栏使用vant的Tabbar标签栏首先需要安装vant依赖并在main.js里面按需引入不要永远只写静态布局,把标签元素里面使用的属性存在组件的data里面(数组里面存放对象,方便获取),利用v-for以及属性绑定的方式生成页面结构. 2.编程式导航实现路由的跳转这个vant标签栏自带to属性实现路由跳转我们自己运用编程式的方式实现(这个标签栏自带change事件切换标签时触发) change事件方法实现

vue实战二

VUE 项目实战2 ----------------------------------------------- <template> <div id="app">  <router-view></router-view> <!-- <NavBottomView v-show=&q

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十一║Vue实战：开发环境搭建【详细版】

系列教程一目录:.netcore+vue 前后端分离系列教程二目录:DDD领域驱动设计系列教程三目录:Nuxt.js TiBug系统系列教程四目录:VueAdmin 后台管理系统系列教程五目录:IdentityServer4 授权服务器本文梯子缘起零.今天要完成左下角红色的部分 A.Vue 常见的IDE —— 我是开发工具,干活的都是我 1.VsCode 2.Webstorm 3.Atom B.安装Nodejs环境 —— 我是运行环境,没我不行 C.安装 npm / cnpm ——

vue实战(一):利用vue与ajax实现增删改查

vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> <%@ include file="../commons/taglib.jsp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.

云端大数据实战记录-大数据推荐

(转载请注明出处:http://blog.csdn.net/buptgshengod) 1.背景这是博主第一次大数据实战的经历,之前都是自己写一些算法然后测试很小的数量级.这次是真正接触到TB集的数据,而且完全是在云端处理.下面就把这次的经历简单分享一下. 首先简单介绍一下这次比赛的环境吧: 1.云:采用的是阿里云 2.数据:从四月十五号到八月十五号期间,用户两千多万的购买行为(包括时间,购买.收藏.购物车的次数) 3.工具:阿里提供的xlab(里面有很多算法,随机森林.逻辑回归.knn等).

vue 使用记录

vue 使用记录 1.路径:http://localhost:8081/#/test?name=1 <router-link :to="{path:'/test',query: {name: id}}">跳转</router-link>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router-link :to="'/test/'+id"&g

vue实战使用ajax请求后台数据（小白）

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

vue+vue-router+axios+element-ui构建vue实战项目之七（渲染content.vue内容）

在上一节<vue+vue-router+axios+element-ui构建vue实战项目之六(渲染index.vue列表)>中,我们从后端接口获取数据,并成功渲染出一个列表. 这节内容,我们来做内容页面. 编写src/page/content.vue 文件话不多说,直接上代码 1 <template> 2 <div> 3 <h3>{{getMsg.title}}</h3> 4 <p>作者:{{getMsg.author.login