L1-Web前端基础

1 学习计划

1775977068350

2 Web标准

Web 标准也称网页标准，由一系列的标准组成，大部分由 W3C（World Wide Web Consortium，万维网联盟）负责制定。

三个组成部分：

  • HTML：负责网页的结构（页面元素和内容）。
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。
  • JavaScript：负责网页的行为（交互效果）。

3 HTML - CSS

3.1 HTML介绍

HTML（HyperText Markup Language）：超文本标记语言。

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
  • 标记语言：由标签 “<标签名>” 构成的语言
    • HTML标签都是预定义好的。例如：使用<h1>展示标题，使用<img>展示图片，使用<video>展示视频。
    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

1775978145575

3.2 CSS介绍

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式(表现)。

1775978530373

3.3 HTML快速入门

  1. 新建文本文件，后缀名改为 .html
  2. 编写 HTML 的基本骨架，定义标题
  3. 在 <body> 中填写内容

1775978915069

  1. HTML 标签特点

    • html 标签不区分大小写，建议小写

    • html 标签的属性值使用单引号 / 双引号都可以

    • html 语法结构松散，但是建议规范书写

3.4 前端开发工具

Visual Studio Code（简称 VS Code ） 是 Microsoft 于 2015 年 4 月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也支持其他编程语言（例如：C++、Java、Python、PHP、Go 等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网：https://code.visualstudio.com

常用插件：

  • Chinese (Simplified) Language Pack
  • HTML CSS Support
  • JavaScript (ES6) code snippets
  • Mithril Emmet
  • Path Intellisense
  • Vue 3 Snippets
  • Auto Close Tag
  • Auto Rename Tag
  • open in browser
  • Live Server
  • Vue (Official)
  • File Utils
  • IntelliJ IDEA Keybindings
  • TRAE AI: Coding Assistant
  • TONGYI Lingma

常用配置文件 setting.json：

json">
{
    "workbench.colorTheme": "Default Dark+",
    "workbench.statusBar.visible": false,
    "editor.fontFamily": "'Courier New', Consolas, monospace",
    "editor.fontSize": 20,
    "editor.lineHeight": 1.8,
    "editor.tabSize": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit"
    },
    "editor.minimap.enabled": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "git.confirmSync": false,
    "terminal.integrated.defaultProfile.windows": "Command Prompt"
}

3.5 标题排版

标题标签：<h1> - <h6>

超链接标签：<a href="" target="">...</a>

href：指定资源访问的 url

target：指定在何处打开资源链接

  • _self：默认值，在当前页面打开
  • _blank：在空白页面打开
html">
<!-- 定义一个超链接，里面展示 央视网 -->
<!--  a 超链接标签：
        href：链接地址 - url地址
        target：打开方式
            _blank：新窗口打开
            _self：本窗口打开(默认)
-->
<a href="https://www.cctv.com" target="_blank">央视网</a>

3.6 标题样式

css引入方式：

  • 行内样式：写在标签的style属性中（配合JavaScript使用）

    span 标签：是一个无语义的标签。示例：<span style="color: gray;">2024年05月15日 20:07</span>

  • 内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）

    html">
    <!-- 一般约定写在head标签中 -->
<style>
span {
    color: gray;
}
<style>

  • 外部样式：写在一个单独的.css文件中（需要通过 link 标签在网页中引入）

    css">
    span {
    color: gray;
}
    html">
    <link rel="stylesheet" href="css/news.css">

颜色表示形式

表示方式 属性值 说明 示例
关键字 颜色英文单词 red、green、blue red、green、blue…
rgb 表示法 rgb(r,g,b) 红绿蓝三原色，取值：0-255 rgb(0,0,0)、rgb(255,0,0)
rgba 表示法 rgba(r,g,b,a) 红绿蓝三原色，a 表示透明度，取值：0-1 rgba(0,0,0,0.3)、rgba(255,0,0,0.5)
十六进制表示法 #rrggbb #开头，将数字转换成十六进制表示 #000000、#ff0000，简写：#000、#f00

CSS 选择器是用来选取需要设置样式的元素（标签）的。

