## Day02 JavaScript、Vue3 --- ### 1. JavaScript ##### Web标准及其组成 * Web标准也称网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Consortium，万维网联盟）负责制定。 * 三个组成部分： * HTML：负责网页的结构（页面元素和内容）。 * CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。 * JavaScript：负责网页的行为（交互效果）。

##### JavaScript及其组成 * JavaScript（简称：JS）是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。 * 组成： * ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。 * BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。 * DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。 ECMA： ECMA国际（前身为欧洲计算机制造商协会），制定了标准化的脚本程序设计语言 ECMAScript，这种语言得到广泛应用。而JavaScript是遵守ECMAScript的标准的（ES2024是最新版本）

#### 1.1 JS 核心语法 ##### 1.1.1 引入方式 ##### ① 内部脚本内部脚本：将JS代码定义在HTML页面中 * JavaScript代码必须位于 `````` 标签之间 * 在HTML文档中，可以在任意地方，放置任意数量的 ``` ``` ##### js/demo.js ```javascript alert('外部引入脚本（杜老师）：Hello JavaScript'); ```

##### 1.1.2 基础语法 ##### ① 变量&常量 * JS中用 let 关键字来声明变量 (弱类型语言，变量可以存放不同类型的值)。 * 变量名需要遵循如下规则： * 只能用字母、数字、下划线（_）、美元符号（$）组成，且数字不能开头 * 变量名严格区分大小写，如 name 和 Name 是不同的变量 * 不能使用关键字，如：let、var、if、for等 * JS中用 const 关键字来声明常量。 * 一旦声明，常量的值就不能改变（不可以重新赋值）。 ##### 02. JS-基础语法.html ```html JS-基础语法

JS-基础语法--变量与常量的声明和赋值(杜老师)

变量：可以变化的量，在程序运行过程中，其值可以发生改变的量。

常量：不变的量，在程序运行过程中，其值不能发生改变的量。

JS-基础语法有以下几个方面：

变量
常量
数据类型
运算符
流程控制
函数
对象
数组
字符串
日期
正则表达式
JSON

JS-基础语法的详细内容，请参考：JS-基础语法

F12-控制台-查看: 声明变量、常量和输出

