# HTML—CSS

# 标题实现

# 标题排版

	<!-- 文档类型为 HTML -->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- 字符集为 UTF——8 -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>焦点访谈：中国底气新思想夯实大国粮仓</title>
	</head>
	<body>

	<!-- img 标签
	src : 图片资源路径
	width : 宽度 (px : 像素； % ，相对于父元素的百分比)
	height : 高度 (px : 像素； % ，相对于父元素的百分比)

	<img src="./img/news_logo.png" width="80%" >
	路径书写方式
	绝对路径：
	1. 绝对磁盘路径： D:\ 桌面 \HTML\img\news_logo.png
	2. 绝对网络路径：https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
	相对路径：
	./ : 当前目录，./ 可以省略的
	../ : 上一级目录
	./img/news_logo.png
	-->

	<img src="./img/news_logo.png" > 新浪政务 > 正文

	<h1>焦点访谈：中国底气新思想夯实大国粮仓</h1>

	<hr>

	2023年03月02日 21:50 央视网
	<hr>
	</body>
	</html>

CSS 引入方式

具体有 3 种引入方式，语法如下表格所示：

名称	语法描述	示例
行内样式	在标签内使用 style 属性，属性值是 css 属性键值对	<h1 style="xxx:xxx;"> 中国新闻网 </h1>
内嵌样式	定义 <style> 标签，在标签内部定义 css 样式	<style> h1 {...} </style>
外联样式	定义 <link> 标签，通过 href 属性引入外部 css 文件	<link rel="stylesheet" href="css/news.css">

对于上述 3 种引入方式，企业开发的使用情况如下：

内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
内部样式，通过定义 css 选择器，让样式作用于当前页面的指定的标签上。
外部样式，html 和 css 实现了完全的分离，企业开发常用方式。

# 颜色表示

在前端程序开发中，颜色的表示方式常见的有如下三种：

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue...
rgb 表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

# 标题样式

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>焦点访谈：中国底气新思想夯实大国粮仓</title>
	<!-- 方式二：内嵌样式 -->
	<style>
	h1{
	/* color: aqua; */
	/* color: rgb(0, 0, 255); */
	/* color: #00f; */
	color: #4D4F53;
	}
	/* 元素选择器 */
	span{
	color: #8A8888;
	}

	/* 类选择器
	.cls {
	color: #8A8888;
	}
	<span class = "cls">2023 年 03 月 02 日 21:50</span> 央视网 */

	/* ID 选择器 */
	#01{
	color:#8A8888;
	}
	</style>

	<!-- 方式三：外联样式 -->
	<!-- <link rel="stylesheet" href="./css/news.css"> -->
	</head>
	<body>

	<img src="./img/news_logo.png" > 新浪政务 > 正文

	<!-- 方式一：行内样式 -->
	<!-- <h1 style="color: darkgray;"> 焦点访谈：中国底气新思想夯实大国粮仓 & lt;/h1> -->


	<h1>焦点访谈：中国底气新思想夯实大国粮仓</h1>

	<hr>
	<span id = "01">2023年03月02日 21:50</span> 央视网
	<hr>
	</body>
	</html>

# CSS 选择器
顾名思义：选择器是选取需设置样式的元素（标签），但是我们根据业务场景不同，选择的标签的需求也是多种多样的，所以选择器有很多种，因为我们是做后台开发的，所以对于 css 选择器，我们只学习最基本的 3 种。
选择器通用语法如下：
选择器名 {
css样式名：css样式值;
css样式名：css样式值;
}
我们需要学习的 3 种选择器是元素选择器，id 选择器，class 选择器，语法以及作用如下：
1. 元素（标签）选择器：
- 选择器的名字必须是标签的名字
- 作用：选择器中的样式会作用于所有同名的标签上
```
元素名称 {
    css样式名:css样式值；
}
```
例子如下：
div{
color: red;
}
2.id 选择器:
- 选择器的名字前面需要加上#
- 作用：选择器中的样式会作用于指定 id 的标签上，而且有且只有一个标签（由于 id 是唯一的）
```
#id属性值 {
    css样式名:css样式值；
}
```
例子如下：
#did {
color: blue;
}
3. 类选择器：
- 选择器的名字前面需要加上 .
- 作用：选择器中的样式会作用于所有 class 的属性值和该名字一样的标签上，可以是多个
```
.class属性值 {
    css样式名:css样式值；
}
```
例子如下：
.cls{
color: green;
}

# 超链接

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>焦点访谈：中国底气新思想夯实大国粮仓</title>
	<!-- 方式二：内嵌样式 -->
	<style>
	h1{
	/* color: aqua; */
	/* color: rgb(0, 0, 255); */
	/* color: #00f; */
	color: #4D4F53;
	}
	/* 元素选择器 */
	span{
	color: #8A8888;
	}

	/* 类选择器
	.cls {
	color: #8A8888;
	}
	<span class = "cls">2023 年 03 月 02 日 21:50</span> 央视网 */

	/* ID 选择器 */
	#01{
	color:#8A8888;
	}

	a{
	color: black;
	text-decoration: none;
	}
	a:hover{
	color:blue;
	}
	</style>

	<!-- 方式三：外联样式 -->
	<!-- <link rel="stylesheet" href="./css/news.css"> -->
	</head>
	<body>

	<img src="./img/news_logo.png" > <a href="https://gov.sina.com.cn/" target="_blank">新浪政务</a> > 正文

	<!-- 方式一：行内样式 -->
	<!-- <h1 style="color: darkgray;"> 焦点访谈：中国底气新思想夯实大国粮仓 & lt;/h1> -->


	<h1>焦点访谈：中国底气新思想夯实大国粮仓</h1>

	<hr>
	<span id = "01">2023年03月02日 21:50</span> <a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a>
	<hr>
	</body>
	</html>

# 正文实现

正文排版
标签
1). 视频、音频标签
- 视频标签: <video>
  - 属性:
    - src: 规定视频的 url
    - controls: 显示播放控件
    - width: 播放器的宽度
    - height: 播放器的高度
- 音频标签: <audio>
  - 属性:
    - src: 规定音频的 url
    - controls: 显示播放控件
2). 段落标签
- 换行标签: <br>
  - 注意：在 HTML 页面中，我们在编辑器中通过回车实现的换行，仅仅在文本编辑器中会看到换行效果，浏览器是不会解析的，HTML 中换行需要通过 br 标签
- 段落标签: <p>
  - 如: <p> 这是一个段落 </p>
3). 文本格式标签
效果标签标签 (强调)
加粗 b strong
倾斜 i em
下划线 u ins
删除线 s del
前面的标签 b、i、u、s 就仅仅是实现加粗、倾斜、下划线、删除线的效果，是没有强调语义的。而后面的 strong、em、ins、del 在实现加粗、倾斜、下划线、删除线的效果的同时，还带有强调语义。

效果	标签	标签 (强调)
加粗	b	strong
倾斜	i	em
下划线	u	ins
删除线	s	del

	<!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>焦点访谈：中国底气新思想夯实大国粮仓</title>
	<style>
	h1 {
	color: #4D4F53;
	}

	#time {
	color: #968D92;
	font-size: 13px; /* 设置字体大小 */
	}

	a {
	color: black;
	text-decoration: none; /* 设置文本为一个标准的文本 */
	}

	p {
	text-indent: 35px; /* 设置首行缩进 */
	line-height: 40px; /* 设置行高 */
	}

	#plast {
	text-align: right; /* 对齐方式 */
	}
	</style>
	</head>
	<body>

	<!-- 标题 -->
	<img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文

	<h1>焦点访谈：中国底气新思想夯实大国粮仓</h1>

	<hr>
	<span id="time">2023年03月02日 21:50</span>
	<span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
	<hr>

	<!-- 正文 -->
	<!-- 视频 -->
	<video src="video/1.mp4" controls width="950px"></video>

	<!-- 音频 -->
	<!-- <audio src="audio/1.mp3" controls></audio> -->

	<p>
	<strong>央视网消息</strong> （焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
	</p>

	<p>
	人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
	</p>

	<img src="img/1.jpg">

	<p>
	今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
	</p>

	<img src="img/2.jpg">

	<p>
	中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
	</p>

	<p id="plast">
	责任编辑：王树淼 SN242
	</p>
	</body>
	</html>

# 布局标签
- 布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
- 标签：<div> <span>
- 特点：
  - div 标签：
    - 一行只显示一个（独占一行）
    - 宽度默认是父元素的宽度，高度默认由内容撑开
    - 可以设置宽高（width、height）
  - span 标签：
    - 一行可以显示多个
    - 宽度和高度默认由内容撑开
    - 不可以设置宽高（width、height）

页面布局

	<!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>焦点访谈：中国底气新思想夯实大国粮仓</title>
	<style>
	h1 {
	color: #4D4F53;
	}

	#time {
	color: #968D92;
	font-size: 13px; /* 设置字体大小 */
	}

	a {
	color: black;
	text-decoration: none; /* 设置文本为一个标准的文本 */
	}

	p {
	text-indent: 35px; /* 设置首行缩进 */
	line-height: 40px; /* 设置行高 */
	}

	#plast {
	text-align: right; /* 对齐方式 */
	}

	#center {
	width: 65%;
	/* margin: 0% 17.5% 0% 17.5% ; / / 外边距，上右下左 */
	margin: 0 auto;
	}
	</style>
	</head>
	<body>

	<div id="center">
	<!-- 标题 -->
	<img src="img/news_logo.png"> <a href="http://gov.sina.com.cn/" target="_self">新浪政务</a> > 正文

	<h1>焦点访谈：中国底气新思想夯实大国粮仓</h1>

	<hr>
	<span id="time">2023年03月02日 21:50</span>
	<span><a href="https://news.cctv.com/2023/03/02/ARTIUCKFf9kE9eXgYE46ugx3230302.shtml" target="_blank">央视网</a></span>
	<hr>

	<!-- 正文 -->
	<!-- 视频 -->
	<video src="video/1.mp4" controls width="950px"></video>

	<!-- 音频 -->
	<!-- <audio src="audio/1.mp3" controls></audio> -->

	<p>
	<strong>央视网消息</strong> （焦点访谈）：党的十八大以来，以习近平同志为核心的党中央始终把解决粮食安全问题作为治国理政的头等大事，重农抓粮一系列政策举措有力有效，我国粮食产量站稳1.3万亿斤台阶，实现谷物基本自给、口粮绝对安全。我们把饭碗牢牢端在自己手中，为保障经济社会发展提供了坚实支撑，为应对各种风险挑战赢得了主动。连续八年1.3万亿斤，这个沉甸甸的数据是如何取得的呢？
	</p>

	<p>
	人勤春来早，春耕农事忙。立春之后，由南到北，我国春耕春管工作陆续展开，春天的田野处处生机盎然。
	</p>

	<img src="img/1.jpg">

	<p>
	今年，我国启动了新一轮千亿斤粮食产能提升行动，这是一个新的起点。2015年以来，我国粮食产量连续8年稳定在1.3万亿斤以上，人均粮食占有量始终稳稳高于国际公认的400公斤粮食安全线。从十年前的约12200亿斤到2022年的约13700亿斤，粮食产量提高了1500亿斤。
	</p>

	<img src="img/2.jpg">

	<p>
	中国式现代化一个重要的中国特色是人口规模巨大的现代化。我们粮食生产的发展，意味着我们要立足国内，解决14亿多人吃饭的问题。仓廪实，天下安。保障粮食安全是一个永恒的课题，任何时候都不能放松。在以习近平同志为核心的党中央坚强领导下，亿万中国人民辛勤耕耘、不懈奋斗，我们就一定能够牢牢守住粮食安全这一“国之大者”，把中国人的饭碗牢牢端在自己手中，夯实中国式现代化基础。
	</p>

	<p id="plast">
	责任编辑：王树淼 SN242
	</p>
	</div>
	</body>
	</html>

# 表格标签

标签：
- <table> : 用于定义整个表格，可以包裹多个 <tr>，常用属性如下：
  - border：规定表格边框的宽度
  - width：规定表格的宽度
  - cellspacing: 规定单元之间的空间
- <tr> : 表格的行，可以包裹多个 <td>
- <td> : 表格单元格 (普通)，可以包裹内容，如果是表头单元格，可以替换为 <th>

	<!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>HTML-表格</title>
	<style>
	td {
	text-align: center; /* 单元格内容居中展示 */
	}
	</style>
	</head>
	<body>

	<table border="1px" cellspacing="0" width="600px">
	<tr>
	<th>序号</th>
	<th>品牌Logo</th>
	<th>品牌名称</th>
	<th>企业名称</th>
	</tr>
	<tr>
	<td>1</td>
	<td> <img src="img/huawei.jpg" width="100px"> </td>
	<td>华为</td>
	<td>华为技术有限公司</td>
	</tr>
	<tr>
	<td>2</td>
	<td> <img src="img/alibaba.jpg" width="100px"> </td>
	<td>阿里</td>
	<td>阿里巴巴集团控股有限公司</td>
	</tr>
	</table>

	</body>
	</html>

# 表单标签

表单
表单场景：表单就是在网页中负责数据采集功能的，如：注册、登录的表单。
表单标签: <form>
表单属性:
- action: 规定表单提交时，向何处发送表单数据，表单提交的 URL。
- method: 规定用于发送表单数据的方式，常见为： GET、POST。
  - GET：表单数据是拼接在 url 后面的，如： xxxxxxxxxxx?username=Tom&age=12，url 中能携带的表单数据大小是有限制的。
  - POST：表单数据是在请求体（消息体）中携带的，大小没有限制。
表单项标签：不同类型的 input 元素、下拉列表、文本域等。
- input: 定义表单项，通过 type 属性控制输入形式
- select: 定义下拉列表
- textarea: 定义文本域

# 演示

1). GET 方式提交的表单

	<!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>HTML-表单</title>
	</head>
	<body>
	<!--
	form 表单属性:
	action: 表单提交的 url, 往何处提交数据。如果不指定，默认提交到当前页面
	method: 表单的提交方式 .
	get: 在 url 后面拼接表单数据，比如: ?username=Tom&age=12 , url 长度有限制。默认值
	post: 在消息体 (请求体) 中传递的，参数大小无限制的.
	-->

	<form action="" method="get">
	用户名: <input type="text" name="username">
	年龄: <input type="text" name="age">

	<input type="submit" value="提交">
	</form>

	</body>
	</html>

表单编写完毕之后，通过浏览器打开此表单，然后再表单项中录入值之后，点击提交，我们会看到表单的数据在 url 后面提交到服务端，格式为：?username=Tom&age=12。

2). POST 方式提交表单

将上述的表单提交方式由 get，改为 post

	<!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>HTML-表单</title>
	</head>
	<body>
	<!--
	form 表单属性:
	action: 表单提交的 url, 往何处提交数据。如果不指定，默认提交到当前页面
	method: 表单的提交方式 .
	get: 在 url 后面拼接表单数据，比如: ?username=Tom&age=12 , url 长度有限制。默认值
	post: 在消息体 (请求体) 中传递的，参数大小无限制的.
	-->

	<form action="" method="post">
	用户名: <input type="text" name="username">
	年龄: <input type="text" name="age">

	<input type="submit" value="提交">
	</form>

	</body>
	</html>

# 注意事项

表单中的所有表单项，要想能够正常的采集数据，在提交的时候能提交到服务端，表单项必须指定 name 属性。否则，无法提交该表单项。

用户名: <input type="text" name="username">

# 表单项

# 介绍

在一个表单中，可以存在很多的表单项，而虽然表单项的形式各式各样，但是表单项的标签其实就只有三个，分别是：

<input>: 表单项，通过 type 属性控制输入形式。

type 取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期 / 时间 / 日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

<select>: 定义下拉列表，<option> 定义列表项
<textarea>: 文本域

# 演示

创建一个新的表单项的 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>HTML-表单项标签</title>
	</head>
	<body>

	<!-- value: 表单项提交的值 -->
	<form action="" method="post">
	姓名: <input type="text" name="name"> <br><br>
	密码: <input type="password" name="password"> <br><br>
	性别: <input type="radio" name="gender" value="1"> 男
	<label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
	爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
	<label><input type="checkbox" name="hobby" value="game"> game </label>
	<label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
	图像: <input type="file" name="image"> <br><br>
	生日: <input type="date" name="birthday"> <br><br>
	时间: <input type="time" name="time"> <br><br>
	日期时间: <input type="datetime-local" name="datetime"> <br><br>
	邮箱: <input type="email" name="email"> <br><br>
	年龄: <input type="number" name="age"> <br><br>
	学历: <select name="degree">
	<option value="">----------- 请选择 -----------</option>
	<option value="1">大专</option>
	<option value="2">本科</option>
	<option value="3">硕士</option>
	<option value="4">博士</option>
	</select> <br><br>
	描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
	<input type="hidden" name="id" value="1">

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

	</body>
	</html>

# JavaScript

# 基础语法

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

我们需要借助 js 中输出语句，书写语法

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

变量

在 js 中，变量的声明和 java 中还是不同的。首先 js 中主要通过如下 3 个关键字来声明变量的：

关键字	解释
var	早期 ECMAScript5 中用于变量声明的关键字
let	ECMAScript6 中新增的用于变量声明的关键字，相比较 var，let 只在代码块内生效
const	声明常量的，常量一旦声明，不能修改

在 js 中声明变量还需要注意如下几点：

JavaScript 是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名

数据类型和运算符

js 中的数据类型分为：原始类型和引用类型，具体有如下类型

数据类型	描述
number	数字（整数、小数、NaN (Not a Number)）
string	字符串，单双引皆可
boolean	布尔 true，false
null	对象为空
undefined	当声明的变量未初始化时，该变量的默认值是 undefined

运算法，js 中的运算规则绝大多数还是和 java 中一致的，具体运算符如下：

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

==：只比较值是否相等，不区分数据类型，哪怕类型不一致，== 也会自动转换类型进行值得比较
===：不光比较值，还要比较类型，如果类型不一致，直接返回 false

# 函数

两种定义格式

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

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

	~~~html
	<script>

	// 定义函数 - 1
	// function add(a,b){
	// return a + b;
	// }

	// 定义函数 - 2
	var add = function(a,b){
	return a + b;
	}


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

	</script>
	~~~

# 对象

Array 对象

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

# 特点
- 与 java 中不一样的是，JavaScript 中数组相当于 java 中的集合，数组的长度是可以变化的。而且 JavaScript 是弱数据类型的语言，所以数组中可以存储任意数据类型的值
属性和方法
Array 作为一个对象，那么对象是有属性和方法的，所以接下来我们介绍一下 Array 对象的属性和方法
官方文档中提供了 Array 的很多属性和方法，但是我们只学习常用的属性和方法，如下图所示：
属性：
属性描述
length 设置或返回数组中元素的数量。
方法：
方法方法描述
forEach() 遍历数组中的每个有值得元素，并调用一次传入的函数
push() 将新元素添加到数组的末尾，并返回新的长度
splice() 从数组中删除元素

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

方法方法	描述
forEach()	遍历数组中的每个有值得元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

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

	</body>
	<script>
	// 定义数组
	// var arr = new Array(1,2,3,4);
	// var arr = [1,2,3,4];

	// console.log(arr[0]);
	// console.log(arr[1]);

	// 特点：长度可变类型可变
	// var 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);



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

	// console.log("==================");

	//forEach: 遍历数组中有值的元素
	// arr.forEach(function(e){
	// console.log(e);
	// })

	////ES6 箭头函数: (...) => {...} -- 简化函数定义
	// arr.forEach((e) => {
	// console.log(e);
	// })

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

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

	</script>
	</html>

String 对象

语法格式

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

	console.log(str);
	</script>

属性和方法
String 对象也提供了一些常用的属性和方法，如下表格所示：
属性：
属性描述
length 字符串的长度。
方法：
方法描述
charAt() 返回在指定位置的字符。
indexOf() 检索字符串。
trim() 去除字符串两边的空格
substring() 提取字符串中两个指定的索引号之间的字符。

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

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

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

JSON 对象

自定义对象

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

	var 对象名 = {
	属性名1: 属性值1,
	属性名2: 属性值2,
	属性名3: 属性值3,
	函数名称: function(形参列表){}
	};

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()

	<script>
	//自定义对象
	var user = {
	name: "Tom",
	age: 10,
	gender: "male",
	// eat: function(){
	// console.log("用膳~");
	// }
	eat(){
	console.log("用膳~");
	}

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

json 对象
JSON 对象：JavaScript Object Notation，JavaScript 对象标记法。是通过 JavaScript 标记法书写的文本。其格式如下：
{
"key":value,
"key":value,
"key":value
}
其中，key 必须使用引号并且是双引号标记，value 可以是任意数据类型。
借助如下函数来进行 json 字符串和 json 对象的转换

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

	</body>
	<script>
	//// 定义 json
	var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
	//alert(jsonstr.name);

	////json 字符串 --js 对象
	var obj = JSON.parse(jsonstr);
	//alert(obj.name);

	////js 对象 --json 字符串
	alert(JSON.stringify(obj));


	</script>
	</html>

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 d 地址栏对象
Window 对象

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

window 对象指的是浏览器窗口对象，是 JavaScript 的全部对象，所以对于 window 对象，我们可以直接使用，并且对于 window 对象的方法和属性，我们可以省略 window. 例如：我们之前学习的 alert () 函数其实是属于 window 对象的，其完整的代码如下：

window.alert('hello');

其可以省略 window. 所以可以简写成

alert('hello')

所以对于 window 对象的属性和方法，我们都是采用简写的方式。window 提供了很多属性和方法，下表列出了常用属性和方法

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

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

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

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

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

演示上述函数：

alert () 函数：弹出警告框，函数的内容就是警告框的内容

	<script>
	//window 对象是全局对象，window 对象的属性和方法在调用时可以省略 window.
	window.alert("Hello BOM");
	alert("Hello BOM Window");
	</script>

confirm () 函数：弹出确认框，并且提供用户 2 个按钮，分别是确认和取消。
添加如下代码：
confirm("您确认删除该记录吗?");
但是我们怎么知道用户点击了确认还是取消呢？所以这个函数有一个返回值，当用户点击确认时，返回 true，点击取消时，返回 false。我们根据返回值来决定是否执行后续操作。修改代码如下：再次运行，可以查看返回值 true 或者 false
var flag = confirm("您确认删除该记录吗?");
alert(flag);
setInterval (fn, 毫秒值)：定时器，用于周期性的执行某个功能，并且是循环执行。该函数需要传递 2 个参数：
fn: 函数，需要周期性执行的功能代码
毫秒值：间隔时间
注释掉之前的代码，添加代码如下：
// 定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
刷新页面，浏览器每个一段时间都会在控制台输出，结果如下：
setTimeout (fn, 毫秒值) ：定时器，只会在一段时间后执行一次功能。参数和上述 setInterval 一致
注释掉之前的代码，添加代码如下：
// 定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000);
浏览器打开，3s 后弹框，关闭弹框，发现再也不会弹框了。

Location 对象

location 是指代浏览器的地址栏对象，对于这个对象，我们常用的是 href 属性，用于获取或者设置浏览器的地址信息，添加如下代码：

	// 获取浏览器地址栏信息
	alert(location.href);
	// 设置浏览器地址栏信息
	location.href = "https://www.itcast.cn";

浏览器效果如下：首先弹框展示浏览器地址栏信息，

然后点击确定后，因为我们设置了地址栏信息，所以浏览器跳转到传智首页

完整代码如下：

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

DOM 对象

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

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

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

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

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

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

# 1.5.3.2 获取 DOM 对象

我们知道 DOM 的作用是通过修改 HTML 元素的内容和样式等来实现页面的各种动态效果，但是我们要操作 DOM 对象的前提是先获取元素对象，然后才能操作。所以学习 DOM, 主要的核心就是学习如下 2 点：

如何获取 DOM 中的元素对象（Element 对象，也就是标签）
如何操作 Element 对象的属性，也就是标签的属性。

接下来我们先来学习如何获取 DOM 中的元素对象。

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取的。document 对象提供的用于获取 Element 元素对象的 api 如下表所示：

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

接下来我们通过 VS Code 中创建名为 07. JS - 对象 - DOM - 获取元素.html 的文件来演示上述 api，首先在准备如下页面代码：

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

	</html>

document.getElementById ()：根据标签的 id 属性获取标签对象，id 是唯一的，所以获取到是单个标签对象。
添加如下代码：
<script>
//1. 获取 Element 元素
//1.1 获取元素 - 根据 ID 获取
var img = document.getElementById('h1');
alert(img);
</script>
浏览器打开，效果如图所示：从弹出的结果能够看出，这是一个图片标签对象
document.getElementsByTagName () : 根据标签的名字获取标签对象，同名的标签有很多，所以返回值是数组。
添加如下代码:
//1.2 获取元素 - 根据标签获取 - div
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
浏览器输出 2 次如下所示的弹框
document.getElementsByName () ：根据标签的 name 的属性值获取标签对象，name 属性值可以重复，所以返回值是一个数组。
添加如下代码：
//1.3 获取元素 - 根据 name 属性获取
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i++) {
alert(ins[i]);
}
浏览器会有 3 次如下图所示的弹框：
document.getElementsByClassName () : 根据标签的 class 属性值获取标签对象，class 属性值也可以重复，返回值是数组。
添加如下图所示的代码：
//1.4 获取元素 - 根据 class 属性获取
var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
浏览器会弹框 2 次，都是 div 标签对象
操作属性
那么获取到标签了，我们如何操作标签的属性呢？通过查询文档资料，如下图所示：
得出我们可以通过 div 标签对象的 innerHTML 属性来修改标签的内容。此时我们想把页面中的传智教育替换成传智教育 666，所以要获取 2 个 div 中的第一个，所以可以通过下标 0 获取数组中的第一个 div，注释之前的代码，编写如下代码：
var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
div1.innerHTML = "传智教育666";
浏览器刷新页面，展示效果如下图所示：
发现页面内容变成了传智教育 666

完整代码如下：

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

	//1.2 获取元素 - 根据标签获取 - div
	// var divs = document.getElementsByTagName('div');
	// for (let i = 0; i < divs.length; i++) {
	// alert(divs[i]);
	// }


	//1.3 获取元素 - 根据 name 属性获取
	// var ins = document.getElementsByName('hobby');
	// for (let i = 0; i < ins.length; i++) {
	// alert(ins[i]);
	// }


	//1.4 获取元素 - 根据 class 属性获取
	// var divs = document.getElementsByClassName('cls');
	// for (let i = 0; i < divs.length; i++) {
	// alert(divs[i]);
	// }



	//2. 查询参考手册，属性、方法
	var divs = document.getElementsByClassName('cls');
	var div1 = divs[0];

	div1.innerHTML = "传智教育666";

	</script>
	</html>

案例
需求如下 3 个：
- 点亮灯泡
- 将所有的 div 标签的标签体内容后面加上：very good
- 使所有的复选框呈现被选中的状态

	<!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. 点亮灯泡 : src 属性值
	var img = document.getElementById('h1');
	img.src = "img/on.gif";


	//2. 将所有 div 标签的内容后面加上: very good (红色字体) -- <font color='red'></font>
	var divs = document.getElementsByTagName('div');
	for (let i = 0; i < divs.length; i++) {
	const div = divs[i];
	div.innerHTML += "<font color='red'>very good</font>";
	}


	////3. 使所有的复选框呈现选中状态
	var ins = document.getElementsByName('hobby');
	for (let i = 0; i < ins.length; i++) {
	const check = ins[i];
	check.checked = true;// 选中
	}

	</script>
	</html>

# 事件

事件绑定

JavaScript 对于事件的绑定提供了 2 种方式：

方式 1：通过 html 标签中的事件属性进行绑定
例如一个按钮，我们对于按钮可以绑定单机事件，可以借助标签的 onclick 属性，属性值指向一个函数。
在 VS Code 中创建名为 09. JS - 事件 - 事件绑定.html，添加如下代码：
<input type="button" id="btn1" value="事件绑定1" onclick="on()">
很明显没有 on 函数，所以我们需要创建该函数，代码如下：
<script>
function on(){
alert("按钮1被点击了...");
}
</script>

方式 2：通过 DOM 中 Element 元素的事件属性进行绑定

依据我们学习过得 DOM 的知识点，我们知道 html 中的标签被加载成 element 对象，所以我们也可以通过 element 对象的属性来操作标签的属性。此时我们再次添加一个按钮，代码如下：

