【Day02-JS+Vue+Ajax】

1. JS介绍

在前面的课程中，我们已经学习了HTML、CSS的基础内容，我们知道HTML负责网页的结构，而CSS负责的是网页的表现。而要想让网页具备一定的交互效果，具有一定的动作行为，还得通过JavaScript来实现。那今天,我们就来讲解JavaScript，这门语言会让我们的页面能够和用户进行交互。

那什么是JavaScript呢 ?

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

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

2. 引入方式

2.1 介绍

同样，js代码也是书写在html中的，那么html中如何引入js代码呢？主要通过下面的2种引入方式：

**第一种方式：**内部脚本，将JS代码定义在HTML页面中

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

html 复制代码

<body>
  <!-- 页面内容 -->
  
  <script>
    alert("Hello World");
  </script>
</body>

**第二种方式：**外部脚本，将JS代码定义在外部 JS文件中，然后引入到 HTML页面中

外部JS文件中，只包含JS代码，不包含<script>标签
引入外部js的<script>标签，必须是双标签

例子：

javascript 复制代码

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#117700"><</span><span style="color:#117700">script</span> <span style="color:#0000cc">src</span>=<span style="color:#aa1111">"js/demo.js"</span><span style="color:#117700">></</span><span style="color:#117700">script</span><span style="color:#117700">></span></span></span>

注意1：demo.js中只有js代码，没有<script>标签

注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合

例子：

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>JS-引入方式</title>
</head>
<body>

    <!-- 方式一: 内部脚本 -->
    <script>
        alert("Hello World");
    </script>
</body>
</html>

外部脚本需创建js文件夹在里边创建js文件

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>JS-引入方式</title>
</head>
<body>

    <!-- 方式一: 内部脚本 -->
    <!-- <script>
        alert("Hello World");
    </script> -->
    <script src="js/demo.js"></script>
</body>
</html>

3. 基础语法

3.1 书写规范

掌握了js的引入方式，那么接下来我们需要学习js的书写了，首先需要掌握的是js的书写语法，语法规则如下：

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

我们需要借助js中3钟输出语句，来演示书写语法

api	描述
window.alert(...)	警告框
document.write(...)	在HTML 输出内容
console.log(...)	写入浏览器控制台

创建html文件

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>JS-基本语法-输出语句</title>
</head>
<body>
	
    <script>
        //方式一: 写入浏览器的body区域
        document.write("Hello JS (document.write)");

        //方式二: 弹出框
        window.alert("Hello JS (window.alert)");

        //方式三: 控制台
        console.log("Hello JS (console.log)")
    </script>
</body>
</html>

3.2 变量

3.2.1 let

基本的书写语法我们清楚了之后，接下来，我们再来讲解JS中的变量。在js中，变量的声明和java中还是不同的。

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

变量的声明示例如下所示：

html 复制代码

<script>
    //变量
    let a = 20;
    a = "Hello";
    alert(a);
</script>

上述的示例中，大家会看到变量a既可以存数字，又可以存字符串。因为JS是弱类型语言。

3.2.2 const

在JS中，如果声明一个场景，需要使用`const`关键字。一旦声明，常量的值就不能改变（不可以重新赋值）。

html 复制代码

<body>

    <script>
        //常量
        const PI = 3.14;
        PI = 3.15;
        alert(PI);
    </script>
</body>

浏览器打开之后，会报如下错误：常量不可以被重新分配值。（右键或者F12检查在控制台中）

3.2.3 注意

在早期的JS中，声明变量还可以使用 var 关键字来声明。例如：

html 复制代码

<body>

    <script>
         //var声明变量
		var name = "A";
		name = "B";
		alert(name);
        
         var name = "C"
         alert(name);
    </script>
</body>

打开浏览器运行之后，大家会发现，可以正常执行，第一次弹出 B，第二次弹出 C 。我们看到 name变量重复声明了，但是呢，如果使用var关键字，是没有问题的，可以重复声明。

var声明的变量呢，还有一些其他不严谨的地方，这里就不再一一列举了，所以这个声明变量的关键字，并不严谨【不推荐】。

3.3 数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为：原始数据类型和引用数据类型。那这部分，我们先来学习原始数据类型，主要包含以下几种类型：

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

使用typeof 关键字可以返回变量的数据类型，接下来我们需要通过书写代码来演示js中的数据类型

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>JS-数据类型</title>
</head>
<body>

    <script>
        //原始数据类型
        alert(typeof 3); //number
        alert(typeof 3.14); //number

        alert(typeof "A"); //string
        alert(typeof 'Hello');//string

        alert(typeof true); //boolean
        alert(typeof false);//boolean

        alert(typeof null); //object 

        var a ;
        alert(typeof a); //undefined

    </script>
