【vue】vue中axios的使用及vue生命周期详解_07

原创已于 2022-06-17 09:47:45 修改 · 1.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #vue生命周期 #vue钩子函数 #前端框架

于 2022-06-15 11:36:38 首次发布

⭐ Vue.js入门基础专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue中如何使用Axios进行Ajax请求，包括配置基础路径、发送GET和POST请求的步骤，并展示了实际示例。同时，讲解了Vue组件的生命周期，重点介绍了beforeCreate、created、beforeMount、mounted等钩子函数的使用场景，以及在何时发送Ajax请求。此外，扩展讨论了this的8种指向和Vue知识点的提炼，包括MVVM、虚拟DOM、生命周期、指令、计算属性、过滤器等。

【前文回顾】👉 vue自定义指令、计算属性、过滤器_06

一. axios请求

1. 问题: 首先, ajax 4步非常繁琐；其次jquery中虽然提供了$.ajax()函数，但是仅限于jquery中使用！那么到了vue中，如何一句话发送ajax请求?

2. 解决: 今后只要在vue中发送ajax请求，几乎都用axios

3. 什么是axios: 第三方开发的专门发送ajax请求的基于Promise的函数库。

4. 如何:

(0). 下载并引入: <script src="js/axios.js">

(1). 准备: 配置axios统一的基础路径:

axios.defaults.baseURL="http://服务器端所有接口的基础地址"

(2). 发送get请求:

axios.get("服务器端接口地址的相对路径",{

params:{ //发送到服务器端的参数值列表

参数名: 参数值,

... : ...

}

}).then(result=>{//坑1: 必须用箭头函数！只有result一个参数，则省略()

//坑2: result不是直接的返回结果

result.data才是真正的返回结果

})

(3). post请求:

axios.post(

"服务器端接口地址的相对路径",

"参数1=值1&参数2=值2&..."

).then(result=>{

console.log(result.data)

})

5. 示例: 使用axios发送ajax请求

6_axios.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/axios.min.js"></script>
</head>
<body>
  <script>
    //0. 配置统一的基础路径
    axios.defaults.baseURL="http://xzserver.applinzi.com";
    //1. 去东哥新浪云服务器获取学子商城首页商品列表
    axios.get("/index").then(result=>{
      console.log(result.data);
    })
    //2. 去东哥新浪云服务器获取5号商品的详细信息
    axios.get("/details",{
      params:{
        lid:5
      }
    }).then(result=>{
      console.log(result.data);
    })
    //3. 去东哥服务器验证用户名和密码，登录
    axios.post(
      "/users/signin",
      "uname=dingding&upwd=123456"
    ).then(result=>{
      console.log(result.data);
    })
  </script>
</body>
</html>

运行结果：

二. 生命周期

1. 问题: 在DOM或jq中，如果希望在页面加载后就自动执行一项任务(发送ajax请求)，可以写在window.onload或$(function(){ ... })中。但是，vue项目中写哪儿呢？

2. 解决: 今后只要在vue中希望页面加载后自动执行一项任务，都要将代码写在vue对象的生命周期中。

3. 什么是生命周期: new Vue()对象创建过程中所经历的所有阶段。

4. 包括: 4个阶段:

(1). 创建(create)阶段:

a. 创建new Vue()对象，会创建data对象..

b. 不会创建虚拟DOM树！

(2). 挂载(mount)阶段:

a. 已经创建完new Vue()和data对象...

b. 继续创建虚拟DOM树!

===============以上为必经阶段===============

(3). 更新(update)阶段:

只有在data中的变量被修改时，且这个修改会影响到界面时，才自动触发！

(4). 销毁(destroy)阶段:

只有在主动调用$destroy()函数，释放当前new Vue()对象或组件时才自动触发！

5. vue在每个阶段前后，都分别创建了一个钩子函数/回调函数

创建前: beforeCreate (){ ... }

(1). 创建(create)阶段

