HTML+CSS、JavaScript、Vue、Ajax

热烈勒温2025-08-30 0:02

目录

HTML+CSS、JavaScript、Vue、Ajax

一、HTML+CSS

1. 常用HTML标签介绍

标签 用途
<html> HTML文档的根元素
<head> 包含文档的元数据，如标题、样式等
<title> 定义文档的标题，显示在浏览器标签页上
<body> 包含文档的可见内容
<h1>-<h6> 标题标签，h1最大，h6最小
<p> 段落标签
<a> 超链接标签，用于链接到其他页面
<img> 图像标签，用于插入图片
<ul> 无序列表
<ol> 有序列表
<li> 列表项
<div> 块级容器，用于布局
<span> 内联容器，用于对文本部分进行样式化
<table> 表格标签
<form> 表单标签，用于用户输入
<input> 输入控件，如文本框、按钮等
<select> 下拉列表
<textarea> 多行文本输入框
<label> 表单控件的标签
<footer> 页面底部区域

2. 定义CSS样式的几种选择器和使用方法

  1. 元素选择器：通过HTML元素名称选择元素

    css 复制代码 
    p { color: red; } /* 所有p标签文本为红色 */

  2. 类选择器 ：通过元素的class属性选择元素，以.开头

    css 复制代码 
    .highlight { background-color: yellow; } /* 所有class为highlight的元素背景为黄色 */

  3. ID选择器 ：通过元素的id属性选择元素，以#开头，id在页面中唯一

    css 复制代码 
    #header { font-size: 24px; } /* id为header的元素字体大小为24px */

  4. 属性选择器：通过元素的属性选择元素

    css 复制代码 
    input[type="text"] { border: 1px solid gray; } /* 所有type为text的input元素有灰色边框 */

  5. 后代选择器：选择某个元素的后代元素

    css 复制代码 
    ul li { list-style: none; } /* ul下的所有li元素去除列表样式 */

  6. 子选择器 ：选择某个元素的直接子元素，使用>

    css 复制代码 
    div > p { margin: 10px; } /* div的直接子元素p有10px外边距 */

  7. 伪类选择器 ：选择元素的特定状态，如:hover、:active等

    css 复制代码 
    a:hover { text-decoration: underline; } /* 鼠标悬停在a标签上时添加下划线 */

3. 盒子模型和flex布局方案的介绍与使用方法

盒子模型

盒子模型是CSS布局的基础，每个元素都被视为一个盒子，包含以下部分：

  • 内容区(content)：元素的实际内容
  • 内边距(padding)：内容区与边框之间的空间
  • 边框(border)：围绕内容区和内边距的线条
  • 外边距(margin)：边框与其他元素之间的空间
css 复制代码 
.box {
  width: 200px; /* 内容区宽度 */
  height: 100px; /* 内容区高度 */
  padding: 10px; /* 内边距 */
  border: 2px solid black; /* 边框 */
  margin: 15px; /* 外边距 */
}
Flex布局

Flex布局（弹性布局）是一种一维布局模型，用于灵活排列容器中的项目。

容器属性：

css 复制代码 
.container {
  display: flex; /* 将容器设置为flex布局 */
  flex-direction: row; /* 项目排列方向：row(默认)、column、row-reverse、column-reverse */
  justify-content: center; /* 主轴对齐方式：flex-start、center、flex-end、space-between、space-around */
  align-items: center; /* 交叉轴对齐方式：flex-start、center、flex-end、stretch、baseline */
  flex-wrap: wrap; /* 是否换行：nowrap(默认)、wrap、wrap-reverse */
  gap: 10px; /* 项目之间的间距 */
}

项目属性：

css 复制代码 
.item {
  flex: 1; /* 项目的伸缩比例，默认为0 */
  order: 2; /* 项目的排列顺序，数值越小越靠前，默认为0 */
  align-self: flex-end; /* 单个项目的交叉轴对齐方式，覆盖容器的align-items */
}

4. 表单标签form的使用方法和注意事项

