2025.05.02

JavaWeb学习之JS&Vue

一、JavaScript

1.1 JavaScript简介

Web标准也称为网页标准，由一系列的标准组成，大部分由万维网联盟（W3C）制定。
三个组成部分：
- HTML：负责网页的基本结构（页面元素和内容）
- CSS：负责网页的表现（样式和布局）
- JavaScript：负责网页的行为（交互和动态效果）
JavaScript
- JavaScript (简称: JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。
- JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。
- JavaScript在1995年由Brendan Eich发明，并于1997年成为ECMA标准。
- ECMAScript 6 (ES6)是最新的JavaScript版本(发布于2015年)。

1.2 JS引入方式

内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须放在<script></script>标签之间
- 在HTML文档中，可以在任意地方放置任意数量的<script>标签
- 一般会把脚本置于<body>元素的底部，可以改善显示速度
1
2
3
<script>
alert("Hello World!"); // 弹出提示框
</script>
外部脚本：将JS代码放在外部JS文件中，然后引入到HTML页面中
- 外部JS文件中只包含JS代码，不包含<script>标签
- <script>标签的不能自闭合
1
2
3
<script src="js/hello.js"></script>

alert("Hello World!"); // 弹出提示框

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>

    <!-- 内部脚本 -->
    <!-- <script>
        alert("Hello World!");
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>
    
</body>
</html>

1 2	// demo.js alert("Hello World!"); // 弹出提示框

实现效果：

1.3 JS基础语法

1.3.1 书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
大括号表示代码块

// 判断
if(count==3){
    alert("count等于3");
}

输出语句
- 使用windows.alert()写入警告框
- 使用document.write()写入HTML输出
- 使用console.log()写入浏览器控制台

示例：

<!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>
    window.alert("Hello JavaScript"); // 弹出提示框

    document.write("Hello JavaScript"); // 在网页上写入内容

    console.log("Hello JavaScript"); // 在控制台输出内容
</script>

</body>
</html>

实现效果：

1.3.2 变量

JavaScript中用var关键字来声明变量
JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵守以下规则：
- 变量名只能包含字母、数字、下划线和美元符号（$）
- 变量名不能以数字开头
- 建议使用驼峰命名
特点
- 作用域比较大，相当于全局变量
- 可以重复定义
ECMAScript 6引入了let和const关键字来声明变量
- let：块级作用域，不能重复定义
- const：常量，声明后不能修改，必须初始化

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

<script>
    var x = 10;
    x = "张三";

    alert(x); // 张三

    {
        let y = 20;
    }

    const z = 30;

</script>

</body>
</html>

1.3.3 数据类型

JavaScript中分为：原始类型和引用类型
原始类型：
- Number：数字类型，整数和浮点数都属于数字类型
- String：字符串类型，用单引号或双引号括起来的字符序列
- Boolean：布尔类型，只有true和false两个值
- Undefined：未定义类型，表示变量未赋值时的状态
- Null：空类型，表示变量没有值或对象不存在
- Symbol：符号类型，表示唯一的值（ES6新增）
- 使用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>
    alert(typeof 3);  // number
    alert(typeof 3.14); // number

    alert(typeof "Hello World!");  // string

    alert(typeof true);  // boolean

    alert(typeof null);  // null

    var a ;
    alert(typeof a); // undefined
</script>
</body>
</html>

运算符
- 算术运算符：+、-、*、/、%、++、–
- 赋值运算符：=、+=、-=、*=、/=、%=
- 比较运算符：==、===、!=、!==、>、<、>=、<=
  - == 会进行类型转换
  - === 不会进行类型转换
- 逻辑运算符：&&（与）、||（或）、!（非）
- 位运算符：&（与）、|（或）、^（异或）、~（非）、<<（左移）、>>（右移）
- 三元运算符：条件表达式 ? true_value : false_value
类型转换
- 字符串类型转为数字:
  - 将字符串字面值转为数字。如果字面值不是数字,则转为NaN
- 其他类型转为boolean:
  - Number: 0和NaN为false,其他均转为true
  - String: 空字符串为false,其他均转为true
  - Null 和undefined：均转为false

示例：

<!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>
    var age = 20;
    var _age = "20";
    var $age = 20;

    alert(age == _age); // true, == 会进行类型转换
    alert(age === _age); // false, === 不会进行类型转换
    alert(age == _age); // true

    // 类型转换
    alert(parseInt("20")); // 20, 字符串转换为数字
    alert(parseInt("20abc")); // 20, 字符串转换为数字，遇到非数字字符停止转换
    alert(parseInt("abc20")); // NaN, 字符串转换为数字，非数字字符开头返回 NaN

    if(0){
        alert("0 转换为false");
    }
    if(NaN){
        alert("NaN 转换为false");
    }
    if(-1){
        alert("除0和NaN其他数字都转换为false");
    }

    if(""){
        alert("空字符串转换为false");
    }
    if(null){
        alert("null 转换为false");
    }
    if(undefined){
        alert("undefined 转换为false");
    }
</script>

</body>
</html>

1.3.4 流程控制语句

if…else if…else
switch
for
while
do…while

1.4 JS函数

介绍：函数(方法)是被设计为执行特定任务的代码块。

定义:

方式一：JavaScript函数通过function关键字进行定义，语法为:

function 函数名称(参数列表) {
    // 函数体
    return 返回值;
}

方式二：函数表达式，语法为:

var 函数名称 = function(参数列表) {
    // 函数体
    return 返回值;
}

方式三：箭头函数，语法为:

var 函数名称 = (参数列表) => {
    // 函数体
    return 返回值;
}

注意：
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可
调用:函数名称(实际参数列表)

示例：

<!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>
    // 方式一
    function add(x, y) {
        return x + y;
    }

    var result = add(5, 10); // 调用函数
    alert(result); // 15

    // 方式二
    var add = function(x, y) {
        return x + y;
    }

    var result = add(5, 10); // 调用函数
    alert(result); // 15
</script>

</body>
</html>

1.5 JS对象

1.5.1 Array

JavaScript中Array对象用于定义数组
定义
方式一：使用Array()构造函数定义数组
1
var arr = new Array(元素列表);
方式二：使用字面量定义数组
1
var arr = [元素列表];
访问数组元素：使用下标访问数组元素，下标从0开始
1
arr[索引] = 值;
JavaScript中的数组相当于Java中的集合，数组的长度可变，而JavaScript是弱类型，所以数组可以存放不同类型的元素
属性：
- length：数组的长度，表示数组中元素的个数
方法：
- forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数
- push()：将新元素添加到数组的末尾，并返回新的长度
- splice()：从数组中删除元素

1.5.2 String

String字符串对象创建方式有两种
方式一：使用String()构造函数创建字符串对象
1
var str = new String(字符串);
- 方式二：使用字面量创建字符串对象
  1
  var str = "字符串";
属性：
- length：字符串的长度，表示字符串中字符的个数
方法：
- charAt()：返回指定位置的字符
- indexOf()：返回指定字符在字符串中第一次出现的位置
- trim()：去除字符串两端的空格
- substring()：提取字符串中两个指定索引号之间的字符串

1.5.3 JSON

JavaScript自定义对象

定义格式：

var obj = {
    属性1: 值1,
    属性2: 值2,
    方法1: function() {
        // 方法体
    },
    方法2: () {
        // 方法体
    }
};

调用格式：

1 2	obj.属性1; // 访问属性 obj.方法1(); // 调用方法

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON是基于JavaScript的一个子集，使用文本格式来存储和表示数据。
由于其语法简单，层次结构鲜明，现多用于数据载体，在网络中进行数据传输
JSON格式：
- 对象：由键值对组成，键必须是字符串，值可以是任意类型
- 数组：由值组成，可以是任意类型的值
JSON对象：
- JSON.parse()：将JSON字符串转换为JavaScript对象
- JSON.stringify()：将JavaScript对象转换为JSON字符串

JSON基础语法

1.5.4 BOM

BOM（Browser Object Model）浏览器对象模型，提供了与浏览器进行交互的接口
组成：
- Window对象：表示浏览器窗口，包含了浏览器的所有功能
- Navigator对象：表示浏览器的信息，如浏览器名称、版本号等
- Screen对象：表示屏幕的信息，如屏幕的宽度、高度等
- History对象：表示浏览器的历史记录，如前进、后退等
- Location对象：表示当前页面的URL信息，如协议、主机名、端口号、路径等
Window对象：
- window对象是JavaScript的全局对象，所有的全局变量和函数都是window对象的属性和方法
- 获取：直接使用window，其中window可以省略
- window对象的属性：
  - location：表示当前页面的URL信息
  - history：表示浏览器的历史记录
  - navigator：表示浏览器的信息
  - screen：表示屏幕的信息
- window对象的方法：
  - alert()：显示带有一段消息和一个确认按钮的警告框。
  - confirm()：显示带有-段消息以及确认按钮和取消按钮的对话框。
    - 确认：返回true
    - 取消：返回false
  - setInterval()：按照指定的周期(以毫秒计)来调用函数或计算表达式。
  - setTimeout()：在指定的毫秒数后调用函数或计算表达式。
Location对象：
- 地址栏对象
- 获取：window.location或location
- 属性：
  - href：设置或返回完整的URL

1.5.5 DOM

DOM（Document Object Model）文档对象模型，表示HTML和XML文档的结构化表示
将标记语言的各个组成部分封装为对应的对象
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
DOM树：
- DOM树是一个树形结构，表示文档的层次结构
- 根节点：document对象
- 子节点：元素对象、文本对象、属性对象等
DOM是W3C的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分
1. Core DOM：表示所有文档的标准模型
  - Document：整个文档对象
  - Element：元素对象
  - Attribute：属性对象
  - Text：文本对象
  - Comment：注释对象
2. XML DOM：表示XML文档的标准模型
3. HTML DOM：表示HTML文档的标准模型
  - Image：<img>
  - Button：<input type=“button”>
HTML中的Element对象可以通过Document对象获取，而Document对象可以通过Window对象获取
Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
  - var h1 = document.getElementById(“h1”);
2. 根据标签名获取，返回一个Element对象数组
  - var divs = document.getElementsByTagName(“div”);
3. 根据name属性值获取，返回一个Element对象数组
  - var hobbys = document.getElementsByName(“hobby”);
4. 根据class属性值获取，返回一个Element对象数组
  - var clss = document.getElementsByClassName(“cls”);

示例：

<!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-对象-DOM</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    // 1. 获取Element元素
    // 1.1 根据ID获取元素
    // var img = document.getElementById("h1");
    // alert(img); // [object HTMLImageElement]
    
    // 1.2 根据标签获取元素
    // var divs = document.getElementsByTagName("div");
    // alert(divs); // [object HTMLCollection]

    // 1.3 根据name属性值获取元素
    // var hobbys = document.getElementsByName("hobby");

    // 1.4 根据class属性值获取元素
    // var clss = document.getElementsByClassName("cls");

    // 2. 查询参考手册，属性、方法
    var divs = document.getElementsByTagName("div");
    divs[0].innerHTML = "传智教育666"; // 修改元素内容
</script>
</html>

1.5.6 DOM案例

通过DOM操作完成如下效果实现
1. 点亮灯泡
2. 将所有的div标签的标签体内容后面加上very good
3. 使所有的复选框呈现被选中状态

实现代码：

<!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-对象-DOM-案例</title>
</head>

<body>
    <img id="h1" src="img/off.gif">  <br><br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div>  <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
</body>

<script>
    //1. 点亮灯泡 
    var img = document.getElementById("h1")
    img.src = "img/on.gif"; // 1.1 根据ID获取元素

    //2. 将所有div标签的内容后面加上
    var divs = document.getElementsByTagName("div"); // 2.1 根据标签获取元素
    for (var i = 0; i < divs.length; i++) {
        divs[i].innerHTML += "<font color='red'>very good</font>"; // 2.2 修改元素内容
    }

    //3. 使所有的复选框呈现选中状态
    var hobbys = document.getElementsByName("hobby"); // 3.1 根据name属性值获取元素
    for (var i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = true; // 3.2 修改元素内容
    }    

</script>
</html>

2025.05.03

1.6 JS事件监听

事件：HTML事件是发生在HTML元素上的“事情”，比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码

1.6.1 事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮">

<script>
  function on() {
      alert("按钮被点击了！");
  }
</script>

方式二：通过DOM元素属性进行绑定

<input type="button" id="btn" value="按钮">

<script>
  document.getElementById("btn").onclick = function() {
      alert("按钮被点击了！");
  }
</script>

1.6.2 常见事件

常见事件

示例：

<!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 onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
        
        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <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">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>

</body>

<script>
    //onload : 页面/元素加载完成后触发
    function load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>

1.6.3 案例

需求：通过事件监听及DOM操作，完成如下效果实现：
1. 点击“点亮”按钮电量灯泡，点击“熄灭”按钮熄灭灯泡
2. 输入框鼠标聚焦后展示小写，鼠标离焦后展示大写
3. 点击“全选”按钮使所有复选框呈现被选中的状态，点击“反选”按钮使所有复选框呈现取消勾选的状态

实现代码：

<!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>

    <img id="light" src="img/off.gif"> <br>

    <input type="button" value="点亮" onclick="on()"> 
    <input type="button"  value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()"> 
    <input type="button" value="反选" onclick="reverse()">

</body>

<script>

    //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    function on(){
        document.getElementById("light").src = "img/on.gif";
    }

    function off(){
        document.getElementById("light").src = "img/off.gif";
    }


    //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    function lower(){
        var input = document.getElementById("name");
        input.value = document.getElementById("name").value.toLowerCase();
    }

    function upper(){
        var input = document.getElementById("name");
        input.value = document.getElementById("name").value.toUpperCase();
    }


    //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    function checkAll(){
        var checkboxes = document.getElementsByName("hobby");
        for(var i=0; i<checkboxes.length; i++){
            checkboxes[i].checked = true;
        }
    }

    function reverse(){
        var checkboxes = document.getElementsByName("hobby");
        for(var i=0; i<checkboxes.length; i++){
            checkboxes[i].checked = !checkboxes[i].checked;
        }
    }