</body>
</html>

对于字符串类型的数据，除了可以使用双引号（"..."）、单引号（'...'）以外，还可以使用反引号（`...`）。而使用反引号引起来的字符串，也称为模板字符串。

模板字符串的使用场景：拼接字符串和变量。
模板字符串的语法：
- `...` ：反引号（英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）
- 内容拼接时，使用 ${ } 来引用变量

具体示例如下：

html 复制代码

 <script>
    let name = 'Tom';
    let age = 18;
    console.log('大家好, 我是新入职的' + name + ', 今年' + age + '岁了, 请多多关照'); //原始方式 , 手动拼接字符串
    console.log(`大家好, 我是新入职的${name}, 今年${age}岁了, 请多多关照`); //使用模板字符串方式拼接字符串
  </script>

3.4 运算符

3.4.1 运算符

那接下来，我们再来介绍JS中的运算符。JS中的运算规则绝大多数还是和JAVA中是一致的，具体运算符如下：

运算规则	运算符
算术运算符	+ , - , * , / , % , ++ , --
赋值运算符	= , += , -= , *= , /= , %=
比较运算符	> , < , >= , <= , != , == , === 注意 == 会进行类型转换，=== 不会进行类型转换
逻辑运算符	&& , \|\| , !
三元运算符	条件表达式 ? true_value: false_value

上述所罗列的这些运算符中，绝大部分的运算符和Java中的使用方式、含义都是一样的。那这里，我们主要介绍一下 = 、==、=== 的区别：

= 是赋值操作
== 会在比较时，判断左右两边的值是否相等（会自动进行类型转换）
=== 全等，在比较时，判断左右两边的类型和值是否都相等，都相等才为true（不会进行类型转换）

接下来我们通过代码来演示JS中的运算法，主要记忆JS中和JAVA中不一致的地方

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>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 ，类型一样，值一样
    </script>
</body>
</html>

3.4.2 类型转换

在某些运算被执行时，系统内部自动将数据类型进行转换，这种转换成为隐式转换。

字符串 <-> 数字：
- +号两边只要有一个是字符串，都会把另外一个转成字符串。
- 除了+外的算术运算符，比如：- * / 都会把字符串转为数字类型。
- 通过parseInt(...)函数，可以将一个字符串转为数字。
其他类型 -> 布尔类型：
- Number：0 和 NaN为false，其他均转为true。
- String：空字符串为false，其他均转为true。
- Null 和 undefined ：均转为false。

演示1: 字符串 <-> 数字

javascript 复制代码

//类型转换 - 字符串 <-> 数字
alert(typeof ('10' - 1)); //number
alert(typeof ('10' + 1)); //string

alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

演示2: 其他类型 <-> 布尔类型

在js中，还有非常重要的一点是：0，null，undefined，""，NaN 理解成false，反之理解成true。

javascript 复制代码

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

if(""){//false
    alert("空字符串为 false, 其他都是true");
}

if(" "){//true
    alert("空格字符串为 true");
}


if(null){//false
    alert("null 转化为false");
}
if(undefined){//false
    alert("undefined 转化为false");
}

**需要注意的是：**在JS中，0，null，undefined，""，NaN理解成false，反之都为 true。

3.5 流程控制语句

在JS中，当然也存在对应的流程控制语句。常见的流程控制语句如下：

if ... else if ... else ...
switch
for
while
do ... while

4. 函数

在JAVA中我们为了提高代码的复用性，可以使用方法。同样，在JavaScript中可以使用函数来完成相同的事情。JavaScript中的函数被设计为执行特定任务的代码块，方便程序的封装复用。在JS中，需要通过关键字function来定义。接下来我们学习一下JavaScript中定义函数的2种语法：

4.1 格式一

javascript 复制代码

function 函数名(参数1,参数2..){
    要执行的代码
    return a;
}

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
返回值也不需要声明类型，直接return即可

示例：

javascript 复制代码

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

调用上述函数

javascript 复制代码

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

我们在调用add函数时，再添加2个参数，修改代码如下：

javascript 复制代码

var result = add(10,20,30,40);
alert(result);

浏览器打开，发现没有错误，并且依然弹出30，这是为什么呢？

因为在JavaScript中，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。

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

4.2 格式二

刚才我们定义函数，是为函数指定了一个名字。那我们也可以不为函数指定名字，那这一类的函数，我们称之为匿名函数。那接下来，方式二，就来介绍一下匿名函数的定义和调用。

**匿名函数：**是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。

