当前位置：首页 > news >正文

JS-Vue

news 2026/5/24 10:58:06

什么是 JavaScript？

JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。
JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是语法类似。
组成
- ECMAScript：规定了 JS 基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文件对象模型，用于操作 HTML 文档，如：改变标签内的内容、改变标签内字体样式等。

JS 核心语法

引入方式

内部脚本：将 JS 代码定义在 HTML 页面中
- JavaScript 代码必须位于<script></script>标签之间
- 在 HTML 文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中

alert("Hello JavaScript!");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-引入方式</title>
</head>
<body><!-- <script>// 内部脚本alert("Hello JS!");</script> --><!-- 外部脚本 --><script src="js/demo.js"></script>
</body>
</html>

基础语法

变量
数据类型
函数
自定义对象

变量&常量

变量

JS 中用 let 关键字来声明变量（弱类型语言，变量可以存放不同类型的值）。
变量名需要遵循如下规则：
- 只能用字母、数字、下划线(_)、美元符号($)组成，且数字不能开头
- 变量名严格区分大小写，如 name 和 Name 是不同的变量
- 不能使用关键字，如：let、var、if、for 等

常量

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-基础语法</title>
</head>
<body><script>// 变量let a = 10;a = "Hello";a = true;alert(a);// 弹出警告框，结果为 true// 常量const PI = 3.14;console.log(PI);// 输出到浏览器控制台document.write(PI);// 输出到 body 区域，不常用</script>
</body>
</html>

数据类型

JavaScript 的数据类型分为：基本数据类型和引用数据类型（对象）。
基本数据类型：
- number：数字（整数、小数、NaN(Not a Number)）
- boolean：布尔。true，false
- null：对象为空。JavaScript 是大小写敏感的，因此 null、Null、NULL 是完全不同的
- undefined：当声明的变量未初始化时，该变量的默认值是 undefined
- string：字符串，单引号、双引号、反引号皆可，推荐使用单引号
使用 typeof 运算符可以获取数据类型
模板字符串语法：
- ``（反引号）
- 内容拼接变量时，使用 ${} 包住变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-数据类型</title>
</head>
<body><script>//1. 数据类型// alert(typeof 10); // number// alert(typeof 1.5); // number// alert(typeof true); // boolean// alert(typeof false); // boolean// alert(typeof "Hello");// string// alert(typeof 'JS'); // string// alert(typeof `JavaScript`); // string// let b = null;// alert(typeof b); // object// alert(b === null); // true，正确判断 null 写法// let a ;// 只声明，未手动赋值// alert(typeof a); // undefined// 2. 模板字符串let name = "张三";let age = 18;alert('我是' + name + '，我今年' + age + '岁');alert(`我是${name}，我今年${age}岁`);</script>
</body>
</html>

函数

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

具名函数

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

function functionName(参数1, 参数2 ...){// 要执行的代码
}

调用：函数名称（实际参数列表）

let result = add(10, 20);
alert(result);

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

匿名函数

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

// 函数表达式
let add = function(a, b){return a + b;
}