</script>
</html>

二、Vue

2.1 Vue简介

Vue是一套前端框架，免除原生JavaScript中繁琐的DOM操作，简化了前端开发的流程
基于MVVM（Model-View-ViewModel）设计模式，实现数据的双向绑定，将编程的关注点放在数据上
官网：https://v2.cn.vuejs.org/
插值表达式
- 形式：
- 内容：
  - 变量
  - 三元运算符
  - 函数调用
  - 算术运算

示例：

<!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>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{ message }}
    </div>

</body>
<script>
    // 定义Vue对象
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>
</html>

2.2 Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义，例如：v-if、v-show、v-for等
常用指令:

指令	作用
v-bind	为HTML标签绑定属性值，如设置href、css样式等
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件
v-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else-if	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性

2.2.1 v-bind&v-model

v-bind&v-model

2.2.2 v-on

v-on

2.2.3 v-if&v-show

v-if&v-show

2.2.4 v-for

v-for

2.3 Vue案例

需求：通过Vue完成表格数据的渲染展示

实现代码：

<!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>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user, index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

实现效果：

2.4 Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程
生命周期的八个阶段：每触发一个生命周期，会自动执行一个生命周期方法（钩子）
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	挂载前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestory	销毁前
destoryed	销毁后

mounted示例：

<!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>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端")
        }
    })
