2018-08-30 vue项目实战经验

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垂直居中