匿名函数定义可以通过两种方式：函数表达式和箭头函数。

跟上边调用方法一致，直接调用

也可以在定义匿名函数之后，让该函数立即执行，这类函数我们也称为 立即执行函数。

javascript 复制代码

(function (a,b) {console.log(a + b);})(10,20);

((a,b) => {console.log(a + b);})(100,200);

5. JS对象

JavaScript中的对象有很多，主要可以分为如下3大类，我们可以打开W3school在线学习文档，来到首页，在左侧栏找到浏览器脚本下的JavaScript。

5.1 基本对象

5.1.1 Array对象

5.1.1.1 语法格式

Array对象时用来定义数组的。常用语法格式有如下2种：

javascript 复制代码

//方式1：
let 变量名 = new Array(元素列表); 

//例如：
let arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）

//方式2：
let 变量名 = [ 元素列表 ]; 

//例如：
let arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）

//获取数组值
arr[索引] = 值;

示例：

javascript 复制代码

<script>
     //定义数组
     //let arr = new Array(1,2,3,4);
     let arr = [1,2,3,4];
    
	//获取数组中的值，索引从0开始计数
     console.log(arr[0]);
     console.log(arr[1]);
</script>

5.1.1.2 特点

与java中不一样的是，JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值【总结起来：长度可变、类型可变】。

javascript 复制代码

//特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

console.log(arr[10]);
console.log(arr[9]);
console.log(arr[8]);

因为索引8和9的位置没有值，所以输出内容undefined。当然，我们也可以给数组添加其他类型的值，添加代码如下：注释掉之前控制台输出的代码

javascript 复制代码

//特点: 长度可变 类型可变
let arr = [1,2,3,4];
arr[10] = 50;

// console.log(arr[10]);
// console.log(arr[9]);
// console.log(arr[8]);

arr[9] = "A";
arr[8] = true;

console.log(arr);

5.1.1.3 属性和方法

Array作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下Array对象的属性和方法

官方文档中提供了Array的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：

属性：

属性	描述
length	设置或返回数组中元素的数量。

方法：

方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
map()	遍历每个数组元素，调用函数进行处理，并将结果封装到一个新数组中
push()	将一个或多个元素添加到数组的末尾，并返回新的长度。
pop()	从数组移除最后一个元素，并返回该元素。
unshift()	在数组开头添加一个或多个元素，并返回数组的新长度。
shift()	从数组移除第一个元素，并返回该元素。
splice()	从数组中删除元素。

length属性：

length属性可以用来获取数组的长度，所以我们可以借助这个属性，来遍历数组中的元素，添加如下代码：

javascript 复制代码

let arr = [1,2,3,4];
arr[10] = 50;
for (let i = 0; i < arr.length; i++) {
	console.log(arr[i]);
}

forEach()方法

首先我们学习forEach()方法，顾名思义，这是用来遍历的，那么遍历做什么事呢？所以这个方法的参数，需要传递一个函数，而且这个函数接受一个参数，就是遍历时数组的值。修改之前的遍历代码如下：

javascript 复制代码

//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
     console.log(e);
})

//箭头函数，类似于java中lambda表达式
arr.forEach((e) => {
     console.log(e);
})

map() 方法

该方法是用于遍历数组中的元素，调用传入的函数对元素进行处理，并将结果封装到一个新数组中。如下所示：

javascript 复制代码

//map: 对arr中的每一个元素进行处理, 在原来的基础上加10, 并将其封装到一个新的数组 arr2 中.
let arr2 = arr.map((e) => e = e+10);
console.log(arr2);

push()方法

push()方法是用于向数组的末尾添加元素的，其中函数的参数就是需要添加的元素。编写如下代码：向数组的末尾添加3个元素

javascript 复制代码

//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);

pop()方法

pop()方法是用来移除数组中的最后一个元素，并返回该元素。编写如下代码：

javascript 复制代码

//pop: 移除最后一个元素
arr.pop();
console.log(arr);

unshift() 方法

该方法是用于在数组的开头添加元素(一个或多个)，并返回新的数组的长度。示例如下：

javascript 复制代码

//unshift: 往数组的头部添加元素 A
arr.unshift('A', 'B');
console.log(arr);

shift() 方法

该方法用来在数组的头部移除第一个元素，并返回该元素。示例如下：

javascript 复制代码

arr.shift();
console.log(arr);

splice()方法

splice()方法用来删除数组中的元素，函数中填入2个参数。

参数1：表示从哪个索引位置删除

参数2：表示删除元素的个数

如下代码表示：从索引2的位置开始删，删除2个元素

javascript 复制代码

