vue2.0實戰


學了幾周的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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM