本章目录
1.axios和ajax的区别:
1、axios是一个基于Promise的HTTP库,而ajax是对原生XHR的封装;
2、ajax技术实现了局部数据的刷新,而axios实现了对ajax的封装。
🔗axios和ajax的区别
2.扩展运算符(…)是ES6的语法,
用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。
🔗扩展运算符
3.axios
3.1_axios基本使用-全局配置
axios.defaults.baseURL = "http://123.57.109.30:3006"
// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
3.2_Vue生命周期-钩子函数
// 1. Vue生命周期-钩子函数
/*
初始化
beforeCreate --- 无法获取data/methods
created --- Vue实例创建完毕 (data和methods等等)
挂载
beforeMount --- 无法获取"真实"DOM元素
mounted --- 组件挂载完毕, 可以获取到真实"DOM"
更新
beforeUpdate --- 挂载以后, data更新, 将要更新DOM之前
updated --- 获取更新"真实"DOM
销毁 (组件从真实DOM上移除)
beforeDestroy -- 手动清除 定时器 / 计时器 / eventBus的事件($off)
destroyed --- 已经销毁
*/
// 2. axios
// 作用: 网路请求库
// 使用:
// (1): 下载axios
// (2): 引入axios
// (3): axios({})
/*
axios({
url: "请求地址",
method: "请求方式",
params: {
后端参数名: 前端要传递值
}, // 参数名和值, 会被axios拼接到url?后面 - 查询字符串
data: {
后端参数名: 前端要传递值
} // 参数名和值, 会被axios拼接到请求体里
})
*/
// (4): axios()原地返回Promise对象, then接收成功结果, catch接收失败的结果
// axios全局默认配置:
// axios.defaults.baseURL = "基地址http://ip:端口"
// 以后axios发起请求会在每次的url上面拼接这个地址再发起请求
生命周期&数据共享[父子-子父-兄弟]&ref引用&数组复习
4.Dom 获取元素的几种方式
获取页面中的元素可以使用以下几种方式:
- 根据ID获取
- 根据标签名获取
- 通过HTML5新增的方法获取
- 特殊元素获取
4.1_通过ref属性获取原生DOM
4.2_Vue-异步更新DOM
4.3_$nextTick使用
组件的 $nextTick(cb) 方法,会把 cb 回调推迟到下一个 DOM 更新周期之后执行。
通俗的理解是:等组件的DOM 更新完成之后,再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。
4.4_ $nextTick使用场景
<template>
<div>
<input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow">
<button v-else @click="btn">点击我进行搜索</button>
</div>
</template>
<script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {
data(){
return {
isShow: false
}
},
methods: {
async btn(){
this.isShow = true;
// this.$refs.myInp.focus()
// 原因: data变化更新DOM是异步的
// 输入框还没有挂载到真实DOM上
// 解决:
// this.$nextTick(() => {
// this.$refs.myInp.focus()
// })
// 扩展: await取代回调函数
// $nextTick()原地返回Promise对象
await this.$nextTick()
this.$refs.myInp.focus()
}
}
}
</script>
没有拿到iptRef这个引用,引用为undefined。在生命周期中,data数据更新后页面还来得急渲染,就执行this.$refs.iptRef.focus();所以得到的结果undefined。
怎么才能不报错呢?前提把这行代码放到页面更新以后。对此Vue提供了this.$nextTick(cb)
方法
可以写在updated里面吗? 不能
updated里面只要数据变化就会触发updated
刚开始输入框看不见,点一下看得见,此时数据变化会触发updated,再点一下,输入框隐藏,此时数据又变化又会触发updated获取焦点,与题设矛盾会报错!!!
4.5组件name属性使用
目标: 可以用组件的name属性值, 来注册组件名字
问题: 组件名不是可以随便写的?
答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格
二、 购物车案例
1.项目初始化
yarn add axios less less-loader@5.0.0 bootstrap
vue create shopcar
yarn add bootstrap
yarn add less less-loader@5.0.0 -D
修改配置文件、需要重启服务器
import 'bootstrap/dist/css/bootstrap.min.css'
2.头部自定义
3.请求数据
import axios from 'axios'
axios.defaults.baseURL = 'https://www.escook.cn'
Vue.prototype.$axios = axios
4.数据铺设
请求回来的数据转存到data中
this.list=res.data.list
只要请求回来的数据在页面渲染期间要用到,必须转存到data中
循环渲染Goods组件
5.重要的数据-修改count的值
<template>
<div class="my-counter">
<button type="button" class="btn btn-light" :disabled="this.isNum === 1" @click="sub">-</button>
<input type="number" class="form-control inp" :value="isNum" @change="countChange" />
<!-- <span class="form-control inp">{{ isNum }}</span> -->
<button type="button" class="btn btn-light" @click="add">+</button>
</div>
</template>
<script>
import bus from '@/components/eventBus.js'
export default {
props: {
isNum: {
type: Number,
default: 1
},
id: {
type: Number,
require: true
}
},
methods: {
countChange(e) {
// 修改原生的DOM
// console.log(e.target)
// console.log(e.target.value)
const obj = { id: this.id, val: Number(e.target.value) }
console.log(obj)
bus.$emit('share', obj)
},
add() {
const obj = { id: this.id, val: this.isNum + 1 }
bus.$emit('share', obj)
},
sub() {
const obj = { id: this.id, val: this.isNum - 1 }
bus.$emit('share', obj)
}
}
}
</script>
<style lang="less" scoped>
.my-counter {
display: flex;
.inp {
width: 45px;
text-align: center;
margin: 0 10px;
}
.btn,
.inp {
transform: scale(0.9);
}
}
</style>
所以要弄一个watch
watch: {
obj: {
deep: true,
handler() {
// 深度监听属性的变化
// console.log(this.obj.goods_count)
if(this.obj.goods_count<1){
this.obj.goods_count = 1
}
}
}
}
Q:子组件改变对象里面的属性会影响外面数组里对象否
会,因为对象之间引用了相同的内存地址
Q:控制输入框的合法值
先控制按钮,然后监听输入框值,强制覆盖
6.全选影响小选框
7.小选影响全选
总结: 对象之间是引用关系, 对象值改变, 所有用到的地方都跟着改变
上午总结
// 1. Vue生命周期-钩子函数
/*
初始化
beforeCreate --- 无法获取data/methods
created --- Vue实例创建完毕 (data和methods等等)
挂载
beforeMount --- 无法获取"真实"DOM元素
mounted --- 组件挂载完毕, 可以获取到真实"DOM"
更新
beforeUpdate --- 挂载以后, data更新, 将要更新DOM之前
updated --- 获取更新"真实"DOM
销毁 (组件从真实DOM上移除)
beforeDestroy -- 手动清除 定时器 / 计时器 / eventBus的事件($off)
destroyed --- 已经销毁
*/
// 2. axios
// 作用: 网路请求库
// 使用:
// (1): 下载axios
// (2): 引入axios
// (3): axios({})
/*
axios({
url: "请求地址",
method: "请求方式",
params: {
后端参数名: 前端要传递值
}, // 参数名和值, 会被axios拼接到url?后面 - 查询字符串
data: {
后端参数名: 前端要传递值
} // 参数名和值, 会被axios拼接到请求体里
})
*/
// (4): axios()原地返回Promise对象, then接收成功结果, catch接收失败的结果
// axios全局默认配置:
// axios.defaults.baseURL = "基地址http://ip:端口"
// 以后axios发起请求会在每次的url上面拼接这个地址再发起请求