前段時間，在項(xiàng)目使用vuejs做了一個SPA應(yīng)用，在此做下總結(jié)以作備忘尉剩。
目前vuejs已經(jīng)發(fā)布了2.4.0版本，我們使用版本是：2.3.3毅臊，其官方推薦ES6語法理茎。
vuejs是數(shù)據(jù)驅(qū)動的MVVM前端框架，其中頻繁的像jquery類似操作dom元素是不推薦的。不過也要看項(xiàng)目中需求功蜓，避免不了頻繁dom操作還是需要引入jquery/zepto操作庫园爷。
一、基本使用介紹
基本語法依照官方文檔：https://vuejs.org/v2/guide/,使用vue-cli可以快速搭建vue應(yīng)用程序結(jié)構(gòu)式撼，使用webpack模板
-
幾個重要語法:
- 雙向綁定：
v-model - 綁定動態(tài)屬性：
v-bind(簡寫 -:) - 綁定事件：
v-on(簡寫 -@) (.prevent - preventDefault(), .stop - stopPropagation...), 方法參數(shù)$event - 事件對象 - 控制流程分支：判斷 -
v-if/v-else-if/v-else; 循環(huán) -v-for - 組件是否顯示：
v-show - 頁面布局： 會使用到
<router-view> - 動效：
<transition>(被包裹組件能有v-show屬性控制) -
$nextTick(callback)(等待下一次DOM渲染時執(zhí)行傳入的回調(diào)) - ...
- 雙向綁定：
-
路由管理
vue-router(版本：2.3.1)
如：
new Router({
base: '<設(shè)置基路徑>',
mode: 'history|hash',
routes: [{
path:'/',
name:'home',
component: Home
}]
});
```
html部分可以使用`<router-link>` 設(shè)置跳轉(zhuǎn)鏈接
`<router-link :to="/home" />` 基于路徑模式跳轉(zhuǎn)
或者 `<router-link :to="{name:'home', params:{paramA:'22',paramB:'cc'}, query:{'back':'true'}}" tag="<生成對應(yīng)tag name童社，為設(shè)置時默認(rèn)生成a元素>" />` 基于router name模式跳轉(zhuǎn)
-
狀態(tài)管理
Vuex(版本：2.3.1) （狀態(tài)值儲存于內(nèi)存中）
當(dāng)涉及到view之間需要傳遞狀態(tài)值時，通持。可以使用router傳遞參數(shù)或者使用事件(發(fā)布/訂閱)模式解決扰楼。此處可以使用官方推薦的vuex做狀態(tài)管理。它將狀態(tài)管理功能提取出來美浦，調(diào)用方dispatch一個操作弦赖，vuex內(nèi)部其實(shí)觸發(fā)mutation操作更新state中的值，后續(xù)獲取方通過getter就能獲取想要的值浦辨。
-
獲取服務(wù)端數(shù)據(jù)
axios(版本：0.16.2)
頁面中很大一部分邏輯是和后端服務(wù)進(jìn)行交互的蹬竖，此處使用的axios發(fā)送服務(wù)請求。
基本使用方法:
import axios from 'axios' axios({ headers: {}, withCredentials: true, url: '請求地址', method: 'HTTP Method', data: <請求數(shù)據(jù)>, timeout: <請求timeout時間> })``` 更多具體使用可參照: [https://www.npmjs.com/package/axios](https://www.npmjs.com/package/axios) *如果*需要使用mock數(shù)據(jù)流酬，此處可使用axios-mock-adapter (版本：1.9.0)
二币厕、拓展使用
-
使用自定義組件
有時為了項(xiàng)目中某些組件能被多個view使用，此時可以將其提出封裝成自定義組件芽腾。
其中自定義組件主要關(guān)鍵是父組件與子組件通訊旦装，父組件向子組件傳遞變量初始值，子組件內(nèi)部的狀態(tài)變化不能直接更改父組件變量值摊滔，通過事件機(jī)制（發(fā)布-訂閱）向父組件通知變化. （子組件內(nèi)部$emit事件阴绢，父組件監(jiān)聽事件變化）子組件定義相應(yīng)props，暴露公共屬性艰躺，同時定義事件/watch關(guān)注內(nèi)部狀態(tài)值變化呻袭，然后發(fā)布事件通知父組件。
另外還有一種組件形式類似表單驗(yàn)證錯誤時彈出的Toast框描滔，此種組件形式可以通過定義好vue template棒妨，再通過Vue.extend(), $mount到頁面上，在封裝成js模塊暴露出來以供使用含长。
同時此種形式的組件也可以使用餓了么開源的mint-ui -
使用自定義命令 directives
vue提供了directives以供開發(fā)者編寫自定義的類似v-model功能，例如伏穆，項(xiàng)目中需要對文本框中的輸入的文本做特定格式化(如銀行卡號格式化每四位加一個空格),此時可考慮編寫directives拘泞。