//splice: 删除元素
arr.splice(2,2);
console.log(arr);

完整代码：

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>JS-对象-Array</title>
</head>

<body>
    <script>
        //1. 定义数组
        //let arr = new Array(1,2,3,4);
        // let arr = [1,2,3,4];
        
        //获取数组中的值，索引从0开始计数
        // console.log(arr[0]);
        // console.log(arr[1]);

        //特点: 长度可变 类型可变
        // let arr = [1,2,3,4];
        // arr[10] = 50;
        
        // arr[9] = "A";
        // arr[8] = true;

        // console.log(arr);

        // console.log(arr[10]);
        // console.log(arr[9]);
        // console.log(arr[8]);

        //2. 数组属性 - length
        let arr = [1,2,3,4];
        arr[10] = 50;
        // for (let i = 0; i < arr.length; i++) {
        //     console.log(arr[i]);
        // }

        //3. 数组方法 - forEach , map, push , pop , unshift , shift , splice
        // arr.forEach(function(e){
        //     console.log(e);
        // })

        // let arr2 = arr.map((e) => e = e+10);
        // console.log(arr2);

        // arr.push(7,8,9);
        // console.log(arr);

        // arr.pop();
        // console.log(arr);

        // arr.unshift('A', 'B');
        // console.log(arr);

        // arr.shift();
        // console.log(arr);

        //splice: 删除元素
        arr.splice(2,2);
        console.log(arr);

    </script>
</body>

</html>

5.1.2 String对象

5.1.2.1 语法格式

String对象的创建方式有2种：

javascript 复制代码

//方式1：
let 变量名 = new String("...") ; //方式一

//例如：
let str = new String("Hello String");

方式2：
let 变量名 = '...' ; //方式二

例如：
let str = 'Hello String';

<script>
    //创建字符串对象
    //var str = new String("Hello String");
    let str = '  Hello String    ';

    console.log(str);
</script>

5.1.2.2 属性和方法

String对象也提供了一些常用的属性和方法，如下表格所示：

属性：

属性	描述
length	字符串的长度。

方法：

方法	描述
charAt()	返回在指定位置的字符。
indexOf()	检索字符串。
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符。

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>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    //var str = new String("Hello String");
    var str = "  Hello String    ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(4));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim
    var s = str.trim();
    console.log(s.length);

    //substring(start,end) --- 开始索引, 结束索引 (含头不含尾)
    console.log(s.substring(0,5));

</script>
</html>

5.1.3 JSON对象

5.1.3.1 自定义对象

在 JavaScript 中自定义对象特别简单，其语法格式如下：

javascript 复制代码

let 对象名 = {
    属性名1: 属性值1, 
    属性名2: 属性值2,
    属性名3: 属性值3,
    方法名称: function(形参列表){}
};

演示：

html 复制代码

<script>
    //自定义对象
    let user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing: function(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.sing();
</script>

<script>
    //简化
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "男",
        sing(){
             console.log("悠悠的唱着最炫的民族风~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

定义

javascript 复制代码

var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(userStr.name)

1). JSON字符串 -> JS对象

javascript 复制代码

var obj = JSON.parse(userStr);
alert(obj.name);

2). JS对象 -> JSON字符串

javascript 复制代码

alert(JSON.stringify(obj));

示例：

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>JS-对象-JSON</title>
</head>

<body>


    <script>
        //1. 自定义JS对象
        // var user = {
        //     name: "Tom",
        //     age: 10,
        //     gender: "男",
        //     sing: function(){
        //         console.log("悠悠的唱着最炫的民族风~");
        //     }
        // }

        // console.log(user.name);
        // user.sing();

        //2. JSON对象
        var userStr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
        // alert(userStr.name);

        var obj = JSON.parse(userStr);
        alert(obj.name);
        
        alert(JSON.stringify(obj));
    </script>
</body>

</html>

5.2 BOM对象

接下来我们学习BOM对象，BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。

也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。

例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对象的href属性来完成，代码如下：location.href='http://www.baidu.com'

BOM中提供了如下5个对象：

对象名称	描述
Window	浏览器窗口对象
Navigator	浏览器对象
Screen	屏幕对象
History	历史记录对象
Location	地址栏对象

window对象提供了获取其他BOM对象的属性：

属性	描述
history	用于获取history对象
location	用于获取location对象
Navigator	用于获取Navigator对象
Screen	用于获取Screen对象

也就是说我们要使用location对象，只需要通过代码window.location或者简写location即可使用

window也提供了一些常用的方法，如下表格所示：

函数	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
comfirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

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>JS-对象-BOM</title>
</head>
<body>
    
</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 -- 确认: true , 取消: false
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 - setInterval -- 周期性的执行某一个函数
    // var i = 0;
    // setInterval(function(){
    //     i++;
    //     console.log("定时器执行了"+i+"次");
    // },2000);

    //定时器 - setTimeout -- 延迟指定时间执行一次 
    // setTimeout(function(){
    //     alert("JS");
    // },3000);
    
    //location
    alert(location.href);

    location.href = "https://www.itcast.cn";

</script>
</html>

5.3 DOM对象

5.3.1 DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

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

那么我们学习DOM技术有什么用呢？主要作用如下：

改变 HTML 元素的内容
改变 HTML 元素的样式（CSS）
对 HTML DOM 事件作出反应
添加和删除 HTML 元素

从而达到动态改变页面效果目的，具体我们可以查看代码中提供的 11. JS-对象-DOM-演示.html 来体会DOM的效果。

5.3.2 DOM对象

DOM对象：浏览器根据HTML标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性，就会自动映射到标签身上
DOM的核心思想：将网页的内容当做对象来处理
document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(...)
DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)

