JavaWeb 笔记 02 (17 - 30)

JS, Vue, Ajax 相关 (17 - 30)

提前声明：本文章仅作个人学习记录，不涉及商业用途。

内容记录于学习途中, 没有按分类进行总结, 可能存在错误或不完整之处。

视频地址

在线讲义地址

第一章 JS 核心语法

一、组成

ECMAScript：JavaScript 的标准, 定义了 JavaScript 的语法和基本对象

DOM：Document Object Model, 操作文档的对象模型

BOM：Browser Object Model, 改变浏览器窗口的行为

二、引入方式

一般在 body 标签底部引入, 确保页面元素加载完成后再执行脚本。结尾分号可选。

1. 内部脚本

<script>console.log("hello world");</script>

2. 外部脚本

<script src="js/script.js"></script>

3. 模块化导出/引入

// Export 默认导出 (每个文件只能有一个)
// utils.js
export function printLog(msg) {
  console.log(msg);
}

// Import
// event.js
import { printLog } from "./utils.js";
printLog("hello world");

<!-- index.html -->
<script src="js/script.js" type="module"></script>

模块化脚本 type="module" 必须通过 HTTP/HTTPS 协议加载，不能通过本地文件系统 file:// 加载。

三、语法

1. 变量声明

JavaScript 为弱类型语言, 变量的类型在运行时才确定。

使用 var（不推荐）、let 声明变量，const 声明常量。

let a = 10;
a = "hello"; // 变量可以重新赋值
console.log(a); // 输出到控制台

var c = 30;
document.write(c); // 输出到页面

const b = 20;
// b = 40; // 常量不能重新赋值
window.alert(b); // 弹出框

变量名命名规则：

只能包含字母、数字、下划线 _ 和美元符号 $，不能以数字开头。
变量名严格区分大小写。
不能使用关键字作为变量名，如 if、for、function 等。

`let`	`var`
块级作用域	函数作用域
不允许重复声明	允许重复声明
提升	不提升
严格模式下报错	不报错

2. 数据类型

数据类型	描述
`number`	数值类型，包括整数、浮点数、`NaN`（非数字）、`Infinity`（无穷大）
`boolean`	布尔类型，只有 `true` 和 `false` 两个值。
`null`	表示空值，即没有值。`null`、`NULL`、`Null` 表示不同的值。
`undefined`	表示未定义的值，即变量声明后，未初始化的值。
`string`	字符串类型，用于表示文本数据。可使用 `''`、`""`、```` 来定义字符串。

使用 typeof 运算符可以查看变量的数据类型。

console.log(typeof 10); // number
console.log(typeof "hello"); // string
console.log(typeof true); // boolean
console.log(typeof null); // object
console.log(typeof undefined); // undefined

模板字符串：使用 `` 定义字符串，可以插入变量。

const name = "Alice";
console.log(`Hello, ${name}!`); // Hello, Alice!

3. 函数

JS 为弱类型语言，定义函数时，形参、返回值都无需指定类型。函数参数默认值为 undefined。

function add(a, b) {
  return a + b;
}

let result = add(2, 3);
console.log(result); // 5

匿名函数

// 函数表达式
const add = function (a, b) {
  return a + b;
};
// 箭头函数
let add = (a, b) => {
  return a + b;
};
// 箭头函数简写
let add = (a, b) => a + b;

4. 自定义对象

let person = {
  name: "Alice",
  age: 25,
  sayHello: function () {
    console.log(
      `Hello, my name is ${this.name} and I am ${this.age} years old.`,
    );
  },
  // sayHello() {} // 方法可以省略 function 关键字
  // sayHello: () => {} // 箭头函数中 this 指向当前函数的父级作用域
};
console.log(person.name); // Alice

5. JavaScript Object Notation

所有 key-value 对用双引号括起来，用冒号连接。

{
  "name": "Alice",
  "age": 25
}

方法	描述
`JSON.stringify()`	将 JavaScript 对象转换为 JSON 字符串。
`JSON.parse()`	将 JSON 字符串转换为 JavaScript 对象。

四、Document Object Model

对象	描述
`Document`	整个文档对象
`Element`	元素对象
`Attribute`	属性对象
`Text`	文本对象
`Comment`	注释对象

获取 DOM 对象

方法	描述	返回值
`document.querySelector('h1')`	返回匹配指定 CSS 选择器的第一个元素。	`Element`
`document.querySelectorAll('#title')`	返回匹配指定 CSS 选择器的所有元素。	`NodeList`
`document.getElementById('id')`	返回具有指定 ID 的元素。	`Element`
`document.getElementsByTagName('div')`	返回所有匹配指定标签名的元素。	`HTMLCollection`
`document.getElementsByClassName('class')`	返回所有匹配指定类名的元素。	`HTMLCollection`

W3C DOM 参考手册

五、事件监听

事件源.addEventListener('事件类型', 事件执行时调用的函数, 是否使用捕获模式)

element.addEventListener(event, function, useCapture)

let btn = document.getElementById("btn");
// 可以多次绑定同一事件
btn.addEventListener("click", function () {
  console.log("按钮被点击了");
});
// 早期写法，多次绑定会覆盖
btn.onclick = function () {
  console.log("按钮被点击了");
};

事件分类	事件类型	描述
鼠标事件	`click`	鼠标点击元素时触发
	`dblclick`	鼠标双击元素时触发
	`mouseenter`	鼠标移入元素时触发
	`mouseleave`	鼠标移出元素时触发