// 箭头函数
let add = (a, b) => {return a + b;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>// 1. 函数的定义及调用 - 具名函数// function add(a, b){//   return a + b;// }// alert(add(10, 20, 30));// 30// 2. 函数的定义及调用 - 匿名函数// 2.1 函数表达式// let add = function(a, b){//   return a + b;// }// alert(add(10, 20));// 30// 2.2 箭头函数let add = (a, b) => {return a + b;}alert(add(10, 20));// 30</script>
</body>
</html>

自定义对象

定义格式

let 对象名 = {属性名1: 属性值1,属性名2: 属性值2,属性名3: 属性值3,方法名: function (形参列表) {}// 其中，: function 可以省略
}

调用格式

// 对象名.属性名;
console.log(user.name)
// 对象名.方法名();
user.sing();

json

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-函数</title>
</head>
<body><script>// 1. 自定义对象// let person = {//   name: "张三",//   age: 18,//   sex: "男",//   // 方法//   sayHello: function(){//     alert("我是" + this.name + "，我今年" + this.age + "岁");//   }// }// let person = {//   name: "张三",//   age: 18,//   sex: "男",//   // 方法//   sayHello(){//     alert("我是" + this.name + "，我今年" + this.age + "岁");//   }// }// let person = {//   name: "张三",//   age: 18,//   sex: "男",//   // 方法//   sayHello : () => {// 注意：在箭头函数中，this 并不指向当前对象，指向的是当前对象的父级对象【不推荐】//     alert("我是" + this.name + "，我今年" + this + "岁");// 这里的 this 是 [object Window]//   }// }// alert(person.name);// person.sayHello();// 2. jsonlet person = {name: "Scroll",age: 0}alert(JSON.stringify(person));// {"name":"Scroll","age":0}，将 js 对象转换为 json 字符串let jsonStr = '{"name":"Scroll","age":0}';alert(JSON.parse(jsonStr).name);// Scroll，将 json 字符串转换为 js 对象alert(JSON.parse(jsonStr).age);// 0，将 json 字符串转换为 js 对象</script>
</body>
</html>

DOM

概念：Document Object Model，文档对象模型。
将标记语言的各个组成部分封装为对应的对象：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
JavaScript 通过 DOM，就能够对 HTML 进行操作：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 时间作出反应
- 添加和删除 HTML 元素

DOM 操作

DOM 操作核心思想：将网页中所有的元素当作对象来处理。（标签的所有属性在该对象上都可以找到）
操作步骤：
- 获取要操作的 DOM 元素对象
- 操作 DOM 对象的属性或方法（查文档或 AI）
获取 DOM 对象
- 根据 CSS 选择器来获取 DOM 元素，获取匹配的第一个元素：document.querySelector('选择器')
- 根据 CSS 选择器来获取 DOM 元素，获取匹配到的所有元素：document.querySelectorAll('选择器')
  
  注意：得到的是一个 NodeList 节点集合，是一个伪数组（有长度、有索引的数组，但没有数组的操作方法）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS-DOM</title>
</head>
<body><h1 id="title1">11111</h1><h1>22222</h1><h1>33333</h1><script>// 1. 修改第一个 h1 标签中的文本内容// 1.1 获取 DOM 对象// let title1 = document.querySelector("#title1");let h1 = document.querySelectorAll("h1");// 1.2 调用 DOM 对象中属性或方法// title1.innerHTML = "22222";h1[0].innerHTML = "22222";</script>
</body>
</html>

JS 事件监听

事件：HTML 事件是发生在 HTML 元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript 可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。
语法：事件源.addEventListener('事件类型', 事件触发执行的函数);
事件监听三要素
- 事件源：哪个 dom 元素触发了事件，要获取 dom 元素
- 事件类型：用什么方式触发，比如：鼠标单击 click
- 事件触发执行的函数：要做什么事
早期版本写法（了解）：事件源.on事件 = function() { ... }
区别：on 方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS事件</title>
</head>
<body><input type="button" id="btn1" value="点我一下试试1"><input type="button" id="btn2" value="点我一下试试2"><script>// 元素.onclick = 函数，属于DOM0 级事件，写法老旧；只能设置一个点击事件；不能解绑单个事件，只能清空，不推荐// DOM0 级事件：最早最老的事件写法，没有正式标准，浏览器默认支持// DOM2 级事件：W3C 制定正式标准，规范统一，功能更强document.getElementById('btn1').onclick = function() {alert('点击了按钮1')}// 元素.addEventListener('事件名', 函数)，DOM2 级标准事件，兼容性强、功能最全；支持事件解绑、事件冒泡 / 捕获控制；// 同一个元素可以绑定多个点击事件，互不覆盖，推荐使用document.querySelector('#btn2').addEventListener('click', () => {alert('点击了按钮2')});</script>
</body>
</html>

案例：实现表格数据行鼠标移入移出隔行换色效果

需求：实现鼠标移入数据行时，背景色改为#f2e2e2，鼠标移出时，再将背景色改为白色

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Tlias智能学习辅助系统</title><style>/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: "楷体";}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[type="text"], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}</style>
</head>
<body><div id="container"><!-- 顶部导航栏 --><div class="navbar"><h1>Tlias智能学习辅助系统</h1><a href="#">退出登录</a></div><!-- 搜索表单区域 --><form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名"><label for="gender">性别：</label><select id="gender" name="gender"><option value=""></option><option value="1">男</option><option value="2">女</option></select><label for="position">职位：</label><select id="position" name="position"><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="submit">查询</button><button type="reset">清空</button></form><!-- 表格展示区 --><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 class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>讲师</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任盈盈</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>咨询师</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>向问天</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>任我行</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>教研主管</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>田伯光</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td><td>班主任</td><td>2021-06-15</td><td>2024-09-16 15:30</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>不戒</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈"></td><td>班主任</td><td>2021-07-20</td><td>2024-09-17 09:00</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>左冷禅</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>定逸</td><td>女</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>班主任</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>东方兄弟</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>讲师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr><tr><td>金庸</td><td>男</td><td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="向问天"></td><td>咨询师</td><td>2021-05-01</td><td>2024-09-15 17:45</td><td class="action-buttons"><button type="button">编辑</button><button type="button">删除</button></td></tr></tbody></table><!-- 页脚版权区域 --><footer class="footer"><p>江苏传智播客教育科技股份有限公司</p><p>版权所有 Copyright 2006-2024 All Rights Reserved</p></footer></div><script>//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)// 1. 获取所有 tr 行const trs = document.querySelectorAll('tr');// 2. 循环每一行，逐个添加事件trs.forEach(tr => {// 鼠标移入tr.addEventListener('mouseenter', () => {tr.style.backgroundColor = '#f2e2e2';});// 鼠标移出tr.addEventListener('mouseleave', () => {tr.style.backgroundColor = '#fff';});});</script>
</body>
</html>