</script>
</html>

2025.05.04

三、Ajax

3.1 Ajax简介

Ajax（Asynchronous JavaScript and XML）是一种用于创建异步Web应用程序的技术，允许在不重新加载整个页面的情况下与服务器交换数据
作用
- 数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据
- 异步交互:可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如:搜索联想、用户名是否可用的校验等等
同步与异步
原生Ajax
1. 准备数据地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
2. 创建XMLHttpRequest对象，用于和服务器交换数据
3. 向服务器发送请求
4. 获取服务器响应的数据

示例：

<!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</title>
</head>
<body>
    
    <input type="button" value="获取数据" onclick="getData()">

    <div id="div1"></div>
    
</body>
<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest  = new XMLHttpRequest();
        
        //2. 发送异步请求
        xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
        xmlHttpRequest.send();//发送请求
        
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>
</html>

3.2 Axios

Axios对原生的Ajax进行了封装，简化了Ajax的使用，快速开发
官网：https://axios-http.cn/
使用：
1. 引入axios.js文件
2. 使用Axios发送请求，并获取响应结果
请求方式别名
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.post(url[, data[, config]])
- axios.put(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>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    
    <input type="button" value="获取数据GET" onclick="get()">

    <input type="button" value="删除数据POST" onclick="post()">

</body>
<script>
    function get(){
        //通过axios发送异步请求-get
        // axios({
        //     method: "get",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
        // }).then(result => {
        //     console.log(result.data);
        // })


        axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            console.log(result.data);
        })
    }

    function post(){
        //通过axios发送异步请求-post
        // axios({
        //     method: "post",
        //     url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        //     data: "id=1"
        // }).then(result => {
        //     console.log(result.data);
        // })

        axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then(result => {
            console.log(result.data);
        })
    }
