一、簡介
武林至尊,寶刀React,號令天下,莫敢不從,Vue不出,誰與爭鋒
本文介紹Vue全家桶:Vue+Vue-router+Vuex+axios。
二、Vue
Vue 是一套用于構建用戶界面的漸進式框架,和React,都自稱自己只關注視圖層
1.引入Vue
- 開發環境:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- 生產環境:
<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節點
data: { // data屬性用來存儲數據
message: 'Hello Vue!'
}
})
此時,如果頁面顯示了Hello Vue!
,說明Vue正常工作。
具體文檔請看 Vue官方教程
三、Vue-router
1.功能
Vue-router可以幫你:
- 嵌套的路由/視圖表
- 模塊化的、基于組件的路由配置
- 路由參數、查詢、通配符
- 基于 Vue.js 過渡系統的視圖過渡效果
- 細粒度的導航控制
- 帶有自動激活的 CSS class 的鏈接
- HTML5 歷史模式或 hash 模式,在 IE9 中自動降級
- 自定義的滾動條行為
2.示例
例子請看Vue-Router官方例子
四、Vuex
如同React有Redux一樣,Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式,適合開發大型單頁應用。
new Vue({
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
})
具體見 Vuex官方教程
五、axios
1.簡介
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,它可以幫你:
- 從瀏覽器中創建 XMLHttpRequest
- 從 node.js 發出 http 請求
- 支持 Promise API
- 攔截請求和響應
- 轉換請求和響應數據
- 取消請求
- 自動轉換JSON數據
- 客戶端支持防止 CSRF/XSRF
2.一個小demo
// 創建示例
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 () {
// 處理無論成功/失敗都執行的代碼
});
API具體見文檔 axios-github
(完)