input标签type的各种取值
  • text：单行文本输入框
  • password：密码输入框，输入内容会被隐藏
  • number：数字输入框
  • email：邮箱输入框，会进行基本的格式验证
  • tel：电话输入框
  • url：URL输入框
  • date：日期选择器
  • time：时间选择器
  • datetime-local：本地日期和时间选择器
  • checkbox：复选框
  • radio：单选按钮
  • file：文件上传
  • submit：提交按钮
  • reset：重置按钮
  • button：普通按钮
  • hidden：隐藏字段，用于提交不显示的表单数据
select标签的用法
html 复制代码 
<select name="city" id="city">
  <option value="">请选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai" selected>上海</option> <!-- selected属性表示默认选中 -->
  <option value="guangzhou">广州</option>
</select>
textarea标签的用法
html 复制代码 
<textarea name="message" rows="4" cols="50" placeholder="请输入留言..."></textarea>
<!-- rows：可见行数，cols：可见列数，placeholder：提示文本 -->
label标签的作用

label标签用于关联表单控件，提高可访问性，点击label文本会聚焦到关联的控件上。

html 复制代码 
<!-- 方法一：通过for属性和控件的id关联 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username">

<!-- 方法二：将控件包含在label内 -->
<label>密码：<input type="password" name="password"></label>
hidden的应用场景

hidden类型的input用于在表单中存储不希望用户看到但需要提交的数据，如记录ID、用户ID等。

html 复制代码 
<input type="hidden" name="article_id" value="123">
action/method/name属性的注意事项
  • action：指定表单提交的URL，表单数据会发送到该URL
  • method：指定提交方法，get(默认)或post。get方法会将数据附加在URL后，适合少量数据；post方法将数据放在请求体中，适合大量数据或敏感数据
  • name：表单控件必须设置name属性，否则其值不会被提交。name属性的值作为提交数据的键
html 复制代码 
<form action="/submit" method="post">
  <input type="text" name="username" required> <!-- required属性表示该字段为必填项 -->
  <button type="submit">提交</button>
</form>

5. 表格标签table的使用方法

html 复制代码 
<table border="1"> <!-- border属性设置边框 -->
  <caption>学生信息表</caption> <!-- 表格标题 -->
  <thead> <!-- 表头部分 -->
    <tr> <!-- 行 -->
      <th>学号</th> <!-- 表头单元格 -->
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody> <!-- 表格主体 -->
    <tr>
      <td>001</td> <!-- 普通单元格 -->
      <td>张三</td>
      <td>20</td>
    </tr>
    <tr>
      <td>002</td>
      <td>李四</td>
      <td>21</td>
    </tr>
  </tbody>
  <tfoot> <!-- 表格底部 -->
    <tr>
      <td colspan="3">总计：2人</td> <!-- colspan属性合并列 -->
    </tr>
  </tfoot>
</table>

6. 底部区域footer的用法

footer标签用于定义文档或节的页脚，通常包含版权信息、联系方式、导航链接等。

html 复制代码 
<footer>
  <p>&copy; 2023 我的网站. 保留所有权利.</p>
  <nav>
    <a href="/about">关于我们</a> | <a href="/contact">联系我们</a>
  </nav>
</footer>

二、JavaScript

1. ECMAScript、BOM、DOM介绍

  • ECMAScript：JavaScript的核心语言标准，定义了语法、数据类型、关键字、保留字、操作符、对象等基础内容。
  • BOM (Browser Object Model) ：浏览器对象模型，提供了与浏览器交互的方法和接口，如window、navigator、screen、history、location等对象。
  • DOM (Document Object Model)：文档对象模型，将HTML文档表示为树状结构，提供了操作文档内容、结构和样式的方法和接口。

2. js的两种引入方式，书写规范和注意事项

引入方式

  1. 内部脚本 ：将JavaScript代码写在<script>标签中，通常放在<body>标签的底部或<head>标签中。

    html 复制代码 
    <script>
  // JavaScript代码
  console.log("Hello, World!");
</script>

  2. 外部脚本 ：将JavaScript代码写在外部.js文件中，通过<script>标签的src属性引入。

    html 复制代码 
    <script src="script.js"></script>
