一业踢、簡介
武林至尊栗柒，寶刀React，號令天下知举，莫敢不從瞬沦，Vue不出，誰與爭鋒
本文介紹Vue全家桶：Vue+Vue-router+Vuex+axios雇锡。
二逛钻、Vue
Vue 是一套用于構建用戶界面的漸進式框架，和React锰提，都自稱自己只關注視圖層
1.引入Vue
- 開發(fā)環(huán)境：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生產(chǎn)環(huán)境：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.一個小demo
在完成Vue都引入后曙痘，再分別 編寫DOM 和 新建Vue實例：
<!-- 兩對花括號{{}} 為模版語法。
這里渲染message變量立肘，也就是下面new Vue時data.message -->
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app', // 選擇器边坤，用來找到id為app的DOM節(jié)點
data: { // data屬性用來存儲數(shù)據(jù)
message: 'Hello Vue!'
}
})
此時，如果頁面顯示了Hello Vue!谅年，說明Vue正常工作茧痒。
具體文檔請看 Vue官方教程
三、Vue-router
1.功能
Vue-router可以幫你：
- 嵌套的路由/視圖表
- 模塊化的融蹂、基于組件的路由配置
- 路由參數(shù)旺订、查詢、通配符
- 基于 Vue.js 過渡系統(tǒng)的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式超燃，在 IE9 中自動降級
- 自定義的滾動條行為
2.示例
例子請看Vue-Router官方例子
四区拳、Vuex
如同React有Redux一樣，Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式意乓，適合開發(fā)大型單頁應用樱调。
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
具體見 Vuex官方教程
五、axios
1.簡介
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，它可以幫你：
- 從瀏覽器中創(chuàng)建 XMLHttpRequest
- 從 node.js 發(fā)出 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數(shù)據(jù)
- 取消請求
- 自動轉換JSON數(shù)據(jù)
- 客戶端支持防止 CSRF/XSRF
2.一個小demo
// 創(chuàng)建示例
const instance = axios.create();
// 指定超時時間
instance.defaults.timeout = 2500;
// get請求longRequest本涕， 為這個接口單獨指定5s的超時時間
instance.get('/longRequest', {
timeout: 5000
});
// 正常get請求
axios.get('/user?ID=12345')
.then(function (response) {
// 處理成功返回
console.log(response);
})
.catch(function (error) {
// 處理錯誤
console.log(error);
})
.finally(function () {
// 處理無論成功/失敗都執(zhí)行的代碼
});
API具體見文檔 axios-github
（完）