</script>
</html>

3.3 Axios案例

需求：基于Vue和Axios完成数据的动态加载展示
数据准备的url：http://yapi.smart-xwork.cn/mock/169327/emp/list
在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面

实现代码：

<!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>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>图像</th>
                <th>性别</th>
                <th>职位</th>
                <th>入职日期</th>
                <th>最后操作时间</th>
            </tr>

            <tr align="center" v-for="(emp,index) in emps">
                <td>{{index + 1}}</td>
                <td>{{emp.name}}</td>
                <td>
                    <img :src="emp.image" width="70px" height="50px">
                </td>
                <td>
                    <span v-if="emp.gender == 1">男</span>
                    <span v-if="emp.gender == 2">女</span>
                </td>
                <td>{{emp.job}}</td>
                <td>{{emp.entrydate}}</td>
                <td>{{emp.updatetime}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
       el: "#app",
       data: {
         emps:[]
       },
       mounted () {
          //发送异步请求,加载数据
          axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
            this.emps = result.data.data;
          })
       }
    });
</script>
</html>

四、前端工程化

4.1 前后端分离开发

流程：
1. 需求分析
2. 接口定义（API接口文档）
3. 前后端并行开发（遵守规范）
4. 测试（前端测试、后端测试）
5. 前后端联调测试

