2020.7.16

# 今日学习内容

## 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) => {
// 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>

## 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>

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>

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>

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>

5.5.1.  理解

1) 默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
2) 如果可以缓存路由组件对象, 可以提高用户体验

5.5.2.  编码实现

<keep-alive>
<router-view></router-view>
</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): 请求下一个记录路由

 移动端适配

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">