<input type="button" id="btn2" value="事件绑定2">

我们可以先通过 id 属性获取按钮对象，然后操作对象的 onclick 属性来绑定事件，代码如下：

	document.getElementById('btn2').onclick = function(){
	alert("按钮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>
	<input type="button" id="btn1" value="事件绑定1" onclick="on()">
	<input type="button" id="btn2" value="事件绑定2">
	</body>

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

	document.getElementById('btn2').onclick = function(){
	alert("按钮2被点击了...");
	}

	</script>
	</html>

常见事件

上面案例中使用到了 onclick 事件属性，那都有哪些事件属性供我们使用呢？下面就给大家列举一些比较常用的事件属性

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

案例
接下来我们通过案例来加强所学 js 知识点的掌握。
需求如下 3 个：
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. 点击 "点亮" 按钮，点亮灯泡；点击 "熄灭" 按钮，熄灭灯泡；-- onclick
	function on(){
	//a. 获取 img 元素对象
	var img = document.getElementById("light");

	//b. 设置 src 属性
	img.src = "img/on.gif";
	}

	function off(){
	//a. 获取 img 元素对象
	var img = document.getElementById("light");

	//b. 设置 src 属性
	img.src = "img/off.gif";
	}

	//2. 输入框聚焦后，展示小写；输入框离焦后，展示大写；-- onfocus , onblur
	function lower(){// 小写
	//a. 获取输入框元素对象
	var input = document.getElementById("name");

	//b. 将值转为小写
	input.value = input.value.toLowerCase();
	}

	function upper(){// 大写
	//a. 获取输入框元素对象
	var input = document.getElementById("name");

	//b. 将值转为大写
	input.value = input.value.toUpperCase();
	}

	//3. 点击 "全选" 按钮使所有的复选框呈现选中状态；点击 "反选" 按钮使所有的复选框呈现取消勾选的状态；-- onclick
	function checkAll(){
	//a. 获取所有复选框元素对象
	var hobbys = document.getElementsByName("hobby");

	//b. 设置选中状态
	for (let i = 0; i < hobbys.length; i++) {
	const element = hobbys[i];
	element.checked = true;
	}
	}

	function reverse(){
	//a. 获取所有复选框元素对象
	var hobbys = document.getElementsByName("hobby");

	//b. 设置未选中状态
	for (let i = 0; i < hobbys.length; i++) {
	const element = hobbys[i];
	element.checked = false;
	}
	}

	</script>
	</html>

# Vue

# Vue 指令

在上述的快速入门中，我们发现了 html 中输入了一个没有学过的属性 v-model ，这个就是 vue 的指令。

** 指令：**HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…

在 vue 中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习 vue 的常用指令，如下表所示：

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

# v-bind 和 v-model

我们首先来学习 v-bind 指令和 v-model 指令。

指令	作用
v-bind	为 HTML 标签绑定属性值，如设置 href , css 样式等
v-model	在表单元素上创建双向数据绑定

v-bind: 为 HTML 标签绑定属性值，如设置 href , css 样式等。当 vue 对象中的数据模型发生变化时，标签的属性值会随之发生变化。

首先我们在 VS Code 中创建名为 13. Vue - 指令 - v-bind 和 v-model.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>Vue-指令-v-bind</title>
	<script src="js/vue.js"></script>
	</head>
	<body>
	<div id="app">

	<a >链接1</a>
	<a >链接2</a>

	<input type="text" >

	</div>
	</body>
	<script>
	// 定义 Vue 对象
	new Vue({
	el: "#app", //vue 接管区域
	data:{
	url: "https://www.baidu.com"
	}
	})
	</script>
	</html>

在上述的代码中，我们需要给 <a> 标签的 href 属性赋值，并且值应该来自于 vue 对象的数据模型中的 url 变量。所以编写如下代码：

<a v-bind:href="url">链接1</a>

在上述的代码中，v-bind 指令是可以省略的，但是：不能省略，所以第二个超链接的代码编写如下：

<a :href="url">链接2</a>

注意：html 属性前面有：表示采用的 vue 的属性绑定！
v-model：在表单元素上创建双向数据绑定。什么是双向？
- vue 对象的 data 属性中的数据变化，视图展示会一起变化
- 视图数据发生变化，vue 对象的 data 属性中的数据也会随着变化。
data 属性中数据变化，我们知道可以通过赋值来改变，但是视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。编写如下代码：
<input type="text" v-model="url">
我们只是改变了表单数据，那么我们之前超链接的绑定的数据值也发生了变化，为什么？
就是因为我们双向绑定，在视图发生变化时，同时 vue 的 data 中的数据模型也会随着变化。那么这个在企业开发的应用场景是什么？
双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

	<!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-bind</title>
	<script src="js/vue.js"></script>
	</head>
	<body>
	<div id="app">

	<a v-bind:href="url">链接1</a>
	<a :href="url">链接2</a>

	<input type="text" v-model="url">

	</div>
	</body>
	<script>
	// 定义 Vue 对象
	new Vue({
	el: "#app", //vue 接管区域
	data:{
	url: "https://www.baidu.com"
	}
	})
	</script>
	</html>

# v-on

v-on: 用来给 html 标签绑定事件的。需要注意的是如下 2 点：

v-on 语法给标签的事件绑定的函数，必须是 vue 对象种声明的函数
v-on 语法绑定事件时，事件名相比较 js 中的事件名，没有 on
例如：在 js 中，事件绑定 demo 函数
<input onclick="demo()">
vue 中，事件绑定 demo 函数
<input v-on:click="demo()">

	<!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-on</title>
	<script src="js/vue.js"></script>
	</head>
	<body>
	<div id="app">

	<input type="button" value="点我一下" v-on:click="handle()">

	<input type="button" value="点我一下" @click="handle()">

	</div>
	</body>
	<script>
	// 定义 Vue 对象
	new Vue({
	el: "#app", //vue 接管区域
	data:{

	},
	methods: {
	handle: function(){
	alert("你点我了一下...");
	}
	}
	})
	</script>
	</html>

# v-if 和 v-show

指令	描述
v-if	条件性的渲染某元素，判定为 true 时渲染，否则不渲染
v-if-else
v-else
v-show	根据条件展示某元素，区别在于切换的是 display 属性的值

我们直接通过代码来演示效果。在 VS Code 中创建名为 15. Vue - 指令 - v-if 和 v-show.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>Vue-指令-v-if与v-show</title>
	<script src="js/vue.js"></script>
	</head>
	<body>
	<div id="app">

	年龄<input type="text" v-model="age">经判定,为:
	<span>年轻人(35及以下)</span>
	<span>中年人(35-60)</span>
	<span>老年人(60及以上)</span>

	<br><br>
	</div>
	</body>
	<script>
	// 定义 Vue 对象
	new Vue({
	el: "#app", //vue 接管区域
	data:{
	age: 20
	},
	methods: {

	}
	})
	</script>
	</html>

其中采用了双向绑定到 age 属性，意味着我们可以通过表单输入框来改变 age 的值。

需求是当我们改变年龄时，需要动态判断年龄的值，呈现对应的年龄的文字描述。年轻人，我们需要使用条件判断 age<=35 , 中年人我们需要使用条件判断 age>35 && age<60 , 其他情况是老年人。所以通过 v-if 指令编写如下代码：

	年龄<input type="text" v-model="age">经判定,为:
	<span v-if="age <= 35">年轻人(35及以下)</span>
	<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
	<span v-else>老年人(60及以上)</span>

v-show 和 v-if 的作用效果是一样的，只是原理不一样。复制上述 html 代码，修改 v-if 指令为 v-show 指令，代码如下：

	年龄<input type="text" v-model="age">经判定,为:
	<span v-show="age <= 35">年轻人(35及以下)</span>
	<span v-show="age > 35 && age < 60">中年人(35-60)</span>
	<span v-show="age >= 60">老年人(60及以上)</span>

可以发现，浏览器呈现的效果是一样的，但是浏览器中 html 源码不一样。v-if 指令，不满足条件的标签代码直接没了，而 v-show 指令中，不满足条件的代码依然存在，只是添加了 css 样式来控制标签不去显示。

# v-for

v-for: 从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

	<标签 v-for="变量名 in 集合模型数据">

	</标签>

需要注意的是：需要循环那个标签，v-for 指令就写在那个标签上。

有时我们遍历时需要使用索引，那么 v-for 指令遍历的语法格式如下：

	<标签 v-for="(变量名,索引变量) in 集合模型数据">
	<!-- 索引变量是从 0 开始，所以要表示序号的话，需要手动的加 1-->
	NaN
	</标签>

2 种遍历语法，来遍历数组，展示数据，代码如下：

	<div id="app">
	<div v-for="addr in addrs"></div>
	<hr>
	<div v-for="(addr,index) in addrs">NaN : </div>
	</div>

# 生命周期

vue 的生命周期：指的是 vue 对象从创建到销毁的过程。vue 的生命周期包含 8 个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

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

其中我们需要重点关注的是 **mounted,** 其他的我们了解即可。
mounted：挂载完成，Vue 初始化成功，HTML 页面渲染成功。以后我们一般用于页面初始化自动的 ajax 请求后台数据

	<!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 声明周期的钩子函数，与 methods 同级
	mounted () {
	alert("vue挂载完成,发送请求到服务端")
	}
	})
	</script>
	</html>

