axios、生命周期基本介绍、计算属性

最新推荐文章于 2022-12-23 23:02:04 发布

Silent Land

最新推荐文章于 2022-12-23 23:02:04 发布

阅读量1.1k

点赞数 1

分类专栏： # Vue2

本文链接：https://blog.csdn.net/weixin_44757417/article/details/108572051

版权

Vue2 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

axios

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，页面不会被渲染
注意点
- 根据官网文档介绍：每一个生命周期钩子中的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计算属性官方文档

计算属性作用：解决渲染数据的代码冗余问题

某些数据在渲染的时候，可能要经过一些复杂逻辑的计算处理

计算属性的语法：在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>