```

##### ② 数据类型 * JavaScript的数据类型分为：基本数据类型和引用数据类型（对象）。 * 基本数据类型： * number：数字（整数、小数、NaN(Not a Number)） * boolean：布尔。true，false * null：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的 * undefined：当声明的变量未初始化时，该变量的默认值是 undefined * string：字符串，单引号、双引号、反引号皆可，推荐使用单引号 * 使用 typeof 运算符可以获取数据类型：模板字符串语法： * `(反引号，英文输入模式下按键盘的tab键上方波浪线 ~ 那个键） * 内容拼接变量时，使用 ${} 包住变量 ```html ``` ##### 03. JS-数据类型.html ```html JS-数据类型

JS-数据类型(杜老师)

F12打开控制台查看结果

```

##### ③ 函数 * 介绍：函数（ function ）是被设计用来执行特定任务的代码块，方便程序的封装复用。 * 定义：JavaScript中的函数通过function关键字进行定义，语法为： ```javascript function 函数名称(参数1, 参数2, ...){ // 要执行的代码 } ``` * 调用：函数名称(实际参数列表) * 注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。 ##### 匿名函数 * 匿名函数是指一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数。 * 匿名函数定义后，可以通过变量名直接调用。

##### 04. JS-函数.html ```html JS-函数

JS-函数(杜老师)

函数：一段可以重复调用的代码块。

函数的分类：

具名函数
匿名函数
箭头函数

函数的定义与调用>

F12打开控制台查看结果

```

##### ④ 自定义对象自定义对象是对前面所讲的变量、类型、函数的综合应用

##### json * 概念：JavaScript Object Notation，JavaScript对象标记法 (JS对象标记法书写的文本 ) 。 * 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输(代替ajax中xml格式)。

##### 05. JS-自定义对象.html ```html JS-自定义对象

JS-自定义对象(杜老师)

自定义对象：由开发人员自定义的对象，用于存储和组织数据。

自定义对象的定义格式：

    let 对象名 = {
      属性名1: 属性值1,
      属性名2: 属性值2,
      ...
      方法名: function(){
        //方法体
      }
    }

自定义对象的使用格式：

    对象名.属性名
    对象名.方法名()

F12控制台查看对象

```

##### 1.1.3 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节点集合，是一个伪数组（有长度、有索引的数组） ##### 06. JS-DOM.html ```html JS-DOM常用操作

JS-DOM常用操作：获取元素和修改内容(杜老师)

F12打开控制台

1111111

22222

33333

``` ##### 案例：实现表格隔行换色效果 ##### 07. JS-案例-员工列表.html ```html Tlias智能学习辅助系统

DOM操作

        1. 获取元素 document.querySelectorAll("tbody tr")
        2. 改变背景 trList[i].style.backgroundColor =

姓名	性别	职位	入职日期	最后操作时间
令狐冲	男	讲师	2021-06-15	2024-09-16 15:30
任盈盈	女	咨询师	2021-07-20	2024-09-17 09:00
向问天	男	班主任	2021-05-01	2024-09-15 17:45
任我行	男	教研主管	2021-05-01	2024-09-15 17:45
田伯光	男	班主任	2021-06-15	2024-09-16 15:30
不戒	女	班主任	2021-07-20	2024-09-17 09:00
左冷禅	男	班主任	2021-05-01	2024-09-15 17:45
定逸	女	班主任	2021-05-01	2024-09-15 17:45
东方兄弟	男	讲师	2021-05-01	2024-09-15 17:45
金庸	男	咨询师	2021-05-01	2024-09-15 17:45

```

#### 1.2 JS 事件监听 ##### 什么是事件？什么是事件监听？ * 事件：HTML事件是发生在HTML元素上的 "事情"。比如： * 按钮被点击 * 鼠标移动到元素上 * 按下键盘按键 * JavaScript可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。 ##### 事件监听 * 语法：事件源.addEventListener('事件类型', 事件触发执行的函数); * 事件监听三要素 * 事件源：哪个dom元素触发了事件，要获取dom元素 * 事件类型：用什么方式触发，比如：鼠标单击 click * 事件触发执行的函数：要做什么事

##### 08. JS-事件监听.html ```html JS事件

JS-事件监听(杜老师)

```

##### 案例实现表格数据行鼠标移入移出隔行换色效果。需求：实现鼠标移入数据行时，背景色改为#f2e2e2，鼠标移出时，再将背景色改为白色。 ##### 09. JS-案例-员工列表.html ```html Tlias智能学习辅助系统

姓名	性别	职位	入职日期	最后操作时间
令狐冲	男	讲师	2021-06-15	2024-09-16 15:30
任盈盈	女	咨询师	2021-07-20	2024-09-17 09:00
向问天	男	班主任	2021-05-01	2024-09-15 17:45
任我行	男	教研主管	2021-05-01	2024-09-15 17:45
田伯光	男	班主任	2021-06-15	2024-09-16 15:30
不戒	女	班主任	2021-07-20	2024-09-17 09:00
左冷禅	男	班主任	2021-05-01	2024-09-15 17:45
定逸	女	班主任	2021-05-01	2024-09-15 17:45
东方兄弟	男	讲师	2021-05-01	2024-09-15 17:45
金庸	男	咨询师	2021-05-01	2024-09-15 17:45

``` ##### 常见事件

##### 10. JS-常见事件.html ```html JS-事件-常见事件

JS-事件-常见事件

学号	姓名	分数	评语
001	张三	90	很优秀
002	李四	92	优秀

``` #### JS程序优化--模块化

##### 11. JS-常见事件(优化).html ```html JS-事件-常见事件

JS-事件-常见事件

学号	姓名	分数	评语
001	张三	90	很优秀
002	李四	92	优秀

``` ##### js/eventDemo.js ```javascript 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("表单被提交了..."); }) ``` ##### js/utils.js ```javascript export function printLog(msg){ console.log(msg); } ``` ### Vue3 ##### 什么是Vue * Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org/） * 框架：就是一套完整的项目解决方案，用于快速构建项目。 * 优点：大大提升前端项目的开发效率。 * 缺点：需要理解记忆框架的使用规则。（参照官网）

#### 2.1 Vue 快速入门 * 基于数据渲染出用户看到的页面 * 数据驱动视图 * 准备 * 引入Vue模块（官方提供） * 创建Vue程序的应用实例，控制视图的元素 * 准备元素(div)，被Vue控制 * 数据驱动视图 * 准备数据 * 通过插值表达式渲染页面

##### 12. Vue-快速入门.html ```html Vue-快速入门