# Ajax

Ajax 介绍
- # Ajax 概述
我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的 2 个程序，那么我们前端应该如何从后台获取数据呢？因为是 2 个程序，所以必须涉及到 2 个程序的交互，所以这就需要用到我们接下来学习的 Ajax 技术。
Ajax: 全称 Asynchronous JavaScript And XML，异步的 JavaScript 和 XML。其作用有如下 2 点：
- 与服务器进行数据交换：通过 Ajax 可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。
- # Ajax 作用
我们详细的解释一下 Ajax 技术的 2 个作用
- 与服务器进行数据交互
  如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过 Ajax 技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的 vue 技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比 JavaSE 中的网络编程技术来理解。
- 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。
  如下图所示，当我们再百度搜索 java 时，下面的联想数据是通过 Ajax 请求从后台服务器得到的，在整个过程中，我们的 Ajax 请求不会导致整个百度页面的重新加载，并且只针对搜索栏这局部模块的数据进行了数据的更新，不会对整个页面的其他地方进行数据的更新，这样就大大提升了页面的加载速度，用户体验高
- 同步异步
针对于上述 Ajax 的局部刷新功能是因为 Ajax 请求是异步的，与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。
- 同步请求发送过程如下图所示：
  浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。
- 异步请求发送过程如下图所示：
  浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。
# 原生 Ajax

对于 Ajax 技术有了充分的认知了，我们接下来通过代码来演示 Ajax 的效果。此处我们先采用原生的 Ajax 代码来演示。因为 Ajax 请求是基于客户端发送请求，服务器响应数据的技术。所以为了完成快速入门案例，我们需要提供服服务器端和编写客户端。

服务器端
因为我们暂时还没学过服务器端的代码，所以此处已经直接提供好了服务器端的请求地址，我们前端直接通过 Ajax 请求访问该地址即可。后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list // 现在打不开
上述地址我们也可以直接通过浏览器来访问，访问结果如图所示：只截取部分数据

客户端

客户端的 Ajax 请求代码如下有如下 4 步，接下来我们跟着步骤一起操作一下。

第一步：首先我们再 VS Code 中创建 AJAX 的文件夹，并且创建名为 01. Ajax - 原生方式.html 的文件，提供如下代码，主要是按钮绑定单击事件，我们希望点击按钮，来发送 ajax 请求

	<!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(){

	}
	</script>
	</html>

第二步：创建 XMLHttpRequest 对象，用于和服务器交换数据，也是原生 Ajax 请求的核心对象，提供了各种方法。代码如下：

	//1. 创建 XMLHttpRequest
	var xmlHttpRequest = new XMLHttpRequest();

第三步：调用对象的 open () 方法设置请求的参数信息，例如请求地址，请求方式。然后调用 send () 方法向服务器发送请求，代码如下：

	//2. 发送异步请求
	xmlHttpRequest.open('GET','http://yapi.smart-xwork.cn/mock/169327/emp/list');
	xmlHttpRequest.send();// 发送请求

第四步：我们通过绑定事件的方式，来获取服务器响应的数据。

	//3. 获取服务响应数据
	xmlHttpRequest.onreadystatechange = function(){
	// 此处判断 4 表示浏览器已经完全接受到 Ajax 请求得到的响应， 200 表示这是一个正确的 Http 请求，没有错误
	if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
	document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
	}
	}

最后我们通过浏览器打开页面，请求点击按钮，发送 Ajax 请求，最终显示结果如下图所示：

1669106705778

并且通过浏览器的 f12 抓包，我们点击网络中的 XHR 请求，发现可以抓包到我们发送的 Ajax 请求。XHR 代表的就是异步请求

# Axios

上述原生的 Ajax 请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送 Ajax 请求的技术 Axios 。Axios 是对原生的 AJAX 进行封装，简化书写。Axios 官网是： https://www.axios-http.cn

# Axios 的基本使用

Axios 的使用比较简单，主要分为 2 步：

引入 Axios 文件

<script src="js/axios-0.18.0.js"></script>

使用 Axios 发送请求，并获取响应结果，官方提供的 api 很多，此处给出 2 种，如下
- 发送 get 请求
  axios({
  method:"get",
  url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
  }).then(function (resp){
  alert(resp.data);
  })
- 发送 post 请求
  axios({
  method:"post",
  url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
  data:"username=zhangsan"
  }).then(function (resp){
  alert(resp.data);
  });
axios () 是用来发送异步请求的，小括号中使用 js 的 JSON 对象传递请求相关的参数：
- method 属性：用来设置请求方式的。取值为 get 或者 post。
- url 属性：用来书写请求的资源路径。如果是 get 请求，需要将请求参数拼接到路径的后面，格式为： url? 参数名 = 参数值 & 参数名 2 = 参数值 2。
- data 属性：作为请求体被发送的数据。也就是说如果是 post 请求的话，数据需要作为 data 属性的值。
then () 需要传递一个匿名函数。我们将 then () 中传递的匿名函数称为 回调函数，意思是该匿名函数在发送请求时不会被调用，而是在成功响应后调用的函数。而该回调函数中的 resp 参数是对响应的数据进行封装的对象，通过 resp.data 可以获取到响应的数据。
# Axios 快速入门
后端实现
查询所有员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
根据员工 id 删除员工信息服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/deleteById

