1 首页模块知识点
图标使用iconfont 动态渲染数据使用axios(e sou)发送ajax请求json文件数据,
0.1针对如何使用外部组件 在router下面配置index

0.2 外部组件如何使用局部组件(即是父子组件)?
只需要在外部组件中引用局部组件,然后声明组件即可
例如:

0.3 如何使用ajax获取json数据
第一步:下载 axios插件 他能够实现跨域 能发送不同的请求 使用方法 在外部组件中引入就可与使用

第二步:如何实现父子间传值
引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示:

父组件中定义个data 返回json数据

子组件中接收父组件传来的数据

在头部组件中 通过属性形式传递使用

关于父子组件传值说好了。
1.1接下来来说一下ajax如何获取json数据
1.01 首先要定义一个生命周期函数(mounted 读mang ti) 在生命周期函数中写一个调用方法 也就是当前指向的获取数据this.getHomeInfor

1.02 生命周期函数写完后 我们还需要在methods(读me fors) 写一个调用放法的函数getHomeInfor通过get方式获取ajax请求 异步操作它返回值是一个promise对象,可以.用then(this..getHomeInfoSucc)来表示

1.03 再写一个与之对应的 再写一个与之对应的getHomeInfoSucc(res)方法这个方法就可以接收到模拟数据的结果 ,console.log(res)然后打印结果 res就是resolved(res)这时候如果结果是res就能够访问到json文件

通过router-link to 动态赋值
总结:promise是javascript异步接口的规范,他有三个状态值 pending(异步操作未完成) rejected(异步操作失败)resolve 异步操作已完成
css3 flex布局 弹性盒子
display:flex;
当flex=1时 它能够把盒子等分模块
flex垂直居中

网友评论