常见事件

鼠标事件
- click：鼠标点击
- mouseenter：鼠标移入
- mouseleave：鼠标移出
键盘事件
- keydown：键盘按下触发
- keyup：键盘抬起触发
焦点事件
- focus：获得焦点触发
- blur：失去焦点触发
表单事件
- input：用户输入时触发
- submit：表单提交时触发

<!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>JS-事件-常见事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="单击事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table><script>//click: 鼠标点击事件document.querySelector('#b2').addEventListener('click', () => {console.log("我被点击了...");})//mouseenter: 鼠标移入document.querySelector('#last').addEventListener('mouseenter', () => {console.log("鼠标移入了...");})//mouseleave: 鼠标移出document.querySelector('#last').addEventListener('mouseleave', () => {console.log("鼠标移出了...");})//keydown: 某个键盘的键被按下document.querySelector('#username').addEventListener('keydown', () => {console.log("键盘被按下了...");})//keyup: 某个键盘的键被抬起document.querySelector('#username').addEventListener('keyup', () => {console.log("键盘被抬起了...");})//blur: 失去焦点事件document.querySelector('#age').addEventListener('blur', () => {console.log("失去焦点...");})//focus: 元素获得焦点document.querySelector('#age').addEventListener('focus', () => {console.log("获得焦点...");})//input: 用户输入时触发document.querySelector('#age').addEventListener('input', () => {console.log("用户输入时触发...");})//submit: 提交表单事件document.querySelector('form').addEventListener('submit', () => {alert("表单被提交了...");})</script>
</body></html>

思考：在 html 中，我们引入了大量的 js 代码，这样代码的复用性会比较差，而且难以维护，我们该如何改进？

答：将其中的 js 代码抽取成一个独立的 .js 文件，再引入即可。同时，还可以将常用的方法抽取到工具类中，作为工具方法使用。