选择器 写法 示例 示例说明
元素选择器 元素名称 {...} h1 {...} 选择页面上所有的<h1>标签
类选择器 .class属性值 {...} .cls {...} 选择页面上所有 class 属性为 cls 的标签
id 选择器 #id属性值 {...} #hid {...} 选择页面上 id 属性为 hid 的标签
分组选择器 选择器1,选择器2 {...} h1,h2 {...} 选择页面上所有的<h1>和<h2>标签
属性选择器 元素名称[属性] {...} input[type] {...} 选择页面上有 type 属性的<input>标签
属性选择器 元素名称[属性名="值"] {...} input[type="text"] {...} 选择页面上 type 属性为 text 的<input>标签
后代选择器 元素1 元素2 {...} form input {...} 选择<form>标签内的所有<input>标签

优先级：id选择器 > 类选择器 > 元素选择器

视频展示

html">
<!-- 定义一个视频，引入 video/news.mp4 -->
<!-- video标签属性
    src：视频地址
    controls：显示播放控件
    autoplay：自动播放
    width：视频宽度(建议：宽度和高度只设置一个即可，另一个会等比例缩放)
    height：视频高度
    单位：
        px：像素
        %：百分比 (相对于父元素的百分比)
-->
<video src="video/news.mp4" controls width="800px"></video>

音频展示

html">
<!-- 定义一个音频，引入 audio/news.mp3 -->
<audio src="audio/news.mp3" controls></audio>

图片展示

html">
<!-- 定义一张图片，引入 img/1.gif -->
<!-- img标签属性：
    src：图片的访问地址
        1. 绝对路径
            1.1 绝对磁盘路径：C:\Users\Administrator\Desktop\img\1.gif（不推荐）
            1.2 绝对网络路径：https://www.baidu.com/img/1.gif
        2. 相对路径
            2.1 ./ ：当前目录（可以省略），如：./img/1.gif
            2.2 ../：上一级目录
    width：图片宽度(建议：宽度和高度只设置一个即可，另一个会等比例缩放)
    height：图片高度
-->
<img src="img/1.gif" ></img>

段落属性

css">
p {
      /* 我想增加行高 */
      line-height: 2; /* 2倍行高 */
      /* 我想增加段落的缩进 */
      text-indent: 2em; /* 2个缩进 */
}

3.7 常用标签

<br> 表示换行（有几个将换几行）

<p>...</p> 段落标签

<b>...</b> 和 <strong>...</strong> 都表示加粗显示

&nbsp; 表示空格符，在浏览器中会过滤掉空格，因此需要特定的字符表示空格

标签 作用 属性 / 说明
<b> / <strong> 加粗 <strong> 具有强调语义
<u> / <ins> 下划线 <ins> 具有强调语义
<i> / <em> 倾斜 <em> 具有强调语义
<s> / <del> 删除线 <del> 具有强调语义
字符实体 属性 / 说明
&nbsp; 空格
&lt; <
&gt; >

3.8 盒子模型

  • 盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局
  • 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

1775989587782

布局标签：网页开发中，会使用 div 和 span 这两个没有语义的布局标签。

特点对比

  • <div> 标签
    • 一行只显示一个（独占一行）
    • 宽度默认是父元素的宽度，高度默认由内容撑开
    • 可以设置宽高（width、height）
  • <span> 标签
    • 一行可以显示多个
    • 宽度和高度默认由内容撑开
    • 不可以设置宽高（width、height）

1775989889166

html">
<title>盒子模型</title>
<style>
#div1 {
    width: 400px; /* 宽度：400像素；默认是内容展示区域的宽度 */
    height: 300px; /* 高度：300像素；默认是内容展示区域的高度 */
    background-color: #ffff00;
    padding: 30px; /* 内边距：30像素 */
    box-sizing: border-box;
    border: 20px solid #ff00ff; /* 边框：20像素 */
    margin: 30px auto; /* 外边距：30像素 */
}
</style>

注意事项：如果只需要设置某一个方位的边框、内边距、外边距，可以在属性名后加上 -位置，如：

padding-top, padding-left , padding-right…

3.9 页面原型

指在应用程序开发初期，由产品经理制作的一个早期项目模型，它用于展示页面的基本布局、功能和交互设计。通常用来帮助设计师、开发者等更好地理解和讨论最终产品的外观和行为。如下示例：

