前端实践VUE

1:环境搭建

首先我们需要配置下环境,安装node.js,可以方便编译vue文件,配置vue-cli,配置淘宝镜像,这些都ok后,就可以开始导入项目,这里推荐使用开发工具visualCode.具体方法百度.

2:路由,vue中最常见的就是路由机制,它可以做跳转传参操作,在认识路由之前我们首先爱你必须先了解下vue的生命周期,跟android中activity一样,进入一个vue界面时候有如下生命周期:

vue.png

接着就是路由传参了:

js.png

首先路由可以配置父子关系,这里上图中默认就是会显示newOperationalIndicator界面,然后把与该界面相关的跳转的vue可以写到这个里面如operationalIndicatorDetailAddress,其中path中如果加了一个:time,这个代表的就是加在请求头部的参数,会显示在地址栏的,使用时候这样

<router-link :to="'/path/xxx/xxxx/需要跳转的页面/'+参数">

当请求数据很多是集合时候,这里就不再适用了,因为路由传参在刷新后就不会被保存,

这里推荐用缓存,首先在原有vue中设置值:

sessionStorage.setItem('deploymentPointData', JSON.stringify(response.data.bo));

然后在目标vue中的created()方法中获取该值:

this.deploymentPointData = JSON.parse(sessionStorage.getItem('deploymentPointData'));

这样就可以实现参数传递操作.

3:接口+数据:

与后台交互时候可以这样做:

1:在data中指定数据类型,具体形参

png

在mounted()中请求首次进入的接口数据:

png

vue中数据采用绑定机制,这里当tableDataName被重新赋值后页面会自动刷新.

好了,最后上一个效果图:

png