5.3.3 获取DOM对象

我们可以通过如下两种方式来获取DOM元素。

根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但是没有push、pop等数组方法）

函数	描述
document.getElementById()	根据id属性值获取，返回单个Element对象
document.getElementsByTagName()	根据标签名称获取，返回Element对象数组
document.getElementsByName()	根据name属性值获取，返回Element对象数组
document.getElementsByClassName()	根据class属性值获取，返回Element对象数组

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

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

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
	    
        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html>

示例：

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

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

    <script>
        //根据CSS选择器获取DOM元素, 获取到匹配的第一个元素
        let s1 = document.querySelector('#sid');
        console.log(s1);
        s1.innerHTML = '草莓菠萝'

        //根据CSS选择器获取DOM元素, 获取到匹配的所有元素
        let s2 = document.querySelectorAll('.txt');
        s2.forEach(s => console.log(s))
    </script>
</body>

</html>

5.3.4 案例

鲁迅说的好，光说不练假把式，光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下2个：

5.3.4.1 需求

需求：订单支付完成后，5秒之后跳转到系统首页（<www.jd.com>）

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>Document</title>
    <style>
        .center {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="center">
        您好, 支付完成, <span id="time">5</span> 秒之后将自动跳转至 <a href="https://www.jd.com">官网</a> 首页 ~
    </div>
	
    <script>
        //1. 获取时间对应的DOM元素
        let time = document.querySelector('#time');

        //2. 开启定时器, 每秒将时间往下减一 , 如果时间>0 , 更新DOM元素的内容 ; 如果时间 < 0 , 则跳转页面 ;
        count = time.innerHTML;
        let timer = setInterval(() => {
            count--;
            if (count > 0) {
                time.innerHTML = count;
            } else {
                clearInterval(timer);
                location.href = 'https://www.jd.com';
            }
        }, 1000);
    </script>
</body>
</html>

6. JS事件

6.1 事件介绍

如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。

什么是事件呢？HTML事件是发生在HTML元素上的 "事情"，例如：

按钮被点击
鼠标移到元素上
输入框失去焦点
按下键盘按键
........

而我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。例如：对于我们所说的百度注册页面，我们给用户名输入框的失去焦点事件绑定函数，当我们用户输入完内容，在标签外点击了鼠标，对于用户名输入框来说，失去焦点，然后执行绑定的函数，函数进行用户名内容的校验等操作。JavaScript事件是js非常重要的一部分，接下来我们进行事件的学习。那么我们对于JavaScript事件需要学习哪些内容呢？我们得知道有哪些常用事件，然后我们得学会如何给事件绑定函数。

所以主要围绕2点来学习：

事件监听
常用事件

6.2 事件监听

JS事件监听的语法:

事件源.addEventListener('事件类型', 要执行的函数);

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

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>JS-事件-事件绑定</title>
</head>

<body>
    <input type="button" id="btn1" value="事件绑定1">
    <input type="button" id="btn2" value="事件绑定2">
    
    <script>
        document.querySelector("#btn1").addEventListener('click', ()=>{
            alert("按钮1被点击了...");
        })
		
        document.querySelector('#btn2').onclick = function(){
            alert("按钮2被点击了...");
        }
    </script>
</body>
</html>

addEventListener 与 on事件区别:

on方式会被覆盖，addEventListener 方式可以绑定多次，拥有更多特性，推荐使用 addEventListener .

6.3 常见事件

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>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("键盘被按下了...");
        })

        //keydown: 某个键盘的键被抬起
        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>