1776036106814

3.10 flex 布局

  • flex 是 flexible Box 的缩写，意为 “弹性布局”，是一种一维的布局模型。flex 布局可以为元素之间提供强大的空间分布和对齐能力。
  • 通过给父容器添加 flex 的相关属性，来控制子元素的位置和排列方式。

1776036595541

示例：

css">
#container {
    background-color: #f1eeee;
    width: 500px;
    height: 300px;

    display: flex; /* flex弹性布局 */
    flex-direction: row; /* 默认为row水平布局，设置主轴 */
    /* flex-start：从头开始排列 */
    /* flex-end：从尾部开始排列 */
    /* center：在主轴上居中对齐 */
    /* space-around：平分剩余空间 */
    /* space-between：先两边贴边，再平分剩余空间 */
    justify-content: space-between;
}

3.11 表单标签

  • 表单：在网页中主要负责数据采集功能，如注册、登录等数据采集。

  • 标签：<form>

  • 表单项

    ：不同类型的 input 元素、下拉列表、文本域等。

    • <input>：定义表单项，通过 type 属性控制输入形式（text/password/sumbit…）
    • <select>：定义下拉列表，option> 定义列表项
    • <textarea>：定义文本域

  • 属性：

    • action：规定当提交表单时向何处发送表单数据，URL
    • method：规定用于发送表单数据的方式。GET、POST（想正常提交数据，表单项必须添加name属性）

1776037402416

<input>表单项 type 属性取值详解：

1776038410217

<input> 表单项示例：

html">
<body>
<!-- form表单：
    action：表单数据提交的url地址
    method：提交方式
        get：默认，表单数据会出现在url后面，形式：/save?name=Tom&age=18
        特点：
            1. 如果表单中包含了隐私数据，get方式并不安全，不推荐使用该方式。
            2. 在浏览器中get请求的大小是有限制的，不适合提交大数据量的表单。
        post：表单数据会在消息体/请求体中提交到服务器
        特点：
            1. 安全。
            2. 请求大小没有限制
    注意：表单项要想能够采集数据，必须得设置name属性，表示当前表单项的名字
-->
<form action="/save" method="post">
    姓名: <input type="text" name="name">
    年龄: <input type="text" name="age">
    <input type="submit" value="提交">
</form>
</body>

<from> 表单标签示例：

html">
<!-- value：表单项提交的值 -->
<form action="" method="post">
    姓名: <input type="text" name="name"> <br><br>

    密码: <input type="password" name="password"> <br><br>
	
    <!-- 注意同一组单选项name属性必须一致，value属性值是表单提交值，如：男 -> 1 -->
    性别: <input type="radio" name="gender" value="1"> 男
    <!-- label标签用来提升用户体验，即添加后不需要用户精准点击圈才会被选中 -->
    <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>

    爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
    <label><input type="checkbox" name="hobby" value="game"> game </label>
    <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>

    图像: <input type="file" name="image"> <br><br>

    生日: <input type="date" name="birthday"> <br><br>

    时间: <input type="time" name="time"> <br><br>

    日期时间: <input type="datetime-local" name="datetime"> <br><br>
    
    学历: <select name="degree">
        <option value="">---------- 请选择 ----------</option>
        <option value="1">大专</option>
        <option value="2">本科</option>
        <option value="3">硕士</option>
        <option value="4">博士</option>
    </select> <br><br>

    <!-- cols表示初始输入大小为30个字符，rows表示可输入10行 -->
    描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>

    <input type="hidden" name="id" value="1">

    <!-- 表单常见按钮 -->
    <input type="button" value="按钮">
    <input type="reset" value="重置">
    <input type="submit" value="提交">
    <br>
</form>

案例：

html">
<!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post">
    <!-- 注意：
		placeholder 提示信息
		for="name" 表示绑定id="name" 的表单项，即当点击for="name"对应的label后，将自动将鼠标聚焦到id="name"对应的label
	-->
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入姓名">
    
    <!-- input的提交标签可以使用button替换 -->
    <button type="sumbit">查询</button>

3.12 表格数据

表格标签

1776041276416

示例