创建后: created(){

//已经创建完data对象，可以对data中的变量执行操作。

//但是暂时还没有虚拟DOM树，所以暂时不能操作页面上的元素！——如果操作，也会丢失！因为后续mount会将我们的修改尽数覆盖！

}

挂载前: beforeMount(){ ... }

(2). 挂载(mount)阶段

挂载后: mounted(){

//即有data，可以操作data中的变量

//又有虚拟DOM树，可以执行部分DOM操作

}

更新前: beforeUpdate(){ ... }

(3). 更新(update)阶段

更新后: updated(){ ... }

销毁前: beforeDestroy(){ ... }

(4). 销毁(destroy)阶段

销毁后: destroyed(){ ... }

6. 示例: 当页面加载完自动发送ajax请求，加载数据到页面

7_lifecycle.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="(p,i) of products">
          {{p.pid}} || {{p.title}} || {{p.price}}
        </li>
      </ul>
    </div>
    <script>
      //所以代码一律放在new Vue()内部！
      var vm = new Vue({
        el: "#app",
        data: {
          products: [],
        },
        beforeCreate() {
          console.log(`创建data之前自动执行...`);
        },
        created() {
          console.log(`创建data之后自动执行...`);
        },
        beforeMount() {
          console.log(`挂载页面之前自动执行...`);
        },
        mounted() {
          //生命周期钩子函数
          //this->new Vue()
          //this.变量
          console.log(`挂载页面之后自动执行...`);
          axios
            .get("http://xzserver.applinzi.com/index")
            // .then(function(result){//错误
            // //普通回调函数中的this->window
            // //this.products -> window.products
            .then((result) => {
              //内部的this->外部mounted()的this->new Vue()
              this.products = result.data;
            });
        },
        beforeUpdate() {
          console.log(`更新前自动执行...`);
        },
        updated() {
          console.log(`更新后自动执行...`);
        },
        beforeDestroy() {
          console.log(`销毁前自动执行...`);
        },
        destroyed() {
          console.log(`销毁后自动执行...`);
        },
      });
    </script>
  </body>
</html

运行结果：

1 || Apple MacBook Air系列 || 5988
2 || 小米Air 金属超轻薄 || 3488
3 || 联想E480C 轻薄系列 || 5399
4 || 华硕RX310 金属超极本 || 4966
5 || 联想小新700 电竞版游戏本 || 6299
6 || 戴尔灵越燃7000 轻薄窄边 || 5199
7 || 华为 || 5888

💥 扩展：this判断—8种指向

this 8种指向: 判断this，~~一定不要看定义在哪儿！~~只看调用时！

➡️ 1. obj.fun() this->obj

➡️ 2. fun() 或 (function(){ ... })() 或多数回调函数或定时器函数 this->window

➡️ 3. new Fun() this->new正在创建的新对象

➡️ 4. 类型名.prototype.共有方法=function(){ ... } this->将来谁调用指谁，同第一种情况

➡️ 5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象

如果需要使用简化版函数，必须$(this)

➡️ 6. 箭头函数中的this->箭头函数外部作用域中的this

➡️ 7. jQuery.fn.自定义函数=function(){ ... } this->将来调用这个自定义函数的.前的jQuery子对象，~~不用再$(this)~~

➡️ 8. new Vue()中methods中的函数中的this->当前new Vue()对象

⬛ 总结：知识点提炼

1. MVVM: 界面View+模型Model+视图模型ViewModel

2. Vue绑定原理: 访问器属性+虚拟DOM树

变量被修改时: 访问器属性发出通知，虚拟DOM树扫描并仅更新受影响的元素

3. 虚拟DOM树优点:

(1). 小: 只包含可能变化的元素。

(2). 遍历查找快

(3). 修改效率高: 只修改受影响的元素。

(4). 避免重复编码: 已封装DOM增删改查代码

4. Vue功能3步:

(1). 先创建增强版的界面:

a. 整个界面必须包含在一个唯一的父元素下:

通常是<div id="app">
b. 可能变化的元素内容用{{自定义变量名}}标记

c. 触发事件的元素用@click="自定义处理函数名"标记

(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域

(3). 在new Vue()对象内定义模型对象data和methods

a.界面所需的所有变量都放在data中

b.界面所需的所有事件处理函数都放在methods中

5. 总结: 绑定语法+13种指令

(1). 如果元素的内容需要随变量自动变化: {{}}

(2). 如果元素的属性值需要随变量自动变化: :

(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素

(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素

(5). 多个元素多选一显示: v-if v-else-if v-else

(6). 只要反复生成多个相同结构的元素组成列表时: v-for :key="唯一标识"

强调: 为什么必须加:key="i"？给每个元素副本添加唯一标识。修改数组中某个元素值时，避免重建整个列表，只需要修改一个DOM元素副本即可！提高修改效率。

(7). 只要绑定事件: @ $event

(8). 防止用户短暂看到{{}}: v-cloak和v-text

(9). 只要绑定原始HTML代码片段内容: v-html

(10). 如果元素的内容只在首次加载时绑定一次，之后都不会改变: v-once

优化: 减少虚拟DOM树中元素个数。

(11). 保护内容中的{{}}不被编译: v-pre

(12). 今后只要想获得表单元素的值或状态: v-model

6. 绑定样式:

(1). 需要精确修改某一个css属性，就绑定style:

a. <元素 style="固定样式" :style="{css属性:变量名, ...}"

data:{
变量名:css属性值

... : ...

}

b. <元素 style="固定样式" :style="变量名"

data:{
变量名:{

css属性名: 属性值,

... : ...

}

(2). 只要批量修改一个元素的多个css属性就绑定class

a. <元素 class="固定class" :class="{class名:变量名, ...}"

data:{
变量名:true或false,

... : ...

}
b. <元素 class="固定class" :class="变量名"

data:{
变量名:{
class名:true或false,

... : ...

}

7. 只要希望在页面加载时自动对元素执行一些初始化操作时就用自定义指令:

(1). 添加自定义指令:

Vue.directive("自定义指令名",{

inserted(domElem){
对domElem执行DOM操作

}

})

(2). 使用自定义指令:

<元素 v-自定义指令名>

8. 今后只要根据其他变量的值动态计算出一个属性值就用计算属性:

<元素>{{计算属性}}</元素>

new Vue({

el:"#app",

data:{...},

methods:{...},

computed:{
计算属性名(){

计算过程

return 计算结果

}
}

})

9. 希望将变量的原始值先加工后再显示给用户看时就用过滤器:

Vue.filter("过滤器名",function(oldVal, 自定义形参,...){

return 加工后的新值

})

<元素>{{ 变量 | 过滤器(实参值, ...) | ... }}</元素>

10. 只要在vue中发送ajax请求，就用axios

axios.defaults.baseURL="服务器端接口的公共基础地址部分"

axios.get(
"服务器端接口地址的相对路径",

{

params:{ 参数名: 参数值, ... }

}
).then(result=>{

... result.data...

})

或

axios.post(
"服务器端接口地址的相对路径",

"参数名1=参数值1&参数名2=参数值2&..."
).then(result=>{

... result.data...

})

强调: 在vue内使用axios，then中必须用箭头函数，保持then内this与外部this一致，都指向当前new Vue()对象

11. vue生命周期4个阶段 8个钩子函数

beforeCreate(){ ... }

(1). 创建(create)

created(){ ... }

beforeMount(){ ... }

(2). 挂载(mount)

mounted(){ ... 经常在这里发送ajax请求 ... }

beforeUpdate(){ ... }

(3). 更新(update)

updated(){ ... }

beforeDestroy(){ ... }

(4). 销毁(destroy)

destroyed(){ ... }

【后文传送门】👉 vue中如何实现组件封装、组件化开发及组件间传参_08

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！