书写规范和注意事项
  • JavaScript区分大小写
  • 语句以分号;结束，虽然可以省略，但建议加上
  • 使用//进行单行注释，/* */进行多行注释
  • 变量名可以包含字母、数字、下划线和美元符号，但不能以数字开头
  • 建议使用驼峰命名法（camelCase）命名变量和函数
  • 代码块使用花括号{}包裹
  • 注意作用域：全局作用域和函数作用域（ES6引入块级作用域）

3. js语法

变量和常量：声明方式、特点、命名规则、注意事项

声明方式：

  • var：函数作用域，可以重复声明，存在变量提升
  • let：块级作用域，不能重复声明，不存在变量提升
  • const：块级作用域，声明常量，不能重复声明，声明时必须赋值，且赋值后不能修改
javascript 复制代码 
var a = 10; // 函数作用域
let b = 20; // 块级作用域
const c = 30; // 常量，值不能修改

命名规则：

  • 只能以字母、下划线_或美元符号$开头
  • 可以包含字母、数字、下划线和美元符号
  • 区分大小写
  • 不能使用JavaScript关键字和保留字作为变量名

注意事项：

  • 尽量使用let和const，避免使用var
  • 对于不需要修改的值，使用const
  • 变量名应具有描述性，清晰表达变量的用途
数据类型：js数据类型介绍、获取数据类型、模板字符串的引用

基本数据类型：

  • String：字符串，如"hello"、'world'
  • Number：数字，如123、45.67
  • Boolean：布尔值，true或false
  • Null：表示空值，只有一个值null
  • Undefined：表示未定义，变量声明但未赋值时为undefined
  • Symbol：ES6新增，表示唯一不变的值
  • BigInt：ES6新增，表示大整数

引用数据类型：

  • Object：对象，如{name: "张三", age: 20}
  • Array：数组，如[1, 2, 3]
  • Function：函数，如function() {}

获取数据类型 ：使用typeof运算符

javascript 复制代码 
typeof "hello"; // "string"
typeof 123; // "number"
typeof true; // "boolean"
typeof null; // "object"（特殊情况）
typeof undefined; // "undefined"
typeof Symbol(); // "symbol"
typeof [1, 2, 3]; // "object"
typeof {}; // "object"
typeof function() {}; // "function"