html">
<!-- 表格展示区 -->
<table>
  <!-- 表头 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>头像</th>
      <th>职位</th>
      <th>入职日期</th>
      <th>最后操作时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <!-- 表格的主体内容 -->
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td><img src="https://via.placeholder.com/40" alt="头像"></td>
      <td>前端开发工程师</td>
      <td>2023-07-15</td>
      <td>2025-04-13 10:23:45</td>
      <td><button>编辑</button> <button>删除</button></td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td><img src="https://via.placeholder.com/40" alt="头像"></td>
      <td>产品经理</td>
      <td>2022-03-01</td>
      <td>2025-04-12 16:42:18</td>
      <td><button>编辑</button> <button>删除</button></td>
    </tr>
    <tr>
      <td>王五</td>
      <td>男</td>
      <td><img src="https://via.placeholder.com/40" alt="头像"></td>
      <td>后端开发工程师</td>
      <td>2024-01-08</td>
      <td>2025-04-13 09:05:32</td>
      <td><button>编辑</button> <button>删除</button></td>
    </tr>
  </tbody>
</table>

总结

类别 标签 说明
文本处理标签 <h1> - <h6> 一级标题 - 六级标题
<br>、<p> 换行、段落
<strong>、<em>、<ins>、<del> 文本加粗、倾斜、下划线、删除线
<a href="..."> 超链接（属性：href、target）
图片、音视频标签 <img src="..."> 图片（路径：绝对路径、相对路径）
<audio src="...">、<video src="..."> 音频、视频
布局标签 <div>、<span> 没有语义的布局标签，配合 CSS 实现页面布局
表格标签 <table>、<thead>、<tbody> 表格、表头、表格主体
<tr> / <th>、<td> 行 / 单元格
表单标签 <form> 定义表单（属性：action、method）
<input type="text/button"> 表单项（文本输入框、按钮…）
<select> / <option> 表单项（下拉列表 / 选项）
类别 属性 说明
盒子模型 作用：控制元素尺寸、内边距、边框、外边距，从而控制页面的布局展示 -
width、height 高度、宽度
box-sizing 高度和宽度的计算方式；content-box、border-box
padding 内边距（上、右、下、左；上下、左右）
border 边框
margin 外边距（上、右、下、左；上下、左右）
flex 弹性布局 作用：是一种一维的布局模型，为元素之间提供强大的空间分布和对齐能力 -
display flex：使用 flex 布局
flex-direction 设置主轴方向（row：x 轴，水平方向；column：y 轴，垂直方向）
justify-content 子元素在主轴上的对齐方式

4 JavaScript

4.1 什么是 JavaScript

JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，用来控制网页行为，实现页面的交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，但是基础语法类似。

组成

  • ECMAScript：规定了 JS 基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
  • BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
  • DOM：文档对象模型，用于操作 HTML 文档，如：改变标签内的内容、改变标签内字体样式等。

ECMA：ECMA 国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而 JavaScript 是遵守 ECMAScript 的标准的（ES2024 是最新版本）。

4.2 JS引入方式

内部脚本

将 JS 代码定义在 HTML 页面中

  • JavaScript 代码必须位于 <script></script> 标签之间
  • 在 HTML 文档中，可以在任意地方，放置任意数量的 <script>
  • 一般会把脚本置于 <body> 元素的底部，可改善显示速度

外部脚本

将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中

1776042509514

4.3 变量 & 常量

  • JS 中用 let 关键字来声明变量（弱类型语言，变量可以存放不同类型的值）。

变量名命名规则

  1. 只能用 字母、数字、下划线（_）、美元符号（$） 组成，且数字不能开头
  2. 变量名严格区分大小写，如 name 和 Name 是不同的变量
  3. 不能使用关键字，如：let、var、if、for 等

JS 常量声明

  • JS 中用 const 关键字来声明常量。
  • 一旦声明，常量的值就不能改变（不可以重新赋值）。

注意事项

  1. 声明即赋值：const 声明常量时必须同时初始化（直接赋值），例如：const PI = 3.14;

  2. 引用类型的特殊性：const 限制的是变量指向的内存地址，对于对象 / 数组，其内部属性 / 元素仍可修改，例如：

    javascript">
    const user = { name: "Tom" };