<!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>JS-事件-常见事件</title>
</head><body><form action="" style="text-align: center;"><input type="text" name="username" id="username"><input type="text" name="age" id="age"><input id="b1" type="submit" value="提交"><input id="b2" type="button" value="单击事件"></form><br><br><br><table width="800px" border="1" cellspacing="0" align="center"><tr><th>学号</th><th>姓名</th><th>分数</th><th>评语</th></tr><tr align="center"><td>001</td><td>张三</td><td>90</td><td>很优秀</td></tr><tr align="center" id="last"><td>002</td><td>李四</td><td>92</td><td>优秀</td></tr></table><script src="js/eventDemo.js" type="module"></script>
</body></html>

import { printLog } from './utils.js';
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {printLog("我被点击了...");
})//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {printLog("鼠标移入了...");
})//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {printLog("鼠标移出了...");
})//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {printLog("键盘被按下了...");
})//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {printLog("键盘被抬起了...");
})//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {printLog("失去焦点...");
})//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {printLog("获得焦点...");
})//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {printLog("用户输入时触发...");
})//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {alert("表单被提交了...");
})

export function printLog(msg) {console.log(msg);
}

什么是 Vue？

Vue 是一款用于构建用户界面的渐进式的 JavaScript 框架。（官方： https://cn.vuejs.org/ ）
- 构建用户界面：基于数据渲染出用户看到的界面
- 框架：就是一套完整的项目解决方案，用于快速构建项目
  - 优点：大大提升前端项目的开发效率
  - 缺点：需要理解记忆框架的使用规则（参照官网）

案例：Vue 快速入门

准备
- 引入 Vue 模块（官方提供 https://unpkg.com/vue@3/dist/vue.esm-browser.js ）
- 创建 Vue 程序的应用实例，控制视图的元素
- 准备元素（div），被 Vue 控制
数据驱动视图
- 准备数据
- 通过插值表达式渲染页面

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue-快速入门</title>
</head>
<body><div id="app"><h1>{{ msg }}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return{msg:'Hello Vue'}}}).mount('#app');</script>
</body>
</html>

Vue 常用指令

指令：HTML 标签上带有 v- 前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。
常用指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为 HTML 标签绑定属性值，如设置 href，css 样式等
v-if / v-else-if / v-else	条件性的渲染某元素，区别在于切换的是 display 属性的值
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:属性名="属性值"
简化：:属性名="属性值"
注意：动态地为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据，必须在 data 中定义

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
- 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
- 场景：要么显示，要么不显示，不频繁切换的场景
- 其它：可以配合v-else-if / v-else进行链式调用条件判断
  - 注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if / v-else-if之后
v-show
- 语法：v-show="表达式"，表达式值为true，显示；false，隐藏
- 原理：基于 CSS 样式 display 来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景

v-if 和 v-show 的区别

v-if

v-show

v-model

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

v-on

作用：为 html 标签绑定事件（添加事件监听）
语法：
- v-on：事件名="方法名"
- 简写为：@事件名="..."

案例：员工列表数据渲染展示

将 empList 中的数据展示到表格中
搜素栏中当用户点击查询按钮时，需要获取到用户输入的表单数据，并输出出来