6.4 案例

6.4.1 表格隔行换色

需求：实现表格隔行换色效果，奇数行设置背景色为： #FBFBD4 ，偶数行设置背景色为： #D9D9FA 。

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias智能学习辅助系统</title>
    <style>
      body {
        margin: 0;
      }

      /* 顶栏样式 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #c2c0c0;
        padding: 20px 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      /* 加大加粗标题 */
      .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
      }

      /* 文本链接样式 */
      .header a {
        text-decoration: none;
        color: #333;
        font-size: 16px;
      }

      /* 搜索表单区域 */
      .search-form {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f9f9f9;
      }

      /* 表单控件样式 */
      .search-form input[type="text"], .search-form select {
        margin-right: 10px;
        padding: 10px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 26%;
      }

      /* 按钮样式 */
      .search-form button {
        padding: 10px 15px;
        margin-left: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      /* 清空按钮样式 */
      .search-form button.clear {
        background-color: #6c757d;
      }

      .table {
         min-width: 100%; 
         border-collapse: collapse;
      }
      thead {
        background-color: #ccc;
        line-height: 30px;
      }
      /* 设置表格单元格边框 */
      .table td, .table th { 
        border: 1px solid #ddd; 
        padding: 8px; 
        text-align: center;
      }
      
      .avatar { 
        width: 30px; 
        height: 30px; 
        object-fit: cover; 
        border-radius: 50%; 
      }

      /* 页脚版权区域 */
    .footer {
        background-color: #c2c0c0;
        color: white;
        text-align: center;
        padding: 10px 0;
        margin-top: 30px;
    }

    .footer .company-name {
        font-size: 1.1em;
        font-weight: bold;
    }

    .footer .copyright {
        font-size: 0.9em;
    }

    #container {
      width: 80%;
      margin: 0 auto;
    }
    </style>
</head>
<body>
    
  <div id="container">
    <!-- 顶栏 -->
    <div class="header">
      <h1>Tlias智能学习辅助系统</h1>
      <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <form class="search-form" action="#" method="post">
      <input type="text" name="name" placeholder="姓名" />
      <select name="gender">
          <option value="">性别</option>
          <option value="male">男</option>
          <option value="female">女</option>
      </select>
      <select name="position">
          <option value="">职位</option>
          <option value="班主任">班主任</option>
          <option value="讲师">讲师</option>
          <option value="学工主管">学工主管</option>
          <option value="教研主管">教研主管</option>
          <option value="咨询师">咨询师</option>
      </select>
      <button type="submit">查询</button>
      <button type="reset" class="clear">清空</button>
    </form>

    <table class="table table-striped table-bordered">
      <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://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
            <td>讲师</td>
            <td>2021-03-15</td>
            <td>2023-07-30T12:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
            <td>学工主管</td>
            <td>2020-04-10</td>
            <td>2023-07-29T15:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>岳不群</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
            <td>教研主管</td>
            <td>2019-01-01</td>
            <td>2023-07-30T10:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>宁中则</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
            <td>班主任</td>
            <td>2018-06-01</td>
            <td>2023-07-29T09:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
          <td>令狐冲</td>
          <td>男</td>
          <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
          <td>讲师</td>
          <td>2021-03-15</td>
          <td>2023-07-30T12:00:00Z</td>
          <td class="btn-group">
              <button class="edit">编辑</button>
              <button class="delete">删除</button>
          </td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
            <td>学工主管</td>
            <td>2020-04-10</td>
            <td>2023-07-29T15:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>岳不群</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
            <td>教研主管</td>
            <td>2019-01-01</td>
            <td>2023-07-30T10:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>宁中则</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
            <td>班主任</td>
            <td>2018-06-01</td>
            <td>2023-07-29T09:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
          <td>令狐冲</td>
          <td>男</td>
          <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲" class="avatar"></td>
          <td>讲师</td>
          <td>2021-03-15</td>
          <td>2023-07-30T12:00:00Z</td>
          <td class="btn-group">
              <button class="edit">编辑</button>
              <button class="delete">删除</button>
          </td>
        </tr>
        <tr>
            <td>任盈盈</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="任盈盈" class="avatar"></td>
            <td>学工主管</td>
            <td>2020-04-10</td>
            <td>2023-07-29T15:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>岳不群</td>
            <td>男</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="岳不群" class="avatar"></td>
            <td>教研主管</td>
            <td>2019-01-01</td>
            <td>2023-07-30T10:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
        <tr>
            <td>宁中则</td>
            <td>女</td>
            <td><img src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="宁中则" class="avatar"></td>
            <td>班主任</td>
            <td>2018-06-01</td>
            <td>2023-07-29T09:00:00Z</td>
            <td class="btn-group">
                <button class="edit">编辑</button>
                <button class="delete">删除</button>
            </td>
        </tr>
      </tbody>
    </table>

    <!-- 页脚版权区域 -->
    <footer class="footer">
      <p class="company-name">江苏传智播客教育科技股份有限公司</p>
      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
    </footer>
  </div>
  <script>
    //1.获取所有列表行的元素DOM对象
    let trList = document.querySelectorAll("tr");
    //2.遍历元素对象集合，给每一行的元素对象，添加绑定事件：移入移出事件
    for (let i = 0; i < trList.length; i++) {
      //获取当前行的元素对象
      let tr = trList[i];
      //判断奇偶行
      if (i % 2 == 0){
        //奇数行，绑定鼠标的移入和移出事件，移入改变行的背景色，移出要把背景色恢复
        tr.addEventListener("mouseenter", () => {
          tr.style = "background-color: #F9FBD4";
        });
      } else {
        //偶数行，绑定鼠标的移入和移出事件，移入改变行的背景色，移出要把背景色恢复
        tr.addEventListener("mouseenter", () => {
          tr.style = "background-color: #E8F5FF";
        });
      }
      tr.addEventListener("mouseleave", () => {
        tr.style = "background-color: white";
      });
    }
    //给每一行的删除按钮绑定事件：点击删除当前行
    let delBtns = document.querySelectorAll(".delete");
    for (let i = 0; i < delBtns.length; i++) {
      delBtns[i].addEventListener("click", () => {
        if (confirm("确定要删除吗？")) {
          //删除当前行
          let tr = delBtns[i].parentNode.parentNode;
          tr.remove();
        }  
      })
    }
  </script>