user.name = "Jerry"; // 合法：对象内容可修改
// user = {}; // 非法：重新赋值会报错

  3. 作用域与命名：const 作用域与 let 一致（块级作用域），命名规则也与变量相同（字母、数字、_、$ 组成，数字不能开头，严格区分大小写，不能使用关键字）。

示例

html">
<body>
<script>
    //1. 声明变量（JS是弱类型语言，变量可存放不同类型值）
    // let a = 10;
    // a = "Hello";
    // a = true;

    // alert(a); //弹出框

    //2. 声明常量
    const PI = 3.14;
    // PI = 5.0; // 报错：常量不可重新赋值

    console.log(PI); //输出到控制台
    // document.write(PI); //输出到body区域(不常用)
</script>
</body>

小结

1. 变量 / 常量

  • 特点：JS 是弱类型语言，变量可以存放不同类型的值
  • 声明：
    • let：声明变量
    • const：声明常量，一旦声明，常量的值不能改变
  • 注意：
    • 在早期的 js 中，声明变量还可以使用var，但是并不严谨（不推荐）

2. 输出语句

  • window.alert()：弹出警告框（使用频次较高）
  • console.log()：写入浏览器控制台（使用频次较高）
  • document.write()：向 HTML 的 body 内输出内容

4.4 数据类型

  • JavaScript 的数据类型分为：基本数据类型和引用数据类型（对象）。

  • 基本数据类型：

    • number：数字（整数、小数、NaN (Not a Number)）
    • boolean：布尔。true, false
    • null：对象为空。JavaScript 是大小写敏感的，因此 null、Null、NULL 是完全不同的
    • undefined：当声明的变量未初始化时，该变量的默认值是 undefined
    • string：字符串，单引号、双引号、反引号皆可，推荐使用单引号

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

    javascript">
    let a = 20;
alert(typeof a); // 获取数据类型

// 特殊案例
alert(typeof null); // 获取的数据类型结果为 object
let a;
alert(typeof a); // 获取的数据类型结果为 undefined

  • 模板字符串语法：

    • “``”（反引号，英文输入模式下按键盘的 tab 键上方波浪线～那个键）
    • 内容拼接变量时，使用 ${} 包住变量
html">
<script>
let name = 'Tom';
let age = 18;
console.log('大家好，我是新入职的' + name + '，今年' + age + '岁了，请多多关照');
console.log(`大家好，我是新入职的${name}，今年${age}岁了，请多多关照`);
</script>

4.5 具名函数

函数（ function ）是被设计用来执行特定任务的代码块，方便程序的封装复用。

  1. 函数定义：JavaScript 中的函数通过 function 关键字进行定义，语法为：

    javascript">
    // 通用语法 --> 具名函数
function functionName(参数1, 参数2 ...){
    //要执行的代码
}

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

  2. 函数调用：函数名称 (实际参数列表)

    javascript">
    let result = add(10,20);
alert(result);

  3. 注意事项：由于 JS 是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

4.6 匿名函数

匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式 和 箭头函数。

  • 函数表达式

    javascript">
    let add = function(a, b){
    return a + b;
}

  • 箭头函数

    javascript">
    let add = (a, b) => {
    return a + b;
}

  • 匿名函数定义后，可以通过变量名直接调用。

    javascript">
    let result = add(10,20);
alert(result);

4.7 自定义对象

1776045570519

注意：此处的方法声明不推荐使用箭头函数，因为它的this指向的是父类

javascript">
let user = {
    name: 'Tom',
    age: 18,
    gender: '男',
    sing: () => { //注意：在箭头函数中，this并不指向当前对象 - 指向的是当前对象的父级 【不推荐】
        alert(this + ':悠悠的唱着最炫的民族风~') // 默认父级对象：Object Windows
    }
}

4.8 JSON

概念: JavaScript Object Notation, JavaScript对象标记法（JS对象标记法书写的文本 ）。 用途: 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

1776046100701

  1. JSON 格式特点
  • json 格式的文本所有的 key 必须使用双引号引起来
  1. JSON 对象的两个方法
  • JSON.parse：将 json 字符串转为 js 对象
  • JSON.stringify：将 js 对象转为 json 字符串

4.9 DOM

1776046643813

