Day-03 前端 Web-Vue & Axios 基础

枫super2025-04-13 13:05

目录

[一、Vue 基础深入剖析](#一、Vue 基础深入剖析)

[（一）Vue 实例：开启 Vue 之旅的钥匙](#（一）Vue 实例：开启 Vue 之旅的钥匙)

[（二）指令：拓展 HTML 功能的魔法棒](#（二）指令：拓展 HTML 功能的魔法棒)

（三）组件：构建复杂页面的积木

[二、Axios 基础全面解析](#二、Axios 基础全面解析)

[（一）安装 Axios：引入数据交互的桥梁](#（一）安装 Axios：引入数据交互的桥梁)

[（二）基本使用：发送 HTTP 请求的奥秘](#（二）基本使用：发送 HTTP 请求的奥秘)

[（三）在 Vue 中集成 Axios：打造无缝数据交互体验](#（三）在 Vue 中集成 Axios：打造无缝数据交互体验)

[（四）Axios 拦截器：请求与响应的守护者](#（四）Axios 拦截器：请求与响应的守护者)

一、Vue 基础深入剖析

Vue.js 作为一款极具影响力的 JavaScript 前端框架，以其简洁的 API 和高效的开发模式，在构建用户界面领域独树一帜。它秉持数据驱动和组件化的设计理念，极大地提升了前端开发的效率与可维护性。

（一）Vue 实例：开启 Vue 之旅的钥匙

在使用 Vue 时，创建 Vue 实例是首要任务。以一个简单的 HTML 文件为例，引入 Vue.js 库后，即可着手构建 Vue 实例。

html 复制代码 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>Vue实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

这里，el属性精准定位了 Vue 实例挂载的 DOM 元素，就如同为 Vue 实例找到了一个 "家"，使其能够在对应的页面区域发挥作用。而data对象则像是一个数据仓库，存储着 Vue 实例所需要的数据。在模板中，双大括号语法（{``{}}）如同神奇的桥梁，将数据仓库中的数据无缝渲染到页面上，实现了数据与视图的初步绑定。

（二）指令：拓展 HTML 功能的魔法棒

Vue 指令为 HTML 注入了强大的动态功能，让页面元素变得更加智能和灵活。

  1. v - if指令 ：如同一个智能开关，根据表达式的值来决定元素的渲染与否。当表达式的值为true时，元素会像被施了魔法一样出现在 DOM 中；反之，元素则会隐匿不见。
html 复制代码 
<div v - if="isShow">This is a conditional div</div>

在实际应用中，常用于根据用户权限或某些业务逻辑来决定是否展示特定的页面内容，比如只有管理员用户才能看到的管理菜单。

  1. v - for指令：堪称列表渲染的神器，它能够基于数组高效地渲染出对应的列表。在遍历数组的过程中，为每个元素重复渲染指定的模板。
html 复制代码 
<ul>
  <li v - for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

:key属性在这里扮演着至关重要的角色，它为 Vue 的虚拟 DOM 算法提供了唯一标识。就好比给每个列表项贴上了独一无二的 "身份证"，使得 Vue 在更新列表时能够快速准确地识别每个元素的变化，从而实现高效的差异对比，大大提升了页面更新的性能。

  1. v - bind指令 ：主要用于动态绑定 HTML 元素的属性。例如，我们可以动态设置图片的src属性。
html 复制代码 
<img v - bind:src="imageUrl" alt="动态图片">

在 JavaScript 中，data对象里定义imageUrl变量，根据业务逻辑改变其值，图片的src属性就会相应更新，实现图片的动态切换。该指令还有一个简洁的语法糖，即可以省略v - bind，直接使用:来绑定属性，如:src="imageUrl"。

  1. v - on指令：用于绑定事件监听器。比如为按钮添加点击事件。
html 复制代码 
<button v - on:click="handleClick">点击我</button>

在 Vue 实例的methods选项中定义handleClick方法，当按钮被点击时，该方法就会被触发，执行相应的业务逻辑，例如发送网络请求、切换页面状态等。同样，它也有语法糖@，上述代码可写成<button @click="handleClick">点击我</button> 。

（三）组件：构建复杂页面的积木

组件是 Vue 的核心亮点之一，它将一个复杂的页面拆分成多个独立、可复用的部分，每个组件都拥有自己的模板、数据和逻辑，就像搭建积木一样，通过组合不同的组件来构建出丰富多彩的页面。

1.组件的定义与使用

定义一个简单的组件：

html 复制代码 
Vue.component('my - component', {
  template: '<div>A custom component</div>'
})

在模板中使用该组件就如同使用普通的 HTML 标签一样简单：

html 复制代码 
<my - component></my - component>

2.组件间的通信

  • 父子组件通信 ：
    • 父传子 ：通过props选项，父组件可以向子组件传递数据。例如，定义一个接收参数的greeting - component组件。
html 复制代码 
Vue.component('greeting - component', {
  props: ['name'],
  template: '<div>Hello, {{ name }}!</div>'
})

在父组件模板中使用时传入参数：

html 复制代码 
<greeting - component name="John"></greeting - component>
  • 子传父 ：子组件通过触发自定义事件来向父组件传递数据。在子组件中，通过this.$emit('事件名', 数据)来触发事件。例如，子组件中有一个按钮，点击按钮时向父组件传递一个数字。
html 复制代码 
<template>
  <button @click="sendData">点击传数据给父组件</button>
</template>
<script>
export default {
  methods: {
    sendData() {
      this.$emit('childEvent', 10);
    }
  }
}
</script>

在父组件中监听该事件：

html 复制代码 
<child - component @childEvent="handleChildEvent"></child - component>
<script>
export default {
  methods: {
    handleChildEvent(data) {
      console.log('子组件传来的数据:', data);
    }
  }
}
</script>
  • 非父子组件通信 ：对于没有直接父子关系的组件通信，可以使用事件总线或 Vuex 状态管理模式。
    • 事件总线 ：创建一个空的 Vue 实例作为事件总线，在需要通信的组件中引入该实例。例如，组件 A 要向组件 B 传递数据，在组件 A 中通过eventBus.$emit('eventName', data)触发事件，在组件 B 中通过eventBus.$on('eventName', (data) => { /* 处理数据 */ })监听事件。
    • Vuex ：适用于大型应用的状态管理，它将应用的状态集中存储和管理，所有组件都可以访问和修改这些状态，通过mutation、action等机制来保证状态变更的可追踪性和一致性。
      3.组件的生命周期

Vue 组件有一系列的生命周期钩子函数，这些函数在组件的不同阶段会自动被调用。

  • 创建阶段 ：
    • beforeCreate：此时组件实例刚刚被创建，数据观测和事件配置尚未初始化，在这个钩子函数中无法访问data和methods中的内容。
    • created：组件实例已经创建完成，数据观测和事件配置已就绪，可以访问data和methods，通常在此阶段进行一些数据的初始化操作，如发起网络请求获取初始数据。
  • 挂载阶段 ：
    • beforeMount：在挂载开始之前被调用，此时模板已经编译完成，但尚未挂载到真实的 DOM 中，$el还未生成。
    • mounted：组件挂载到真实 DOM 后被调用，此时可以访问页面中的 DOM 元素，常用于操作 DOM 或初始化第三方插件等。
  • 更新阶段 ：
    • beforeUpdate：在数据更新时调用，此时数据已经更新，但 DOM 尚未更新，可在此进行一些基于旧数据的操作。
    • updated：数据更新且 DOM 也更新完成后调用，可用于在更新完成后执行一些额外的逻辑。
  • 销毁阶段 ：
    • beforeDestroy：在组件销毁之前调用，此时组件仍然可用，可以进行一些清理工作，如清除定时器、解绑事件监听器等。
    • destroyed：组件销毁后调用，此时组件的所有指令已解绑，所有事件监听器已移除，子组件也已全部销毁。

二、Axios 基础全面解析

Axios 作为一款基于 Promise 的 HTTP 客户端，在浏览器和 Node.js 环境中都表现出色。在 Vue 项目中，它成为与后端 API 进行数据交互的得力助手，为前端应用获取和提交数据提供了便捷、高效的方式。

（一）安装 Axios：引入数据交互的桥梁

1.在 Vue CLI 项目中安装 ：如果是使用 Vue CLI 脚手架创建的项目，可以通过 npm 或 yarn 这两个常用的包管理工具轻松安装 Axios。

使用 npm 安装：

html 复制代码 
npm install axios

使用 yarn 安装：

html 复制代码 
yarn add axios

2.在普通 HTML 项目中引入 ：对于普通的 HTML 项目，也可以通过 CDN 链接快速引入 Axios。在 HTML 文件的<head>标签中添加如下代码：

html 复制代码 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

（二）基本使用：发送 HTTP 请求的奥秘

  1. GET 请求：用于从服务器获取数据，是最常用的请求方式之一。
html 复制代码 
axios.get('/api/data')
  .then(response => {
      console.log(response.data);
    })
  .catch(error => {
      console.error('Error fetching data:', error);
    });

在上述代码中，axios.get方法发送一个 GET 请求到/api/data这个 URL 地址。当请求成功时，then回调函数会被执行，response.data中存储着从服务器返回的数据，我们可以在这里对数据进行处理，比如将数据展示到页面上。如果请求过程中出现错误，catch回调函数会捕获到错误信息，方便我们进行错误排查和处理。

  1. POST 请求：通常用于向服务器提交数据，比如用户注册、登录时提交表单数据。

    axios.post('/api/login', {
    username: 'admin',
    password: '123456'
    })
    .then(response => {
    console.log(response.data);
    })
    .catch(error => {
    console.error('Error logging in:', error);
    });

这里axios.post方法的第一个参数是请求的 URL，第二个参数是要提交的数据对象。服务器接收到数据后进行相应的处理，并返回响应数据，同样通过then和catch来处理成功和失败的情况。

  1. PUT 请求：用于更新服务器上的资源。假设要更新一个用户的信息，可以这样发送请求。

    axios.put('/api/users/1', {
    name: 'New Name',
    age: 30
    })
    .then(response => {
    console.log('User updated successfully:', response.data);
    })
    .catch(error => {
    console.error('Error updating user:', error);
    });

/api/users/1表示要更新的用户资源的 URL，其中1可能是用户的 ID。请求体中包含了要更新的用户信息。

  1. DELETE 请求：用于删除服务器上的资源。比如删除一个特定 ID 的商品。

    axios.delete('/api/products/5')
    .then(response => {
    console.log('Product deleted successfully:', response.data);
    })
    .catch(error => {
    console.error('Error deleting product:', error);
    });

/api/products/5表示要删除的商品资源的 URL，5为商品 ID。成功删除后，服务器返回的响应数据会在then回调中处理。

（三）在 Vue 中集成 Axios：打造无缝数据交互体验

在 Vue 项目中，为了方便在各个组件中使用 Axios，可以将其配置为全局可用。在项目的入口文件main.js中进行如下配置：

html 复制代码 
import Vue from 'vue';
import axios from 'axios';

Vue.prototype.$http = axios;

通过上述代码，将 Axios 实例挂载到 Vue 的原型上，命名为$http。这样在 Vue 组件中，就可以通过this.$http来轻松使用 Axios 发送请求。例如在一个组件的方法中获取数据：

html 复制代码 
export default {
  methods: {
    fetchData() {
      this.$http.get('/api/data')
      .then(response => {
          this.dataList = response.data;
        })
      .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
}

在这个例子中，fetchData方法通过this.$http.get发送 GET 请求获取数据，成功后将返回的数据赋值给组件的dataList变量，用于在模板中展示数据。如果请求失败，在控制台输出错误信息。

（四）Axios 拦截器：请求与响应的守护者

Axios 拦截器是 Axios 的一项强大功能，它能够在请求或响应被then或catch处理前进行拦截和统一处理，为我们的项目带来很多便利。

  1. 请求拦截器：在发送请求之前，我们可以利用请求拦截器对请求进行一些预处理。比如在每个请求中添加身份验证的 Token。
html 复制代码 
axios.interceptors.request.use(config => {
    // 在发送请求之前做些什么，例如添加token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  }, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

在上述代码中，axios.interceptors.request.use方法接收两个回调函数作为参数。第一个回调函数在请求发送前被调用，它接收请求配置对象config，我们可以对config进行修改，如添加Authorization头部信息。如果在获取token或设置头部信息过程中出现错误，第二个回调函数会被调用，将错误通过Promise.reject返回。
2.响应拦截器：当服务器返回响应后，响应拦截器可以对响应数据进行统一处理。比如根据服务器返回的状态码进行不同的操作。

复制代码 
axios.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response;
  }, error => {
    // 对响应错误做点什么
    if (error.response.status === 401) {
      // 未授权，跳转到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  });

这里axios.interceptors.response.use方法同样接收两个回调函数。第一个回调函数在响应成功时被调用，我们可以在这里对响应数据进行处理，如对数据进行格式化等，然后返回处理后的响应。第二个回调函数在响应出现错误时被调用，通过判断error.response.status状态码，当状态码为401（未授权）时，将用户重定向到登录页面，其他错误则通过Promise.reject返回，以便在调用处进行统一的错误处理。

Vue 基础与 Axios 的完美结合，为前端开发提供了强大的数据展示和交互能力。通过深入理解和熟练运用这些知识，开发者能够构建出功能丰富、性能卓越、用户体验良好的 Web 应用程序。希望这篇博客能成为你在前端开发道路上的得力助手，帮助你不断攻克技术难题，提升开发技能。

相关推荐
刘_小_二15 分钟前
Nginx设置开机自启动（Linux版本）
前端
小鱼计算机22 分钟前
【6】深入学习http模块(万字)-Nodejs开发入门
前端·javascript·http·node.js·http请求
再玩一会儿看代码25 分钟前
彻底掌握 XMLHttpRequest（XHR）：前端通信的基石
前端·经验分享·笔记·学习·xhr
爱上大树的小猪26 分钟前
【前端样式】使用Flexbox实现经典导航栏：自适应间距与移动端折叠实战
前端·css·面试
前端开发呀28 分钟前
无所不能的uniapp拦截器
前端·uni-app
itsOli34 分钟前
（22）详情页开发——④ 详情页“列表”和“用户评论”组件 | Vue.js 项目实战： 移动端“旅游网站”开发
前端·javascript·vue.js
前端大卫1 小时前
mac 常用技巧与问题汇总
前端·mac
鸿蒙场景化示例代码技术工程师1 小时前
实现页面全屏功能鸿蒙示例代码
前端
funnycoding1 小时前
mcp vs function call区别
前端·架构
鸿蒙场景化示例代码技术工程师1 小时前
实现PdfKit功能鸿蒙示例代码
前端
热门推荐
01我决定放弃搞 Java 了02RAG 实践- Ollama+RagFlow 部署本地知识库03如何在WPS和Word/Excel中直接使用DeepSeek功能04游戏引擎学习第217天05DeepSeek RAGFlow构建本地知识库系统06DeepSeek各版本说明与优缺点分析07汽车上的各种质量：整备质量、总质量、装载质量、簧上质量、簧下质量08从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑09本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程10第八节：Nodify 编辑器属性