模板字符串的引用 ：使用反引号`````包裹字符串，可以包含变量和表达式，变量和表达式用${}包裹

javascript 复制代码 
let name = "张三";
let age = 20;
let message = `我叫${name}，今年${age}岁。明年我${age + 1}岁。`;
console.log(message); // 我叫张三，今年20岁。明年我21岁。
函数：具名函数的定义和调用，匿名函数的定义和调用

具名函数的定义和调用：

javascript 复制代码 
// 定义具名函数
function add(a, b) {
  return a + b; // 返回值
}

// 调用函数
let result = add(3, 5);
console.log(result); // 8

注意事项：

  • 形参与返回值无需指定类型
  • 实际参数超过形参个数时，多余的参数会被忽略（可以通过arguments对象获取所有实参）
  • 实际参数少于形参个数时，未传递的形参值为undefined

匿名函数的定义和调用：

  1. 函数表达式：
javascript 复制代码 
let sum = function(a, b) {
  return a + b;
};
sum(2, 3); // 5
  1. 箭头函数：
javascript 复制代码 
let multiply = (a, b) => a * b; // 简洁写法，当函数体只有一条返回语句时可以省略花括号和return
multiply(3, 4); // 12

// 函数体有多条语句时需要使用花括号
let divide = (a, b) => {
  if (b === 0) {
    return "除数不能为0";
  }
  return a / b;
};

注意事项：

  • 箭头函数没有自己的this，它的this继承自外层作用域
  • 箭头函数不能用作构造函数，不能使用new关键字调用
  • 箭头函数没有arguments对象
自定义对象：格式与对象中各属性的写法与调用方式
javascript 复制代码 
// 对象字面量方式创建对象
let person = {
  name: "张三", // 属性名: 属性值
  age: 20,
  gender: "男",
  sayHello: function() { // 方法
    console.log(`Hello, my name is ${this.name}`);
  },
  // ES6简写方式定义方法
  getAge() {
    return this.age;
  }
};

// 调用对象属性和方法
console.log(person.name); // 张三
console.log(person["age"]); // 20（另一种属性访问方式）
person.sayHello(); // Hello, my name is 张三
console.log(person.getAge()); // 20
json：书写规范，JSON对象的stringify和parse方法的用法

JSON书写规范：

  • 键必须用双引号""包裹
  • 值可以是字符串、数字、布尔值、null、数组或对象
  • 不能包含函数、日期对象等特殊类型（需要转换后才能序列化）
  • 数组和对象的最后一个元素后面不能有逗号
json 复制代码 
{
  "name": "张三",
  "age": 20,
  "isStudent": true,
  "hobbies": ["reading", "sports"],
  "address": {
    "city": "北京",
    "street": "中关村大街"
  }
}

JSON.stringify()：将JavaScript对象转换为JSON字符串

javascript 复制代码 
let person = { name: "张三", age: 20 };
let jsonStr = JSON.stringify(person);
console.log(jsonStr); // {"name":"张三","age":20}

JSON.parse()：将JSON字符串转换为JavaScript对象

javascript 复制代码 
let jsonStr = '{"name":"张三","age":20}';
let person = JSON.parse(jsonStr);
console.log(person.name); // 张三

4. DOM：DOM的作用，获取DOM对象的方式，DOM对象常用的属性和方法

DOM的作用：DOM（文档对象模型）将HTML文档表示为树状结构，使JavaScript能够访问和操作文档的内容、结构和样式。

获取DOM对象的方式：

  • document.getElementById(id)：通过id获取单个元素
  • document.getElementsByClassName(className)：通过class获取元素集合
  • document.getElementsByTagName(tagName)：通过标签名获取元素集合
  • document.querySelector(selector)：通过CSS选择器获取第一个匹配的元素
  • document.querySelectorAll(selector)：通过CSS选择器获取所有匹配的元素集合

querySelector和querySelectorAll的区别：

  • querySelector返回第一个匹配的元素，如果没有匹配的元素返回null
  • querySelectorAll返回所有匹配的元素集合（NodeList），即使只有一个匹配元素

DOM对象常用的属性和方法：

  • 属性：

    • innerHTML：获取或设置元素的HTML内容
    • textContent：获取或设置元素的文本内容（不包含HTML标签）
    • className：获取或设置元素的class属性
    • id：获取或设置元素的id属性
    • style：获取或设置元素的内联样式
    • src、href、alt等：元素特有的属性

  • 方法：

    • getElementsByTagName(tagName)：获取元素内指定标签名的子元素集合
    • getElementsByClassName(className)：获取元素内指定class的子元素集合
    • querySelector(selector)：获取元素内第一个匹配CSS选择器的子元素
    • querySelectorAll(selector)：获取元素内所有匹配CSS选择器的子元素集合
    • appendChild(node)：向元素添加子节点
    • removeChild(node)：从元素中移除子节点
    • setAttribute(name, value)：设置元素的属性
    • getAttribute(name)：获取元素的属性值
    • addEventListener(event, listener)：为元素添加事件监听器

5. 事件监听（事件绑定）

什么是事件监听：事件监听是JavaScript中响应用户交互的机制，当特定事件发生时（如按钮被点击、鼠标移动到元素上、按下键盘按键等），执行相应的函数。

语法 ：事件源.addEventListener('事件类型', 执行的函数)

javascript 复制代码 
let button = document.querySelector('button');
button.addEventListener('click', function() {
  console.log('按钮被点击了');
});

与使用onclick的区别：

  • addEventListener可以为同一个元素的同一个事件添加多个监听器，而onclick会覆盖之前的赋值
  • addEventListener可以更灵活地控制事件的捕获和冒泡阶段
  • addEventListener可以通过removeEventListener移除事件监听器，而onclick只能通过赋值null来移除

常见事件类型介绍：

  • 鼠标事件 ：click（点击）、dblclick（双击）、mouseover（鼠标移入）、mouseout（鼠标移出）、mousedown（鼠标按下）、mouseup（鼠标释放）、mousemove（鼠标移动）
  • 键盘事件 ：keydown（键盘按下）、keyup（键盘释放）、keypress（键盘按下并释放）
  • 焦点事件 ：focus（获取焦点）、blur（失去焦点）
  • 表单事件 ：submit（表单提交）、reset（表单重置）、change（元素值改变）、input（用户输入）
  • 文档事件 ：DOMContentLoaded（DOM加载完成）、load（页面所有资源加载完成）

6. js模块化的用法和注意事项

模块化的用法 ：

ES6引入了模块化系统，允许将代码分割成多个文件，每个文件是一个模块。

  1. 导出模块 ：使用export关键字导出模块中的变量、函数、类等。

    javascript 复制代码 
    // module.js
export const name = "模块";
export function sayHello() {
  console.log("Hello from module");
}
// 或者
const age = 18;
function getAge() {
  return age;
}
export { age, getAge };
// 默认导出
export default function defaultFunc() {
  console.log("默认导出的函数");
}

  2. 导入模块 ：使用import关键字导入其他模块。

    javascript 复制代码 
    // main.js
import { name, sayHello } from './module.js';
import { age as moduleAge, getAge } from './module.js'; // 重命名导入
import defaultFunc from './module.js'; // 导入默认导出

console.log(name); // 模块
sayHello(); // Hello from module
console.log(moduleAge); // 18
getAge(); // 18
defaultFunc(); // 默认导出的函数

  3. 在HTML中使用模块 ：需要在<script>标签中添加type="module"属性。

    html 复制代码 
    <script type="module" src="main.js"></script>

注意事项：

  • 模块具有自己的作用域，模块内声明的变量不会污染全局作用域
  • 模块中的代码会延迟执行，类似于defer属性
  • 模块只能通过HTTP/HTTPS协议加载，本地文件（file://协议）可能会有安全限制
  • 导入路径必须是完整的相对路径或绝对路径，不能省略.js扩展名（某些构建工具可能支持）
  • 一个模块只能有一个默认导出，但可以有多个命名导出

三、Vue

1. 认识Vue（声明式渲染、组件系统、客户端路由、状态管理、构建工具）

  • 声明式渲染：Vue允许采用简洁的模板语法来声明式地将数据渲染进DOM，开发者只需要关注数据和模板，而不需要手动操作DOM。
  • 组件系统：Vue的组件系统允许将页面拆分成独立的、可复用的组件，每个组件包含自己的模板、逻辑和样式。
  • 客户端路由：通过Vue Router实现单页应用（SPA）的路由管理，实现页面的无刷新切换。
  • 状态管理：通过Vuex（Vue 2）或Pinia（Vue 3）实现组件间的状态共享和管理。
  • 构建工具：Vue提供了Vue CLI（命令行工具）和Vite等构建工具，用于快速搭建项目、处理资源、打包优化等。

2. Vue创建实例和使用（ES模块），页面的渲染指示

创建Vue实例：

javascript 复制代码 
// 引入Vue（假设使用ES模块）
import { createApp } from 'vue';
import App from './App.vue';

// 创建Vue应用实例
const app = createApp(App);

// 挂载应用到DOM元素
app.mount('#app');

页面的渲染指示 ：

Vue使用模板语法将数据渲染到页面上，模板中可以使用双大括号{``{}}进行文本插值，使用指令进行元素属性绑定、条件渲染、列表渲染等。

html 复制代码 
<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1> <!-- 文本插值 -->
    <p :title="title">这是一个带标题的段落</p> <!-- 属性绑定 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!",
      title: "这是段落的标题"
    };
  }
};
</script>

3. 常用指令：v-for、v-bind、v-if/v-else-if/v-else、v-show、v-model、v-on的作用、语法、参数说明、使用场景（体现v-if与v-show的区别）、注意事项

v-for

作用 ：用于列表渲染，遍历数组或对象。
语法 ：v-for="(item, index) in items"（遍历数组）或v-for="(value, key, index) in object"（遍历对象）
使用场景：需要根据数据动态生成列表时。

html 复制代码 
<ul>
  <li v-for="(item, index) in fruits" :key="index">
    {{ index + 1 }}. {{ item }}
  </li>
</ul>

<script>
export default {
  data() {
    return {
      fruits: ["苹果", "香蕉", "橙子"]
    };
  }
};
</script>

注意事项 ：必须使用:key为每个列表项提供唯一标识，帮助Vue高效地更新DOM。

v-bind

作用 ：动态绑定HTML属性、组件props等。
语法 ：v-bind:属性名="表达式"，简写为:属性名="表达式"
使用场景：需要动态设置元素属性时，如图片的src、链接的href、元素的class和style等。

html 复制代码 
<img :src="imageUrl" :alt="imageAlt">
<a :href="linkUrl">链接</a>
<div :class="{ active: isActive }"></div> <!-- 动态绑定class -->
<div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div> <!-- 动态绑定style -->
v-if/v-else-if/v-else

作用 ：根据条件渲染元素，条件为false时元素不会被渲染到DOM中。
语法 ：v-if="条件", v-else-if="条件", v-else
使用场景：条件不经常变化，或需要完全移除元素时。

html 复制代码 
<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 80">良好</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>
v-show

作用 ：根据条件显示或隐藏元素，条件为false时元素会被隐藏（通过设置display: none），但仍会被渲染到DOM中。
语法 ：v-show="条件"
使用场景：条件需要频繁切换时。

v-if与v-show的区别：

  • v-if是"真正"的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
  • v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做------直到条件第一次变为真时，才会开始渲染条件块。
  • v-show就简单得多------不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
  • 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
v-model

作用 ：实现表单输入和应用状态之间的双向绑定。
语法 ：v-model="变量"
使用场景：用于表单元素，如input、select、textarea等。

html 复制代码 
<input type="text" v-model="username">
<select v-model="selectedCity">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>
<textarea v-model="message"></textarea>
<input type="checkbox" v-model="isAgree"> 同意
v-on

作用 ：为元素绑定事件监听器。
语法 ：v-on:事件类型="处理函数"，简写为@事件类型="处理函数"
使用场景：需要响应用户交互事件时，如点击、提交表单等。

html 复制代码 
<button @click="handleClick">点击我</button>
<form @submit.prevent="handleSubmit"> <!-- .prevent修饰符阻止默认行为 -->
  <input type="text" v-model="username">
  <button type="submit">提交</button>
</form>

<script>
export default {
  methods: {
    handleClick() {
      alert("按钮被点击了");
    },
    handleSubmit() {
      console.log("表单提交了，用户名：", this.username);
    }
  }
};
</script>

注意事项 ：可以使用事件修饰符（如.prevent、.stop、.once等）简化事件处理逻辑。

4. Vue生命周期及对应的8个方法介绍，典型的应用场景介绍

Vue实例从创建到销毁的过程称为生命周期，Vue提供了一系列生命周期钩子函数，允许在不同阶段执行自定义逻辑。

8个生命周期方法：

  1. beforeCreate：实例创建前调用，此时数据观测和事件机制尚未初始化。

    • 应用场景：几乎不用，因为此时无法访问数据和方法。

  2. created ：实例创建完成后调用，此时数据观测、属性和方法的运算、事件回调已经配置完成，但DOM尚未生成，$el属性不可见。

    • 应用场景：初始化数据、发送Ajax请求获取初始数据。

  3. beforeMount：挂载开始前调用，此时模板已编译，但尚未挂载到DOM。

    • 应用场景：可以在此时修改数据，不会触发重新渲染。

  4. mounted：实例挂载到DOM后调用，此时可以访问DOM元素。

    • 应用场景：操作DOM、初始化第三方库（如图表库、地图库等）。

  5. beforeUpdate：数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。

    • 应用场景：可以在此时进一步修改数据，不会触发额外的重渲染。

  6. updated：数据更新导致虚拟DOM重新渲染和打补丁后调用。

    • 应用场景：操作更新后的DOM。

  7. beforeUnmount：实例销毁前调用，此时实例仍然完全可用。

    • 应用场景：清除定时器、解绑事件监听器、取消Ajax请求等。

  8. unmounted：实例销毁后调用，此时所有的事件监听器已被移除，子实例也被销毁。

    • 应用场景：做一些最终的清理工作。

典型应用场景示例：

html 复制代码 
<script>
export default {
  data() {
    return {
      dataList: [],
      timer: null
    };
  },
  created() {
    // 获取初始数据
    this.fetchData();
  },
  mounted() {
    // 初始化定时器
    this.timer = setInterval(() => {
      console.log("定时器执行中...");
    }, 1000);
    // 操作DOM
    this.$el.querySelector("h1").style.color = "red";
  },
  beforeUnmount() {
    // 清除定时器
    clearInterval(this.timer);
    // 解绑事件监听器
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    fetchData() {
      // 发送Ajax请求获取数据
      fetch("/api/data")
        .then(response => response.json())
        .then(data => {
          this.dataList = data;
        });
    },
    handleResize() {
      // 处理窗口大小变化事件
    }
  }
};
</script>

四、Ajax

1. 什么是Ajax、作用、应用场景

什么是Ajax：Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现网页的异步更新。

作用：

  • 实现网页的局部刷新，提高用户体验
  • 减少网络数据传输量，提高性能
  • 实现异步通信，避免页面阻塞

应用场景：

  • 表单提交验证（如用户名是否已存在）
  • 实时数据更新（如股票行情、聊天消息）
  • 搜索建议（如输入关键词时显示相关搜索建议）
  • 分页加载数据
  • 无刷新上传文件

2. Axios引入和发送Ajax请求的方式（使用请求方式别名模式）、async和await关键字的作用和注意事项

Axios引入 ：

Axios是一个基于Promise的HTTP客户端，用于发送Ajax请求。可以通过CDN引入或使用npm安装。

通过CDN引入：

html 复制代码 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

使用npm安装：

bash 复制代码 
npm install axios

然后在项目中引入：

javascript 复制代码 
import axios from 'axios';

发送Ajax请求的方式（使用请求方式别名模式） ：

Axios提供了多种请求方式的别名，如get、post、put、delete等。

  1. GET请求：用于获取数据
javascript 复制代码 
axios.get('/api/users')
  .then(response => {
    console.log(response.data); // 服务器返回的数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });
  1. POST请求：用于提交数据
javascript 复制代码 
axios.post('/api/users', {
    name: '张三',
    age: 20
  })
  .then(response => {
    console.log('提交成功:', response.data);
  })
  .catch(error => {
    console.error('提交失败:', error);
  });
  1. 其他请求方式：
javascript 复制代码 
// PUT请求：更新数据
axios.put('/api/users/1', { name: '李四' });

// DELETE请求：删除数据
axios.delete('/api/users/1');

// PATCH请求：部分更新数据
axios.patch('/api/users/1', { age: 21 });

async和await关键字的作用和注意事项 ：
async和await是ES2017引入的语法，用于简化Promise的异步代码，使异步代码看起来像同步代码。

作用：

  • async关键字用于声明异步函数，异步函数返回一个Promise对象
  • await关键字用于等待Promise对象的状态变为resolved，只能在async函数中使用

使用示例：

javascript 复制代码 
async function fetchData() {
  try {
    const response = await axios.get('/api/users');
    console.log(response.data);
    return response.data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error; // 抛出错误，让调用者处理
  }
}

// 调用异步函数
fetchData()
  .then(data => {
    // 处理数据
  })
  .catch(error => {
    // 处理错误
  });

注意事项：

  • await只能在async函数中使用，否则会报错
  • async函数返回的是一个Promise对象，可以使用.then()和.catch()处理结果和错误
  • 通常使用try/catch语句捕获await可能抛出的错误
  • await会暂停当前async函数的执行，直到Promise处理完成，但不会阻塞整个JavaScript线程
  • 多个await操作会按顺序执行，如果需要并行执行多个异步操作，可以使用Promise.all()
热门推荐
01UV安装并设置国内源02不再让Windows更新！&Edge游戏助手卸载及关闭自动更新03KGG转MP3工具|非KGM文件|解密音频04奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口05Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code06Linux下V2Ray安装配置指南07【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）08突破百度网盘的下载限速，两种方法教会你【超详细】09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10LMArena 图生图，生成产品图提示词prompt