DOM 操作核心思想：将网页中所有的元素当做对象来处理。（标签的所有属性在该对象上都可以找到）

操作步骤：

  • 获取要操作的 DOM 元素对象
  • 操作 DOM 对象的属性或方法（查文档或 AI）

示例 HTML：

html">
<span id="sid">DOM元素1</span>
<span class="txt">DOM元素2</span>
<span class="txt">DOM元素3</spa

获取 DOM 对象

  • 根据 CSS 选择器来获取 DOM 元素，获取匹配到的第一个元素：document.querySelector('选择器')（示例选择器：#sid、.txt、span）
  • 根据 CSS 选择器来获取 DOM 元素，获取匹配到的所有元素：document.querySelectorAll('选择器')

注意：得到的是一个 NodeList 节点集合，是一个伪数组（有长度、有索引的数组）

html">
<body>
<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>

<script>
    //1. 修改第一个h1标签中的文本内容
    //1.1 获取DOM对象
    // let h1 = document.querySelector('#title1');
    //let h1 = document.querySelector('h1'); // 获取第一个h1标签

    let hs = document.querySelectorAll('h1');

    //1.2 调用DOM对象中属性或方法
    hs[0].innerHTML = '修改后的文本内容';
</script>
</body>

DOM其他相关教程可访问：DOM相关教程文档

4.10 事件监听

事件：HTML 事件是发生在 HTML 元素上的 “事情”。比如：

  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键

事件监听：JavaScript 可以在事件触发时，就立即调用一个函数做出响应，也称为 事件绑定或注册事件。

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

事件监听三要素

  • 事件源：哪个 dom 元素触发了事件，要获取 dom 元素
  • 事件类型：用什么方式触发，比如：鼠标单击 click
  • 事件触发执行的函数：要做什么事

示例代码

html">
<input id="btn" type="button" value="点我一下试试2">
<script>
document.querySelector('#btn').addEventListener('click', ()=>{
    alert('试试就试试');
})
</script>

早期事件绑定写法（了解）

语法：事源.on 事件 = function () { ...}

示例代码

html">
<input id="btn" type="button" value="点我一下试试2">
<script>
    // 获取按钮元素并绑定点击事件
    document.querySelector('#btn').onclick = function () {
        alert('试试就试试');
    }
</script>

特点

  • 语法简单，兼容性好，早期开发常用
  • 同一个元素只能绑定一个同类型事件，后续绑定会覆盖之前的事件
  • 示例：若多次绑定onclick，只有最后一次的函数会生效

常见事件

1776048695607

JS程序优化

1776049824605

将JavaScript代码从html文件中抽离，然后使用 <script src="..."></script> 从外部引入即可；

注意：若采用模块化的方式（即js文件中出现导包的情况），必须在html引入时添加属性 type="module"

5 Vue

5.1 什么是Vue

Vue是一款用于构建用户界面的渐进式的JavaScript框架。官网：Vue官网

  • 构建用户界面

    1776050219964

  • 渐进式

    1776050436264

  • 框架

    • 框架：就是一套完整的项目解决方案，用于快速构建项目。
    • 优点：大大提升前端项目的开发效率。
    • 缺点：需要理解记忆框架的使用规则。（参照官网）

5.2 Vue快速入门

1776050770524

插值表达式使用 {{...}} 进行展示

示例

html">
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <h3>{{ count }}</h3>
  </div>

  <script type="module">
    // 此处的连接可以去官网查找 
    import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data() {
        return {
          message: 'Hello Vue!',
          count: 100
        }
      }
    }).mount('#app')
  </script>
</body>

5.3 常用指令

常用指令

  • 指令定义：HTML 标签上带有 v- 前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
  • 示例格式：<p v-xxx="..."> ... </p>
指令 作用
v-for 列表渲染，遍历容器的元素或者对象的属性
v-bind 为 HTML 标签绑定属性值，如设置 href、css 样式等
v-if/v-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-model 在表单元素上创建双向数据绑定
v-on 为 HTML 标签绑定事件

v-for

  • 作用：列表渲染，遍历容器的元素或者对象的属性
  • 语法：<tr v-for="(item,index) in items" :key="item.id"> {{item}}</tr>
  • 参数说明：
    • items：为遍历的数组
    • item：为遍历出来的元素
    • index：为索引/下标，从0开始；可以省略，省略index语法：v-for="item in items"
  • key：
    • 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
    • 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