前端实现

首先在 VS Code 中创建 js 文件夹，与 html 同级，然后将资料 /axios-0.18.0.js 文件拷贝到 js 目录下，然后创建名 Ajax-Axios.html 的文件然后在 html 中引入 axios 所依赖的 js 文件，并且提供 2 个按钮，绑定单击事件，分别用于点击时发送 ajax 请求，完整代码如下：

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

	function post(){
	// 通过 axios 发送异步请求 - post
	}
	</script>
	</html>

然后分别使用 Axios 的方法，完整 get 请求和 post 请求的发送

get 请求代码如下：

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

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);
	})

浏览器打开，f12 抓包，然后分别点击 2 个按钮，查看控制台效果如下：

1669109382408

完整代码如下：

	<!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);
	})


	}

	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);
	})

	}
	</script>
	</html>

# 请求方法的别名

Axios 还针对不同的请求，提供了别名方式的 api, 具体如下：

| 方法 | 描述 |
| ---------------------------------- | -------------- |
| axios.get (url [, config]) | 发送 get 请求 |
| axios.delete (url [, config]) | 发送 delete 请求 |
| axios.post (url [, data [, config]]) | 发送 post 请求 |
| axios.put (url [, data [, config]]) | 发送 put 请求 |

我们目前只关注 get 和 post 请求，所以在上述的入门案例中，我们可以将 get 请求代码改写成如下：

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

post 请求改写成如下：

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

# 案例
需求：基于 Vue 及 Axios 完成数据的动态加载展示，
如下图所示
其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
分析：
前端首先是一张表格，我们缺少数据，而提供数据的地址已经有了，所以意味这我们需要使用 Ajax 请求获取后台的数据。但是 Ajax 请求什么时候发送呢？页面的数据应该是页面加载完成，自动发送请求，展示数据，所以我们需要借助 vue 的 mounted 钩子函数。那么拿到数据了，我们该怎么将数据显示表格中呢？这里就得借助 v-for 指令来遍历数据，展示数据。
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及 vue.js 和 axios.js 文件的引入
2. 我们需要在 vue 的 mounted 钩子函数中发送 ajax 请求，获取数据
3. 拿到数据，数据需要绑定给 vue 的 data 属性
4. 在 <tr> 标签上通过 v-for 指令遍历数据，展示数据

代码实现：

首先创建文件，提前准备基础代码，包括表格以及 vue.js 和 axios.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>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" >
	<td>1</td>
	<td>Tom</td>
	<td>
	<img src="" width="70px" height="50px">
	</td>
	<td>
	<span>男</span>
	<!-- <span > 女 & lt;/span>-->
	</td>
	<td>班主任</td>
	<td>2009-08-09</td>
	<td>2009-08-09 12:00:00</td>
	</tr>
	</table>
	</div>
	</body>
	<script>
	new Vue({
	el: "#app",
	data: {

	}
	});
	</script>
	</html>

在 vue 的 mounted 钩子函数，编写 Ajax 请求，请求数据，代码如下：

	mounted () {
	// 发送异步请求，加载数据
	axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {

	})
	}

ajax 请求的数据我们应该绑定给 vue 的 data 属性，之后才能进行数据绑定到视图；并且浏览器打开后台地址，数据返回格式如下图所示：
因为服务器响应的 json 中的 data 属性才是我们需要展示的信息，所以我们应该将员工列表信息赋值给 vue 的 data 属性，代码如下：
// 发送异步请求，加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
this.emps = result.data.data;
})
其中，data 中生命 emps 变量，代码如下：
data: {
emps:[]
},

在 <tr> 标签上通过 v-for 指令遍历数据，展示数据，其中需要注意的是图片的值，需要使用 vue 的属性绑定，男女的展示需要使用条件判断，其代码如下：

	<tr align="center" v-for="(emp,index) in emps">
	<td>NaN</td>
	<td></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></td>
	<td></td>
	<td></td>
	</tr>

完整代码如下：

	<!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>NaN</td>
	<td></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></td>
	<td></td>
	<td></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 => {
	console.log(result.data);
	this.emps = result.data.data;
	})
	}
	});
	</script>
	</html>

# 前端工程化

前端工程化方式的开发，主要包括如下 4 个特点
- 模块化：将 js 和 css 等，做成一个个可复用模块
- 组件化：我们将 UI 组件，css 样式，js 行为封装成一个个的组件，便于管理
- 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
- 自动化：项目的构建，测试，部署全部都是自动完成
# 环境准备
我们的前端工程化是通过 vue 官方提供的脚手架 Vue-cli 来完成的，用于快速的生成一个 Vue 的项目模板。Vue-cli 主要提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
我们需要运行 Vue-cli，需要依赖 NodeJS，NodeJS 是前端工程化依赖的环境。所以我们需要先安装 NodeJS，然后才能安装 Vue-cli
- NodeJS 安装和 Vue-cli 安装
# Vue 项目简介
环境准备好了，接下来我们需要通过 Vue-cli 创建一个 vue 项目，然后再学习一下 vue 项目的目录结构。Vue-cli 提供了如下 2 种方式创建 vue 项目:
- 命令行：直接通过命令行方式创建 vue 项目
```
vue create vue-project01
```
- 图形化界面：通过命令先进入到图形化界面，然后再进行 vue 工程的创建
```
vue ui
```
- # vue 项目目录结构介绍
  我们通过 VS Code 打开之前创建的 vue 文件夹，打开之后，呈现如下图所示页面：
  vue 项目的标准目录结构以及目录对应的解释如下图所示:
  其中我们平时开发代码就是在 src 目录下
- # 运行 vue 项目
  那么 vue 项目开发好了，我们应该怎么运行 vue 项目呢？主要提供了 2 种方式
  - 第一种方式：通过 VS Code 提供的图形化界面，如下图所示：（注意：NPM 脚本窗口默认不显示，可以参考本节的最后调试出来）
    点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的 8080 端口，我们直接通过浏览器打开地址
    最终浏览器打开后，呈现如下界面，表示项目运行成功
    其实此时访问的是 src/App.vue 这个根组件，此时我们打开这个组件，修改代码：添加内容 Vue
    只要我们保存更新的代码，我们直接打开浏览器，不需要做任何刷新，发现页面呈现内容发生了变化，如下图所示：
    这就是我们 vue 项目的热更新功能
    对于 8080 端口，经常被占用，所以我们可以去修改默认的 8080 端口。我们修改 vue.config.js 文件的内容，添加如下代码：
    devServer:{
    port:7000
    }
    如下图所示，然后我们关闭服务器，并且重新启动，
  重新启动如下图所示：
  
  端口更改成功，可以通过浏览器访问 7000 端口来访问我们之前的项目
  - 第二种方式：命令行方式
    直接基于 cmd 命令窗口，在 vue 目录下，执行输入命令 npm run serve 即可，如下图所示：
