Vue全家桶

一、簡介

武林至尊,寶刀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

(完)

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容