键盘事件	`keydown`	键盘按键按下时触发
键盘事件	`keyup`	键盘按键松开时触发
焦点事件	`focus`	元素获得焦点时触发
焦点事件	`blur`	元素失去焦点时触发
表单事件	`input`	输入框值改变时触发
表单事件	`submit`	表单提交时触发

第二章 Vue.js

Vue.js 官方文档

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。

一、Vue 基础语法

<!-- 3. 定义元素，交由 Vue 管理 -->
<div id="app">
  <!-- 5. 插值表达式 -->
  <h1>{{ message }}</h1>
  <h1>{{ count }}</h1>
</div>
<script type="module">
  // 1. 引入 Vue 模块
  import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
  // 2. 创建 Vue 应用程序
  createApp({
    data() {
      // 4.准备数据
      return {
        message: "Hello World!",
        count: 10,
      };
    },
  }).mount("#app");
</script>

二、Vue 常用指令

指令	描述
`v-for`	循环渲染元素
`v-bind`	绑定属性，如设置元素的 href 属性
`v-if`/`v-else-if`/`v-else`	条件渲染元素，判定为 `true` 时渲染，否则不渲染
`v-show`	条件渲染元素，判定为`true`时显示，否则隐藏
`v-model`	在表单元素上双向绑定数据，如设置元素的 value 属性
`v-on`	绑定事件，如设置元素的 click 事件

1. v-for

<tr v-for="(item, index) in items" :key="item.id"> {{ item }} </tr>

参数	描述
items	遍历数组，需要先在 data 中定义
item	遍历出的元素
index	当前循环项的索引，省略写法 `v-for=item in items`
key	唯一标识符，用于优化性能

2. v-bind

动态标签不能使用插值表达式绑定属性值，只能使用 v-bind 指令。绑定的数据必须在 data 中定义。

<img v-bind:src="emp.avatar" :alt="emp.name" class="avatar" />

3. v-if & v-show

不同	v-if	v-show
语法	`<div v-if="condition"></div>`	`<div v-show="condition"></div>`
原理	基于条件判断是否渲染元素	基于 CSS 样式的 display 属性实现
场景	不频繁切换染	频繁切换显示隐藏

4. v-model

<input v-model="searchForm.name" />

v-model 绑定的数据必须在 data 中定义。

5. v-on

<button v-on:click="handleClick">Click Me</button>
<button @click="handleClick">Click Me</button>

三、Vue 生命周期

Vue 3 生命周期笔记

一、生命周期图示

提示：Vue 3 中 setup 代替了 beforeCreate 和 created。

二、主要钩子函数对照表

阶段	Options API	Composition API (setup)	触发时机
创建	`beforeCreate`	`setup`	实例初始化之后，数据观测之前
创建	`created`	`setup`	实例创建完成，可访问 data，未挂载 DOM
挂载	`beforeMount`	`onBeforeMount`	渲染函数首次被调用前
挂载	`mounted`	`onMounted`	常用：DOM 已挂载，可进行 Ajax、DOM 操作
更新	`beforeUpdate`	`onBeforeUpdate`	数据变了，但 DOM 还没更新
更新	`updated`	`onUpdated`	数据变了，且 DOM 已完成更新
卸载	`beforeUnmount`	`onBeforeUnmount`	常用：实例销毁前，用于清理定时器、解绑事件
卸载	`unmounted`	`onUnmounted`	实例已销毁

除去生命周期钩子函数外的常见选项。

选项	作用	备注
`data`	定义响应式数据	函数，返回一个响应式对象
`methods`	定义方法	用于绑定事件
`computed`	计算属性	依赖的数据发生变化时才会重新计算值
`watch`	监听数据	监听的数据变化时执行回调函数
`props`	接收父组件传递的参数	不能改变
`emits`	触发事件	父组件调用子组件时，用于触发事件
`components`	定义子组件	局部组件
`directives`	定义自定义指令	用于扩展 Vue 的功能

三、代码示例 (Composition API)

import { onMounted, onUnmounted, ref } from "vue";

const count = ref(0);

// 1. 挂载完成后执行
onMounted(() => {
  console.log("组件挂载了，可以发请求了");
});

// 2. 卸载前执行
onUnmounted(() => {
  console.log("组件要走了，清理一下定时器吧");
});

第三章 Ajax

异步请求，无需刷新页面即可与服务器交互。

Axios 帮助手册

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

axios({
  // 请求发送
  method: "post",
  url: "/user/0204",
  data: { name: "0204", age: 18 }, // 请求体数据
})
  .then((result) => {
    //成功回调函数
    console.log(result);
  })
  .catch((error) => {
    // 失败回调函数
    alert(error);
  });

// 请求方式别名
axios
  .post("/user/0204", { name: "0204", age: 18 })
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    alert(error);
  });
</script>

同步请求：阻塞代码执行，等待服务器响应后继续执行。使用 await 取代 .then() 方法。

async search() {
  try {
    // 这里的 params 对象会被 axios 自动拼接到 URL 后面
    const { data: res } = await axios.get(
      "https://web-server.itheima.net/emps/list",
      {
        params: this.searchForm,
      },
    );
    // this.empList = res.data;
    // 将后端数组映射为前端需要的格式
    this.empList = res.data.map((item) => ({
      id: item.id,
      name: item.name,
      gender: item.gender,
      job: item.job,
      avatar: item.image,
      entryDate: item.entrydate,
      lastOpTime: item.updatetime.replace("T", " "), // 顺便把 T 换成空格更好看
    }));
  } catch (err) {
    console.error("搜索请求失败了：", err);
  }
},

posted @ 2026-03-17 18:15 fallw 阅读(9) 评论(0) 收藏举报

刷新页面返回顶部