Vue-快速入门(杜老师)

计数：{{count}}

```

#### 2.2 Vue 常用指令指令：HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。 | **指令** | **作用** | | --------------------- | ------------------------------------------------------------ | | 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 * 作用：列表渲染，遍历容器的元素或者对象的属性 * 语法： ``` {{item}}``` * 参数说明： * 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样式等ma。 * 语法：v-bind:属性名="属性值" `````` * 简化：:属性名="属性值" `````` * 注意：动态的为标签的属性绑定值，不能使用插值表达式，得使用v-bind指令。且绑定的数据，必须在data中定义或有data中定义的数据演变来的。

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

##### ④ v-model ##### 案例：员工列表数据渲染，获取用户输入的条件搜索栏中当用户点击查询按钮时，需要获取到用户输入的表单数据，并输出出来。

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

##### Chrome浏览器插件地址：https://chrome.zzzmh.cn/#/index 下载nhdogjmejiglipccpnnnanhbledajbpd.zip并解压nhdogjmejiglipccpnnnanhbledajbpd_7.7.7_chrome.zzzmh.cn.crx 右上角菜单 -- 扩展程序 -- 管理扩展程序，将解压的crx拖入 ##### firefox浏览器插件 https://addons.mozilla.org/zh-CN/firefox/ 豆包：firefox vue插件工具下载和安装 ##### ⑤ v-on * 作用：为html标签绑定事件（添加事件监听） * 语法： * v-on:事件名="方法名" * 简写为 @事件名="…" * 注意：methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。 * v-on绑定的方法名必须指向当前组件作用域内可访问的函数（选项式 API 中是methods内的函数，组合式 API 中是 setup 内声明的函数）。

##### 13. Vue-案例-员工列表(常用指令).html ```html Tlias智能学习辅助系统

测试用{{searchForm}}

序号	id	姓名	性别	头像	职位	入职日期	最后操作时间	操作
{{index + 1}}	{{e.id}}	{{e.name}}	{{e.gender == 1?'男' : '女'}}		班主任讲师学工主管教研主管咨询师其他	{{e.entrydate}}	{{e.updatetime}}

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

##### 同步与异步

##### Axios * 介绍：Axios 对原生的Ajax进行了封装，简化书写，快速开发。 * 官网：https://www.axios-http.cn/ * 步骤： * 引入Axios的js文件（参照官网） * 使用Axios发送请求，并获取响应结果 ```html ```

##### 14. Axios-入门.html ```html Ajax-入门s

Axios-入门(杜老师)

打开控制台查看请求结果

``` ##### Axios-请求方式别名 * 为了方便起见，Axios已经为所有支持的请求方法提供了别名 * 格式：axios.请求方式(url [, data [, config]])

##### 15. Axios-请求方式别名.html ```html Ajax-Axios

Axios-请求方式别名(杜老师)

F12打开控制台查看请求结果

```

##### ② 案例从服务器端动态获取数据渲染展示列表服务端url地址： https://web-server.itheima.net/emps/list?name=xxx&gender=xxx&job=xxx ##### async & await * 可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行。 * 注意：await关键字只在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值。

##### Vue生命周期 * 生命周期：指一个对象从创建到销毁的整个过程。 * 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。 * 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子) | **状态** | **阶段周期** | | ------------- | ------------ | | beforeCreate | 创建前 | | created | 创建后 | | beforeMount | 载入前 | | mounted | 挂载完成 | | beforeUpdate | 数据更新前 | | updated | 数据更新后 | | beforeUnmount | 组件销毁前 | | unmounted | 组件销毁后 |