# Vue 项目开发流程
那么我们访问的首页是 index.html，但是我们找到 public/index.html 文件，打开之后发现，里面没有什么代码，但是能够呈现内容丰富的首页：如下图所示：
我们自习观察发现，index.html 的代码很简洁，但是浏览器所呈现的 index.html 内容却很丰富，代码和内容不匹配，所以 vue 是如何做到的呢？接下来我们学习一下 vue 项目的开发流程。
对于 vue 项目，index.html 文件默认是引入了入口函数 main.js 文件，我们找到 src/main.js 文件，其代码如下：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
上述代码中，包括如下几个关键点：
- import: 导入指定文件，并且重新起名。例如上述代码 import App from './App.vue' 导入当前目录下得 App.vue 并且起名为 App
- new Vue (): 创建 vue 对象
- $mount ('#app'); 将 vue 对象创建的 dom 对象挂在到 id=app 的这个标签区域中，作用和之前学习的 vue 对象的 le 属性一致。
- router: 路由，详细在后面的小节讲解
- render: 主要使用视图的渲染的。
来到 public/index.html 中，我们删除 div 的 id=app 属性，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们 main.js 中通过代码挂在到 index.html 的 id=app 的标签区域的。
此时我们知道了 vue 创建的 dom 对象挂在到 id=app 的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？这就涉及到 render 中的 App 了，如下图所示：
那么这个 App 对象怎么回事呢，我们打开 App.vue, 注意的是.vue 结尾的都是 vue 组件。而 vue 的组件文件包含 3 个部分：
- template: 模板部分，主要是 HTML 代码，用来展示页面主体结构的
- script: js 代码区域，主要是通过 js 代码来控制模板的数据来源和行为的
- style: css 样式部分，主要通过 css 样式控制模板的页面效果得
如下图所示就是一个 vue 组件的小案例：
此时我们可以打开 App.vue，观察 App.vue 的代码，其中可以发现，App.vue 组件的 template 部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：
接下来我们可以简化模板部分内容，添加 script 部分的数据模型，删除 css 样式，完整代码如下：
<template>
<div id="app">
</div>
</template>
<script>
export default {
data(){
return {
"message":"hello world"
}
}
}
</script>
<style>
</style>
保存直接，回到浏览器，我们发现首页展示效果发生了变化，如下图所示：

# Element

Element 介绍
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如超链接、按钮、图片、表格等等。
对于 ElementUI，我们作为一个后台开发者，只需要学会如何从 ElementUI 的官网拷贝组件到我们自己的页面中，并且做一些修改即可。其官网地址：https://element.eleme.cn/#/zh-CN;
安装 ElementUI 的组件库，打开 VS Code，停止之前的项目，然后在命令行输入如下命令：
```
npm install element-ui@2.15.3 
```
然后我们需要在 main.js 这个入口 js 文件中引入 ElementUI 的组件库，其代码如下：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Element 组件
- Table 表格
- Pagination 分页
- Dialog 对话框
- Form 表单

# vue 路由

路由介绍

将资代码 /vue-project (路由)/vue-project/src/views/tlias/DeptView.vue 拷贝到我们当前 EmpView.vue 同级，其结构如下：

1669385311576

此时我们希望基于 4.4 案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息，效果如下图所示：

1669385425617

1669385446343

这就需要借助我们的 vue 的路由功能了。

前端路由：URL 中的 hash (# 号之后的内容）与组件之间的对应关系，如下图所示：

1669385782145

当我们点击左侧导航栏时，浏览器的地址栏会发生变化，路由自动更新显示与 url 所对应的 vue 组件。

而我们 vue 官方提供了路由插件 Vue Router, 其主要组成如下：

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

其工作原理如下图所示：

1669386261570

首先 VueRouter 根据我们配置的 url 的 hash 片段和路由的组件关系去维护一张路由表；

然后我们页面提供一个 <router-link> 组件，用户点击，发出路由请求；

接着我们的 VueRouter 根据路由请求，在路由表中找到对应的 vue 组件；

最后 VueRouter 会切换 <router-view> 中的组件，从而进行视图的更新

# Nginx 打包部署

# 前端工程打包
接下来我们先来对前端工程进行打包
我们直接通过 VS Code 的 NPM 脚本中提供的 build 按钮来完整，如下图所示，直接点击即可：
然后会在工程目录下生成一个 dist 目录，用于存放需要发布的前端资源，如下图所示：
- 部署前端工程
  - nginx 介绍
nginx: Nginx 是一款轻量级的 Web 服务器 / 反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。
niginx 在 windows 中的安装是比较方便的，直接解压即可。所以我们直接将资料中的 nginx-1.22.0.zip 压缩文件拷贝到无中文的目录下，直接解压即可，如下图所示就是 nginx 的解压目录以及目录结构说明：
很明显，我们如果要发布，直接将资源放入到 html 目录中。
部署
将我们之前打包的前端工程 dist 目录下得内容拷贝到 nginx 的 html 目录下，如下图所示：
然后我们通过双击 nginx 下得 nginx.exe 文件来启动 nginx，如下图所示：
nginx 服务器的端口号是 80，所以启动成功之后，我们浏览器直接访问 http://localhost:80 即可，其中 80 端口可以省略，其浏览器展示效果如图所示：
到此，我们的前端工程发布成功。
PS: 如果 80 端口被占用，我们需要通过 conf/nginx.conf 配置文件来修改端口号。如下图所示：

JavaWeb

	选择器名 {
	css样式名：css样式值;
	css样式名：css样式值;
	}

	var flag = confirm("您确认删除该记录吗?");
	alert(flag);

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

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

	axios({
	method:"get",
	url:"http://localhost:8080/ajax-demo1/aJAXDemo1?username=zhangsan"
	}).then(function (resp){
	alert(resp.data);
	})

	axios({
	method:"post",
	url:"http://localhost:8080/ajax-demo1/aJAXDemo1",
	data:"username=zhangsan"
	}).then(function (resp){
	alert(resp.data);
	});

	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'

	Vue.config.productionTip = false

	new Vue({
	router,
	render: h => h(App)
	}).$mount('#app')

	<template>
	<div id="app">

	</div>
	</template>

	<script>
	export default {
	data(){
	return {
	"message":"hello world"
	}
	}
	}
	</script>
	<style>

	</style>

	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';

	Vue.use(ElementUI);

	div{
	color: red;
	}

	#did {
	color: blue;
	}

	.cls{
	color: green;
	}

	{
	"key":value,
	"key":value,
	"key":value
	}

# HTML—CSS

# 标题实现

# 标题排版

# 颜色表示

# 标题样式

# CSS 选择器

# 超链接

# 正文实现

# 布局标签

# 表格标签

# 表单标签

# 演示

# 注意事项

# 表单项

# 介绍

# 演示

# JavaScript

# 基础语法

# 函数

# 对象

# 特点

# 1.5.3.2 获取 DOM 对象

# 事件

# Vue

# Vue 指令

# v-bind 和 v-model

# v-on

# v-if 和 v-show

# v-for

# 生命周期

# Ajax

# Ajax 概述

# Ajax 作用

# 原生 Ajax

# Axios

# Axios 的基本使用

# Axios 快速入门

# 请求方法的别名

# 案例

# 前端工程化

# 环境准备

# Vue 项目简介

# vue 项目目录结构介绍

# 运行 vue 项目

# Vue 项目开发流程

# Element

# vue 路由

# Nginx 打包部署

# 前端工程打包

JavaWeb后端(2)

MySQL基础