<!-- 由于代码过多，这里只展示修改部分 -->
<!-- 表格数据遍历渲染 -->
<tr v-for="item in empList" :key="item.id"><td>{{index + 1}}</td><td>{{item.name}}</td><td>{{item.gender == 1 ? '男' : '女'}}</td><!-- 注意：动态地为标签的属性绑定值，不能使用插值表达式，得使用 v-bind 指令。且绑定的数据，必须在 data 中定义 --><td><img :src="item.image" :alt="item.name"></td><!-- 使用 v-if 来判断职位 --><td><span v-if="item.job == 1">班主任</span><span v-else-if="item.job == 2">讲师</span><span v-else-if="item.job == 3">学工主管</span><span v-else-if="item.job == 4">教研主管</span><span v-else-if="item.job == 5">咨询师</span><span v-else>其他</span></td><!-- v-show：控制元素的显示与隐藏 --><!-- <td><span v-show="item.job == 1">班主任</span><span v-show="item.job == 2">讲师</span><span v-show="item.job == 3">学工主管</span><span v-show="item.job == 4">教研主管</span><span v-show="item.job == 5">咨询师</span></td> --><td>{{item.entrydate}}</td><td>{{item.updatetime}}</td><td><button type="button">编辑</button><button type="button">删除</button></td>
</tr><!-- Vue 部分代码 -->
<script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {empList: [{"id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": "1","entrydate": "2023-06-09","updatetime": "2024-09-30T14:59:38"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": "1","entrydate": "2020-05-09","updatetime": "2024-09-01T00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg","gender": 2,"job": "2","entrydate": "2021-06-01","updatetime": "2024-09-01T00:00:00"}],searchForm: {name: '',gender: '',job: ''}  }},methods: {search() {console.log(this.searchForm)},reset() {this.searchForm = {name: '',gender: '',job: ''}}}    }).mount('#container')
</script><!-- 搜索表单区域 -->
<form class="search-form" action="/search" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name"><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" @click="search">查询</button><button type="button" @click="reset">清空</button>
</form>

什么是 Ajax

介绍：Asynchronous JavaScript And XML，异步的 JavaScript 和 XML
作用：
- 数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等
XML：（英文：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构

Axios

介绍：Axios 对原生的 Ajax 进行了封装，简化书写，快速开发
官网：https://www.axios-http.cn/

步骤：

引入 Axios 的 js 文件（参照官网）

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

使用 Axios 发送请求，并获取响应结果

// method：请求方式，GET / POST
// url：请求路径
// data：请求数据（POST）
// params：发送请求时携带的 url 参数，如：...?key=val
axios({method: 'GET',url: 'https://web-server.faxont.net/emps/list'
// 成功回调函数    
}).then((result) => {console.log(result.data);
// 失败回调函数    
}).catch((err) => {alert(err);
});

Axios-请求方式别名

为了方便起见，Axios 已经为所有支持的请求方法提供了别名
格式：axios.请求方式(url [, data [, config]])，中括号[]代表可选参数，可传可不传

<!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', () => {// 对象解构赋值：从一个对象里，直接把里面的属性「单独拿出来」变成变量，不用再一遍遍写 对象.属性。axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then(({ data }) => {console.log(data);}).catch(({ message }) => {alert(message);})})//发送POST请求document.querySelector('#btnPost').addEventListener('click', () => {axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update', 'id=1').then(({ data }) => {console.log(data);}).catch(({ message }) => {alert(message);})})</script>
</body>
</html>

async & await

可以通过 async、await 可以让异步变为同步操作。async 就是来声明一个异步方法，await 是用来等待异步任务执行的
注意：await 关键字只在 async 函数内有效，await 关键字取代 then 函数，等待获取到请求成功的结果值

Vue 生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）
挂载 = 把 Vue 组件虚拟 DOM，渲染插入到真实页面 HTML 结构里，页面上能看见组件内容

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
update	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后

<script type="module">import { createApp } from 'https://.../vue.esm-browser.js'const app = createApp({data() {return {message: "Hello Vue"}},// 生命周期-钩子函数 mountedmounted() {console.log('Vue 挂载完毕，发送请求获取数据 ...')}}).mount("#app")
</script>

案例：从服务器端动态获取数据渲染展示列表

服务端 url 地址：https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx

<script src="js/axios.js"></script>
<script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {empList: [],searchForm: {name: '',gender: '',job: ''}}},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(({ data }) => {//         this.empList = data.data//     }).catch(({ message }) => {//         alert(message);//     })// },// 异步变同步async search(){let { data } = await axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);this.empList = data.data},reset() {this.searchForm = {name: '',gender: '',job: ''}this.search()}},mounted() {this.search()}  }).mount('#container')
</script>

查看全文

http://www.jsqmd.com/news/876811/