4.2 前端工程化

前端工程化是指在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化

4.3 环境准备

Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue项目的基本结构
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS
Vue项目-目录结构

4.4 Vue项目开发流程

4.5 Element

Element是饿了么团队研发的一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库
组件：组成网页的部件
官网：https://element.eleme.cn/#/zh-CNListener
快速入门
- 安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：
  - npm install element-ui@2.15.3
- 引入ElementUI组件库
  1
  2
  3
  4
  5
  
  import ElementUI from 'element-ui'
  import 'element-ui/lib/theme-chalk/index.css'
  
  Vue.use(ElementUI)
- 访问官网，复制组件代码，调整

4.6 Vue路由

Vue Router是Vue.js的官方路由
组成：
- VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件
- <router-link>：请求链接组件，浏览器会解析成<a>
- <router-view>：动态视图组件，用来渲染展示与路由对应的组件

安装Vue Router（在当前工程的目录下），在命令行执行指令：
- npm install vue-router@3.5.3
定义路由

// router\index.js
const routes = [
  {
    path: '/',
    redirect: '/emp'
  },
  {
    path: '/emp',
    name: 'emp',
    component: () => import('../views/tlias/EmpView.vue')
  }, 
  {
    path: '/dept',
    name: 'dept',
    component: () => import('../views/tlias/DeptView.vue')
  }
]

4.7 打包

运行build命令，打包项目
- npm run build
打包完成后，dist目录下会生成一个index.html文件和一个静态资源文件夹，index.html是项目的入口文件，静态资源文件夹中存放的是项目的静态资源文件
Nginx部署
- 介绍: Nginx是-款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少,并发能力强
- 官网：http://nginx.org/
部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下
启动：双击nginx.exe文件，启动Nginx服务器，默认占用80端口，如果80端口号被占用，可以在nginx.conf文件中修改端口号

参考资料：
[1] 黑马程序员Java零基础视频教程_下部