⚠️ 注意：遍历的数组，必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。插值表达式 {{...}} 不能出现在标签内部

v-bind

  • 作用：动态为 HTML 标签绑定属性值，如设置href、src、style 样式等。

  • 语法：v-bind:属性名="属性值"

    html">
    <img v-bind:src="item.image" width="30px">

  • 简写为

    html">
    <img :src="item.image" width="30px">
html">#
# 错误示例
<td><img class="avatar" src="{{e.image}}" alt="{{e.image}}"></td>
# 正确示例
<td><img class="avatar" v-bind:src="e.image" v-bind:alt="e.image"></td>

⚠️ 注意：动态为标签的属性绑定值，不能使用插值表达式，需使用v-bind指令。且绑定的数据，必须在data中定义。

v-if

  • 作用：用来控制元素的显示与隐藏的

  • 语法：v-if="表达式"，表达式值为 true 显示；false 隐藏

  • 原理：基于条件判断，来控制创建或移除元素节点（根据条件判断是否渲染）

  • 场景：要么显示，要么不显示，不频繁切换的场景

  • 其它：可以配合 v-else-if / v-else 进行链式调用条件判断

示例：

html">
<!-- v-if：控制元素的显示与隐藏 -->
<td>
    <span v-if="e.job == 1">班主任</span>
    <span v-else-if="e.job == 2">讲师</span>
    <span v-else-if="e.job == 3">学工主管</span>
    <span v-else-if="e.job == 4">教研主管</span>
    <span v-else-if="e.job == 5">咨询师</span>
    <span v-else>其他</span>
</td>

⚠️ 注意：v-else-if 必须出现在 v-if 之后，可以出现多个；v-else 必须出现在 v-if/v-else-if 之后。

v-show

  • 作用：用来控制元素的显示与隐藏的

  • 语法：v-show="表达式"，表达式值为 true 显示；false 隐藏

  • 原理：基于 CSS 样式 display 来控制显示与隐藏

  • 场景：频繁切换显示隐藏的场景

示例：

html">
<!-- v-show：控制元素的显示与隐藏 -->
<td>
    <span v-show="e.job == 1">班主任</span>
    <span v-show="e.job == 2">讲师</span>
    <span v-show="e.job == 3">学工主管</span>
    <span v-show="e.job == 4">教研主管</span>
    <span v-show="e.job == 5">咨询师</span>
</td>

v-if 与 v-show 的作用？

  • 根据条件判断，是否展示某元素

v-if 与 v-show 的区别？

  • v-if：条件不成立，直接不渲染这个元素（不频繁切换的场景）
  • v-show：通过 css 样式，来控制元素的展示与隐藏（频繁切换的场景）

v-model

  • 作用：在表单元素上使用，双向数据绑定。可以方便地获取或设置表单项数据。
  • 语法：v-model="变量名"

1777879276442

注意：v-model 中绑定的变量，必须在data中定义

Step1：在data中定义模型：

html">
<script type="module">
createApp({
	data() {
		return {
			// 封装用户输入的查询条件
			serchForm: {
				name: "",
				gender: "",
				job: ""
			}
		}
	}
})
</script>

Step2：设置表单项

html">
<form class="search-form">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" v-model="searchForm.name" placeholder="请输入姓名">

    <label for="gender">性别：</label>
    <select id="gender" name="gender" v-model="searchForm.gender">
        <option value=""></option>
        <option value="1">男</option>
        <option value="2">女</option>
    </select>

    <label for="position">职位：</label>
    <select id="position" name="position" v-model="searchForm.job">
        <option value=""></option>
        <option value="1">班主任</option>
        <option value="2">讲师</option>
        <option value="3">学工主管</option>
        <option value="4">教研主管</option>
        <option value="5">咨询师</option>
    </select>
    
    <button type="button">查询</button>
    <button type="button">清空</button>
</form>

v-on

  • 作用：为 HTML 标签绑定事件（添加事件监听）。
  • 语法：
    • 完整写法：v-on:事件名="方法名"
    • 简写：@事件名="方法名"

