axios
axios是一套对ajax的封装的JS库,本质上用的还是XMLHttpRequest,只不过它是用promise进行的封装所以它就有.then和.catch方法
axios是基于promise封装的,所以用起来方便,避免了回调地狱
缺点:浏览器兼容性不好(技术太先进了)
- 与jquery对比
jQuery与axios对比 | jQuery | axios |
---|---|---|
1.ajax技术底层原理 | XMLHTTPRequest | XMLHTTPRequest |
2.体积大小 | 大 (包含大量dom操作与ajax) | 小 (只有ajax请求) |
3.是否支持ES6的Promise | 不支持(底层使用其他方案模拟实现) | 支持基于原生Promise封装 |
4.兼容性 | 好 (兼容性是jQuery的强项) | 一般 (使用了新技术) |
axios发get请求
- get方法第一个参数是url
- get方法第二个参数是对象类型 { params:{get参数对象} }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="app">
<button @click="sendGet">发请求</button>
</div>
</body>
<script src="./vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {},
methods: {
sendGet() {
axios
.get('https://autumnfish.cn/api/joke/list', {
params: { num: 5 },
})
.then((res) => {
// 请求成功触发
console.log(res)
})
.catch((error) => {
// 请求失败触发
console.log('请求失败')
})
},
},
})
</script>
</html>
- get() : 写url和请求参数
- then(res=>{}) : 成功回调, 相当于以前jq的success
- catch(err=>{}):失败回调, 一般可以省略不写
- then(()=>{}):完成回调, 表示请求完成,无论成功失败都会执行。一般可以省略不写
axios发post请求
- post方法第一个参数是url
- post方法第二个参数是对象类型 { post参数对象 }
- post请求传参数,直接在第二个参数里写就行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>axios发post请求</title>
<script src="./vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="username" placeholder="请输入用户名" />
<button @click="sendPost">注册</button>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '',
},
methods: {
sendPost(){
// 要注意:post请求传参,直接在第二个参数里写就行
axios.post('https://autumnfish.cn/api/user/reg',{
username:this.username
})
.then(res=>{
console.log(res);
alert(res.data)
})
}
},
})
</script>
</body>
</html>
axios配置模式
- 和$.ajax()非常类似
- 不同之处是使用promise技术处理异步操作结果
axios({
url:'请求路径',
method:'请求方式',
data:{ post请求参数 },
params:{ get请求参数 }
}).then(res=>{
//成功回调
//console.log(res)
});
生命周期基本介绍
-
vue生命周期钩子介绍
- 钩子 : 回调函数
- 例如
window.onload = function(){ dom加载完毕,外部资源加载完毕就执行 }
- 例如
- 生命周期 : vue实例从出生到死亡的过程
- 出生:
- 创建vue实例
- 创建data数据
- 创建el挂载点
- 将data数据渲染到el挂载点
- 死亡
- vue实例被销毁
- 这里销毁不是指vue实例变成了null,而是指解除data与el的关联
- 说人话:修改了data,页面不会被渲染
- 这里销毁不是指vue实例变成了null,而是指解除data与el的关联
- vue实例被销毁
- 出生:
- 钩子 : 回调函数
-
注意点
- 根据官网文档介绍 : 每一个生命周期钩子中的this都是指向vue实例
- 所以,生命周期钩子不能是箭头函数
执行顺序 | 钩子函数 | 执行时机 |
---|---|---|
1 | beforeCreate(){} | vue实例创建了,但是el和data还没有创建 (准备创建data) |
2 | created() {} | data数据创建了,但是el挂载点还没有创建 (准备创建el) |
3 | beforeMount() {} | el挂载点创建了,但是data数据还没有渲染(准备渲染中) |
4 | mounted() {} | data数据 第一次 渲染完毕 (完成初始渲染) |
5 | beforeUpdate() {} | 检测到data数据变化,但是还没有开始重新渲染 (data变了,准备重新渲染中) 会执行多次 |
6 | updated() {} | 变化后的data数据 ,完成渲染到页面 (完成重新渲染)会执行多次 |
7 | beforeDestroy() {} | vue实例销毁即将销毁(解除data与el的关联),之后修改data,页面不会被渲染 |
8 | destroyed() {} | vue实例已经销毁 |
计算属性
依赖一个或者多个数据而生成一个新的数据时,考虑用计算属性
- 计算属性作用 : 解决渲染数据的代码冗余问题
- 某些数据在渲染的时候,可能要经过一些复杂逻辑的计算处理
- 计算属性的语法:在vue实例的computed对象中声明一个函数
- 这个函数名就是计算属性的属性名
- 在这个函数中 return 返回值(是计算属性的属性值)
- 注意点
- 这个函数一定要写在vue实例的computed对象中
- 这个函数一定要有返回值,否则计算属性无法渲染
- 应用场景:购物车
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="cart">
<div v-for="item in goods">
<span>{{ item.name }}</span>
<span>价格:{{ item.price }}</span>
<button @click="item.count--">-</button>
<input type="text" v-model="item.count">
<button @click="item.count++">+</button>
</div>
<div>
总价:{{ totalPrice }}
</div>
</div>
</div>
<script src="./vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
goods:[
{ name:'苹果', price:'9.9', count:1 },
{ name:'西瓜', price:'5.9', count:1 },
{ name:'鸭梨', price:'29.9', count:1 },
{ name:'荔枝', price:'19.9', count:1 },
]
},
computed: {
totalPrice () {
let sum = 0;
for(let i = 0; i < this.goods.length; i++){
sum += this.goods[i].price * this.goods[i].count
}
return sum
}
},
})
</script>
</body>
</html>