</body>
</html>

7.什么是Vue

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

案例：快速入门

html 复制代码

<!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">
    <!-- 3. vue管理的html区域 -->
     <!-- 使用插值表达式 显示vue的变量 -->
      {{ message }}
      {{ a + b }}
      <table>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
        <!-- 使用 v-for 进行循环 :key 属性，用于标识当前的元素，防止重复渲染-->
        <tr v-for="(user, index) in userList" :key="index">
          <td>{{user.name}}</td>
          <td>{{user.age}}</td>
          <td><span v-if="user.gender == 1">男</span><span v-else>女</span></td>
        </tr>
    </table>
    <a :href="url">百度</a>
    <!-- 使用 v-show 控制元素是否显示 -->
    <p v-show="boo == true">这是一个文字显示的段落</p>
    <br>
    <!-- 使用 v-model 双向绑定 -->
    <input type="text" v-model="message">
    <!-- <br> -->
    <!-- 演示 v-on:click 事件绑定 -->
    <input type="button" value="打印日志" @click="printLog"></p>
    {{count}}
  </div>

  <script type="module">
    //1.引入vue的模块
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    //2.创建Vue实例
    createApp({
      //4.在vue实例中准备要渲染的数据，写在data中，mount挂载
      data(){
        return {
          message:'hello vue3',
          a : 1,
          b : 2,
          url : 'http://www.itcast.com',
          boo : false,
          count : 0,
          userList:[
            {'name':'张三','age':18,'gender':'男'},
            {'name':'李四','age':19,'gender':'女'},
            {'name':'王五','age':20,'gender':'男'}
          ]
        }
      },
      methods: {
        printLog(){
          console.log('打印日志');
          this.count++;
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

1.Vue的使用步骤 ?

准备工作
引入Vue模块
创建Vue的应用实例
定义元素(div)，交给Vue控制
数据驱动视图
准备数据
用插值表达式渲染

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标签绑定事件 |

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tlias智能学习辅助系统</title>
    <style>
      body {
        margin: 0;
      }

      /* 顶栏样式 */
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #c2c0c0;
        padding: 20px 20px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
      }
      
      /* 加大加粗标题 */
      .header h1 {
        margin: 0;
        font-size: 24px;
        font-weight: bold;
      }

      /* 文本链接样式 */
      .header a {
        text-decoration: none;
        color: #333;
        font-size: 16px;
      }

      /* 搜索表单区域 */
      .search-form {
        display: flex;
        align-items: center;
        padding: 20px;
        background-color: #f9f9f9;
      }

      /* 表单控件样式 */
      .search-form input[type="text"], .search-form select {
        margin-right: 10px;
        padding: 10px 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 26%;
      }

      /* 按钮样式 */
      .search-form button {
        padding: 10px 15px;
        margin-left: 10px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      /* 清空按钮样式 */
      .search-form button.clear {
        background-color: #6c757d;
      }

      .table {
         min-width: 100%; 
         border-collapse: collapse;
      }

      /* 设置表格单元格边框 */
      .table td, .table th { 
        border: 1px solid #ddd; 
        padding: 8px; 
        text-align: center;
      }
      
      .avatar { 
        width: 30px; 
        height: 30px; 
        object-fit: cover; 
        border-radius: 50%; 
      }

      /* 页脚版权区域 */
    .footer {
        background-color: #c2c0c0;
        color: white;
        text-align: center;
        padding: 10px 0;
        margin-top: 30px;
    }

    .footer .company-name {
        font-size: 1.1em;
        font-weight: bold;
    }

    .footer .copyright {
        font-size: 0.9em;
    }

    #container {
      width: 80%;
      margin: 0 auto;
    }
    </style>
</head>
<body>
    
  <div id="container">
    <!-- 顶栏 -->
    <div class="header">
      <h1>Tlias智能学习辅助系统</h1>
      <a href="#">退出登录</a>
    </div>

    <!-- 搜索表单区域 -->
    <form class="search-form" action="#" method="post">
      <input type="text" name="name" placeholder="姓名" v-model="searchForm.name" />
      <select name="gender" v-model="searchForm.gender">
          <option value="">性别</option>
          <option value="1">男</option>
          <option value="2">女</option>
      </select>
      <select 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="reset" class="clear">清空</button>
    </form>

    <table class="table table-striped table-bordered">
      <thead>
          <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>头像</th>
              <th>职位</th>
              <th>入职日期</th>
              <th>最后操作时间</th>
              <th>操作</th>
          </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in empList" :key="itemid">
          <td>{{item.name}}</td>
          <td>{{item.gender==1?'男':'女'}}</td>
          <td><img :src="item.image" alt="{{item.name}}" class="avatar"></td>
          <td>
            <span v-show="item.job == 1">班主任</span>
            <span v-show="item.job == 2">讲师</span>
            <span v-if="item.job == 3">学工主管</span>
          </td>
          <td>{{item.entrydate}}</td>
          <td>{{item.updatetime}}</td>
          <td class="btn-group">
            <button class="edit">编辑</button>
            <button class="delete">删除</button>
          </td>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 页脚版权区域 -->
    <footer class="footer">
      <p class="company-name">江苏传智播客教育科技股份有限公司</p>
      <p class="copyright">版权所有 Copyright 2006-2024 All Rights Reserved</p>
    </footer>

    <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 {
            searchForm: {
            name: '',
            gender: '',
            job: ''
            },
            empList: []
          }
        },
        methods:{
            search(){
               console.log("被点击了");
               //请求服务端的url,获取员工列表数据
               axios.get('https://web-server.itheima.net/emps/list?'+'name='+this.searchForm.name+'&gender='+this.searchForm.gender+'&job='+this.searchForm.job)
               .then(res => {
                 console.log(res.data);
                 this.empList = res.data.data;
               }).catch(err => {
                 console.error(err);
               })
          },
          mounted() {
            console.log('vue实例挂载完毕');
            this.search();
          }
      }).mount('#container')
    </script>

  </div>

</body>
</html>

Ajax

1.Axios发送异步请求

GET:

axios.get(url).then((res)=>{...}).catch((err)=>{...})

POST:

axios.post(url).then((res)=>{...}).catch((err)=>{...})

【Day02-JS+Vue+Ajax】

1. JS介绍

2. 引入方式

2.1 介绍

3. 基础语法

3.1 书写规范

3.2 变量

3.2.1 let

3.2.2 const

3.2.3 注意

3.3 数据类型

3.4 运算符

3.4.1 运算符

3.4.2 类型转换

3.5 流程控制语句

4. 函数

4.1 格式一

4.2 格式二

5. JS对象

5.1 基本对象

5.1.1 Array对象

5.1.1.1 语法格式

5.1.1.2 特点

5.1.1.3 属性和方法

5.1.2 String对象

5.1.2.1 语法格式

5.1.2.2 属性和方法

5.1.3 JSON对象

5.1.3.1 自定义对象

定义

5.2 BOM对象

5.3 DOM对象

5.3.1 DOM介绍

5.3.2 DOM对象

5.3.3 获取DOM对象

5.3.4 案例

5.3.4.1 需求

6. JS事件

6.1 事件介绍

6.2 事件监听

6.3 常见事件

6.4 案例

6.4.1 表格隔行换色

7.什么是****Vue

案例：快速入门

1.Vue的使用步骤 ?

2.Vue 常用指令

Ajax

7.什么是Vue