示例代码

html">
<div id="app">
    <button type="button" v-on:click="search">查询</button>
    <button type="button" @click="clear">清空</button>
</div>
javascript">
const app = createApp({
    data() {
        // ...
    },
    methods: {
        search() {
            // 此处若要获取当前实例searchForm对象的值，必须在此之前添加 this. 来指向当前实例
            console.log(this.searchForm);
        },
        clear() {
            this.searchForm = {name:"",gender:"",job:""}
        }
    }
}).mount("#app");

注意：在与data平级的位置添加methods，然后设计事件

6 Ajax

6.1 什么是 Ajax

介绍：Asynchronous JavaScript And XML，即异步的 JavaScript 和 XML。

XML：（英语：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。

作用：

  • 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
  • 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。

1777883359948

6.2 同步与异步

1777883567809

6.3 Axios

介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。

官网：https://www.axios-http.cn/

使用步骤

  1. 引入Axios的js文件
html">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  1. 使用 Axios 发送请求，并获取响应结果
javascript">
axios({
    method: 'GET',
    url: 'https://web-server.itheima.net/emps/list'
}).then((result) => {
    console.log(result.data); // 成功回调函数
}).catch((err) => {
    alert(err); // 失败回调函数
});

参数说明

  • method: 请求方式，支持 GET/POST
  • url: 请求路径
  • data: 请求数据（POST 请求时使用）
  • params: 发送请求时携带的 url 参数（如：...?key=val）

测试用例（完善Get请求和Post请求）

  1. 构建大体逻辑框架
html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax-Axios</title>
</head>
<body>
    <input type="button" value="获取数据GET" id="btnGet">
    <input type="button" value="操作数据POST" id="btnPost">

    <script src="js/axios.js"></script>
    <script>
        // 发送GET请求
        document.querySelector('#btnGet').addEventListener('click', () => {

        })

        // 发送POST请求
        document.querySelector('#btnPost').addEventListener('click', () => {

        })
    </script>
</body>
</html>
  1. 完善GET请求
javascript">
// 发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
    // axios发起异步请求
    axios({
        url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
        method: 'GET'
    }).then((result) => { // 成功回调函数
        console.log(result.data);
    }).catch((err) => { // 失败回调函数
        console.log(err);
    })
})
  1. 完善POST请求
javascript">
// 发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
    // axios发起异步请求
    axios({
        url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',
        method: 'POST',
        data: 'id=1' // POST请求方式，请求体
    }).then((result) => { // 成功回调函数
        console.log(result.data);
    }).catch((err) => { // 失败回调函数
        console.log(err);
    })
})

6.4 Axios 简化

为了方便起见，Axios 已经为所有支持的请求方法提供了别名。格式：

javascript
axios.请求方式(url [, data [, config]])

GET 请求示例

javascript">axios.
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list')
.then((result) => {
    console.log(result.data);
}).catch((err) => {
    console.log(err);
});

POST 请求示例

javascript">axios.
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1')
.then((result) => {
    console.log(result.data);
}).catch((err) => {
    console.log(err);
});

事件绑定案例

javascript">
methods: {
    search() {
        // 发送ajax请求，获取数据
        axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`)
            .then(result => {
                this.empList = result.data.data;
            });
    },
    clear() {
        // 清空表单项数据
        this.searchForm = { name: '', gender: '', job: '' };
        this.search();
    }
}

6.5 async & await

核心概念

  • 作用：让异步操作以同步的方式书写，提升代码可读性和可维护性。
  • async：声明一个函数为异步函数。
  • await：等待异步任务执行完成，仅在 async 函数内有效，可替代 .then() 获取请求结果。

示例代码

javascript">
methods: {
  async search() {
    // 根据用户输入的搜索条件，发送axios异步请求
    let result = await axios.get('https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx');
    this.employees = result.data.data;
  }
}

注意事项

  • await 关键字只能在 async 函数内部使用。
  • 该语法替代了传统的 .then() 链式调用，让异步逻辑更直观、便于维护。

6.6 Vue 生命周期

思考：如何做到在页面加载完毕后自动发送请求，请求服务端？

定义：指一个对象从创建到销毁的整个过程。 八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

1777889906797

1777890127441