Vue05
axios 使用
基本用法
import axios from 'axios'
export default {
methods: {
getBooks() {
// axios 发请求只需要带上一个配置对象
axios({
// url 地址
url: 'http://123.57.109.30:3006/api/getbooks',
// method 请求方法
method: 'get'
}).then(res=>{
// 这个库有个特点, 会将你发请求的配置放在返回中一起交给你, 最终的数据, 其实是放在 res.data
console.log(res.data);
})
}
}
}
get请求带参方式
params: {
// get 请求的传输只能用参数方式
// query 查询字符串的传参方式 => 这个参数会在 url 后面用 ?a=1 的形式拼接
bookname: this.bookName
}
post 请求带参方式
data: {
// post 请求一般用这个方式带参数, 实际的作用是将数据放入到请求载荷(请求体)中
appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",
...this.bookData
}
其实 params 和 data 的传参方式一个用在 get 一个用在 post 这种说法只是一般约定, 但是技术上其实可以有例外, 比较确定的区别是, params 会将数据待在 url? 后面查询字符串, data 将数据放在请求载荷(请求体)
拓展延展运算符
也叫展开运算符
// ... 展开运算符/延展运算符
// ...[1,2,3] => 1,2,3
// ...{name: 'tom', age: 13} => name: 'tom', age: 13
// const arr = [1,2,3]
// const arr2 = arr
// arr2[1] = 666
// const arr2 = [...arr]
// console.log(...[1,2,3]) => console.log(1,2,3);
// console.log(...{name: 'tom', age: 13}) => console.log(name: 'tom', age: 13)
封装全局axios
改造全局配置
// /src/utils/request.js
// 改造 axios 添加基地址后重新导出
import axios from 'axios'
axios.defaults.baseURL = 'http://123.57.109.30:3006/api'
export default axios
封装api函数管理层
// /src/api/book.js
// 这里是统一管理关于书籍的请求接口函数
// 获取书籍的a
import request from '@/utils/request'pi
export function getBooks(params) {
return request({
// url 地址
url: '/getbooks',
// method 请求方法
method: 'get',
params: params,
data: {
a:666
}
})
}
// App.vue 最终使用
import {getBooks} from '@/api/book'
const params = {
bookname: this.bookName
}
getBooks(params).then(res=>{
// 这个库有个特点, 会将你发请求的配置放在返回中一起交给你, 最终的数据, 其实是放在 res.data
console.log('成功');
console.log(res.data);
}).catch(err=>{
console.log(err);
})
$refs
基本使用
通过id或ref属性获取原生DOM
<template>
<div>
<!-- vue 获取元素的方法第一步设置一个 ref 属性 -->
<div id="myBox" ref="myBoxRef">盒子</div>
</div>
</template>
<script>
export default {
mounted() {
// console.log(document.getElementById('myBox'));
// vue 当中获取元素方法第二部 this.$refs.名字
console.log(this.$refs.myBoxRef);
}
}
</script>
<style>
</style>
通过ref属性获取组件对象
获取子组件内的属性和方法
components: {MyBox},
mounted() {
// console.log(document.getElementById('myBox'));
// vue 当中获取元素方法第二部 this.$refs.名字
// console.log(this.$refs.myBoxRef);
// 用id获取组件
console.log(document.getElementById('zjBox'));
// 用ref获取组件
console.log(this.$refs.zjBoxRef);
setTimeout(() => {
this.$refs.zjBoxRef.msg = '789'
this.$refs.zjBoxRef.dajiao()
}, 1000);
}
异步更新DOM
$nextTick(回调函数)
基本使用
等待当前所有代码执行完毕, 页面更新结束之后执行传入的回调函数
toggleShow() {
this.isShow = !this.isShow
// 希望每次显示的时候都将这个 dom 打印在控制台
// console.log(this.$refs.myBox);
// this.$nextTick(回调函数) 作用是等待页面更新完毕执行回调函数
this.$nextTick(()=>{
console.log(this.$refs.myBox);
})
}
等DOM更新后, 触发此方法里函数体执行
点击按钮自身隐藏, 出现输入框并马上处于激活状态
<template>
<div>
<!-- 有个按钮叫做开始搜索
点击后自身隐藏, 显示一个输入框
输入框自动聚焦 -->
<input v-if="isShowSearch" type="text" ref="search">
<button v-else @click="showSearch">开始搜索</button>
</div>
</template>
<script>
export default {
data() {
return {
isShowSearch: false
}
},
methods: {
showSearch(){
this.isShowSearch = !this.isShowSearch
// 这里我想要聚焦输入框, 只要获取输入框 dom 执行其中 focus 函数即可
// 设置显示取反没有马上渲染
// this.$refs.search.focus()
// 如果想要等待渲染完毕有了input再执行,使用 this.$nextTick
this.$nextTick(()=>{
this.$refs.search.focus()
})
}
}
}
</script>
<style>
input {
margin-top: 300px;
}
</style>
