vue2.0实战

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

学了几周的vue2.0,终于有时间去做一个应用了。

为了全面联系相关知识，所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0。

项目构建使用官方vue-cli,由于项目较小，使用simple模板。

在2.0中路由不再使用router.start();而路由跳转得组件也有所变化，官方文档很全面。有一点不是很懂，就是关于路由的挂载，本来准备另外写个router.js来挂载路由，可是不太好使，所以全都放在了main.js中。

在首页有页面切换但是并不涉及路由，这里使用了动态组件，并且使用缓存

<keep-alive>
<component :is="currentView" @changeView="change" :data-list="list" :currency-list="currencyList">
<!-- 非活动组件将被缓存！ -->
</component>
</keep-alive>

组件的通信之前的文章说过，这里不再陈述。

axios暂时只有英文文档https://github.com/mzabriskie/axios,不过大同小异，很快就可以入手，axios提供了一个config配置，在配置项中可以对请求的参数在请求前做统一处理，也可以处理返回数据，还有很多，都可以看文档。这里我在写的时候传递数据采用form-data形式，由于有嵌套对象，所以对外层对象格式化之前要把内层对象变为json字符串。在axios用的是qs转化为form-data形式。

mint-ui比较简陋，但是基本的组件都有了，其中也有些坑，比如下拉刷新，

loadTop (id){
//停止下拉刷新
that.$refs.loadmore.onTopLoaded(id);
}

停止下拉刷新时，这里的id是不用传具体值的，组件内部有会做处理，自己只需要按官方写上就可以了。

最后附上github地址https://github.com/Stevenzwzhai/vue-mobile-application

以上是 vue2.0实战 的全部内容， 来源链接： utcz.com/z/374704.html

回到顶部