2020.7.16
阿新 • • 發佈：2020-07-17
# 今日學習內容
## Vue
###vue-ajax ——> axios 和 vur-resource ，推薦 axios
3.1. vue 專案中常用的 2 個 個 ajax 庫 3.1.1. vue-resource vue 外掛, 非官方庫, vue1.x 使用廣泛 3.1.2. axios 通用的 ajax 請求庫, 官方推薦, vue2.x 使用廣泛 3.2. vue-resource 的使用 3.2.1. 線上文件 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md 3.2.2. 下載 npm install vue-resource --save 3.2.3. 編碼 // 引入模組 import VueResource from 'vue-resource' // 使用外掛 Vue.use(VueResource) // 通過 vue/元件物件傳送 ajax 請求 this.$http.get('/someUrl').then((response) =>axios 和 vur-resource 用法{ // success callback console.log(response.data) //返回結果資料 }, (response) => { // error callback console.log(response.statusText) //錯誤資訊 }) 3.3. axios 的使用 3.3.1. 效果 ajax_test.gif 3.2. 線上文件 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md 3.3. 下載: npm install axios --save 3.4. 編碼 // 引入模組 import axios from 'axios' // 傳送 ajax 請求 axios.get(url) .then(response =>{ console.log(response.data) // 得到返回結果資料 }) .catch(error => { console.log(error.message) }) 3.4. 測試介面 介面 1: https://api.github.com/search/repositories?q=v&sort=stars 介面 2: https://api.github.com/search/users?q=aa
###vue UI 元件庫 ——> mint-ui 和 element-ui 、ant-design
4.1. 常用 1) Mint UI: a. 主頁: http://mint-ui.github.io/#!/zh-cn b. 說明: 餓了麼開源的基於 vue 的移動端 UI 元件庫 2) Elment a. 主頁: http://element-cn.eleme.io/#/zh-CN b. 說明: 餓了麼開源的基於 vue 的 PC 端 UI 元件庫 4.2. 使用 Mint UI 4.2.1. 下載: npm install --save mint-ui 4.2.2. 實現按需打包 1. 下載 npm install --save-dev babel-plugin-component 2. 修改 babel 配置 "plugins": ["transform-runtime",["component", [ { "libraryName": "mint-ui", "style": true } ]]] 4.2.3. mint-ui 元件分類 1) 標籤元件 2) 非標籤元件 4.2.4. 使用 mint-ui 的元件 1) index.html <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></scrip t> <script> if ('addEventListener' in document) { document.addEventListener('DOMContentLoaded', function() { FastClick.attach(document.body); }, false); } if(!window.Promise) { document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" '+'>'+'<'+'/'+'script>'); } </script> 2) main.js import {Button} from 'mint-ui' Vue.component(Button.name, Button) 3) App.vue <template> <mt-button @click="handleClick" type="primary" style="width: 100%">Test</mt-button> </template> <script> import {Toast} from 'mint-ui' export default { methods: { handleClick () { Toast(' 點選了測試'); } } } </script>mint-ui 用法
## vue-router
5.1. 理解 5 .1.1. 說明 1) 官方提供的用來實現 SPA 的 vue 外掛 2) github: https://github.com/vuejs/vue-router 3) 中文文件: http://router.vuejs.org/zh-cn/ 4) 下載: npm install vue-router --save 5 .1.2. 相關 API 說明 1) VueRouter(): 用於建立路由器的構建函式 new VueRouter({ // 多個配置項 }) 2) 路由配置 routes: [ { // 一般路由 path: '/about', component: About }, { // 自動跳轉路由 path: '/', redirect: '/about' } ] 3) 註冊路由器 import router from './router' new Vue({ router }) 4) 使用路由元件標籤 1. <router-link>: 用來生成路由連結 <router-link to="/xxx">Go to XXX</router-link> 2. <router-view>: 用來顯示當前路由元件介面 <router-view></router-view>Vue-router 基本定義
5.2.2. 路由元件 Home.vue About.vue 5.2.3. 應用元件: App.vue <div> <!--路由連結--> <router-link to="/about">About</router-link> <router-link to="/home">Home</router-link> <!--用於渲染當前路由元件--> <router-view></router-view> </div> 5.2.4. 路由器模組: src/router/index.js export default new VueRouter({ routes: [ { path: '/', redirect: '/about' }, { path: '/about', component: About }, { path: '/home', component: Home } ] }) 5.2.5. 註冊路由器: main.js import Vue from 'vue' import router from './router' // 建立 vue 配置路由器 new Vue({ el: '#app', router, render: h => h(app) }) 5.2.6. 優化路由器配置 linkActiveClass: 'active', // 指定選中的路由連結的 class 5.2.7. 總結: 編寫使用路由的 3 步 步 1) 定義路由元件 2) 註冊路由 3) 使用路由 <router-link> <router-view>Vue-router 使用方法
5.3.2. 子路由元件 News.vue Message.vue 5.3.3. 配置巢狀路由: router.js path: '/home', component: home, children: [ { path: 'news', component: News }, { path: 'message', component: Message } ] 5.3.4. 路由連結: Home.vue <router-link to="/home/news">News</router-link> <router-link to="/home/message">Message</router-link> <router-view></route-view>通過 children 巢狀路由
5.4.2. 方式 1: 路由路徑攜帶引數(param/query) 1) 配置路由 children: [ { path: 'mdetail/:id', component: MessageDetail } ] 2) 路由路徑 <router-link :to="'/home/message/mdetail/'+m.id">{{m.title}}</router-link> 3) 路由元件中讀取請求引數 this.$route.params.id 5.4.3. 方式 2: <router-view> 屬性攜帶資料 <router-view :msg="msg"></router-view> 然後在 router-link 指定的 vue 檔案裡的， props 去 加上 msg:String ， <p>{{msg}}</p>向路由元件傳遞資料（params/query、router-view）——>this.$route.params.id
5.5.1. 理解
1) 預設情況下, 被切換的路由元件物件會死亡釋放, 再次回來時是重新建立的
2) 如果可以快取路由元件物件, 可以提高使用者體驗
5.5.2. 編碼實現
<keep-alive>
<router-view></router-view>
</keep-alive>
快取路由元件物件<keep-alive> 提高使用者體驗
5.6.2. 相關 API
1) this.$router.push(path): 相當於點選路由連結(可以返回到當前路由介面)
2) this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由介面)
3) this.$router.back(): 請求(返回)上一個記錄路由
4) this.$router.go(-1): 請求(返回)上一個記錄路由
5) this.$router.go(1): 請求下一個記錄路由
程式設計式路由導航 ——> this.$router