三剑客
万维网联盟（ World Wide Web Consortium ），创建于1994年10月，主要工作是对 web 进行标准化。
该组织定义了网页的开发需要如下3门技术：
- HTML:定义网页的结构
- CSS: 定义网页的表现，样式
- JavaScript: 定义网页的行为
一、HTML
★ HTML（HyperText Markup Language）：超文本标记语言。
★ 超文本就是超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。
★ 由标签构成的语言，HTML中的标签都是预定义好的。
★ 语法规则:
标签分为两种：双标签和单标签 <p></p> </br>
注释：Ctrl+/ （快捷键） <!--注释内容-->
1、快速入门
第一步:创建一个名为HTML的文件夹
第二步：创建一个文本文件，然后修改文件名为hello.html
第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码:
★ html有固定的基本结构:
<!--************************************************* -->
<html><!--是根标签-->
<head><!--头标签-->
<title>网页的标题 </title><!--定义网页的标题-->
</head>
<body>
<!--显示在浏览器的内容区域-->
</body>
</html>
<!--************************************************* -->
html是超文本标记语言，还能修饰超文本，所以我们可以通过;img;来引入图片，其中该标签的src属性，用来指定图片的地址，代码如下：
<html>
<head>
<title>HTML 快速入门</title>
</head>
<body>
<h1>Hello HTML</h1>
<img src='1.jpg'></img>
</body>
</html>
2、基础语法
1.标签不区分大小写
2.语法松散，大部分标签可以不要结束标签，部分结构标签也不是必须的
3.标签属性单引号双引号皆可
4.文件后缀可以是.html也可以是.htm
<!--**********************************************-->
★ 基础标签:
<h1> ~ <h6>定义标题，h1最大，h6最小
<font> 定义文本的字体，字体大小，字体颜色
<b> 定义粗体文本
<i> 定义斜体文本
<u> 定义文本下划线
HTML
<i>HTML</i>
<b>HTML</b>
<u>HTML</u>
<hr>
<!--***************************************************-->
<center> 定义文本居中
<p> 定义段落
<br> 定义折行
<hr> 定义水平线
<img 图片标签 ，src=“设置图片路径” ，alt=“图片找不到显示的默认的信息”`
width =“设置宽度” heigh=“设置高度”
src 的三种路径的书写方式 ：
1、绝对磁盘：D:/img/A.png
2、绝对网络路径: https://baidu.com
3、相对路径: ../img/a.png
<audio src="" controlls autoplay loop>音频标签</audio>
contrllos显示播放按钮的控件
autoplay
loop循环播放
<!--****************************************************************-->
<!-- 标识当前文档是HTML5 -->
<!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>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--标题标签从h1到h6，也可以自己写h0或h7这种，但是不会生效-->
<h0>h0</h0>
<h7>h7</h7>
</body>
</html>
<!--字体标签-->
<font> 字体标签，修饰文本的颜色、大小、样式
color ：设置文本的颜色
size ：设置文本的大小，取值为1-7，其中1最小，7最大
face ：用来设置字体。如 "楷体"、"宋体"等
★ color属性取值有3种，分别是：
● 英文单词：颜色的单词。
● rgb(值1，值2，值3)三原色表示法，取值范围为0-255之间
● #值1值2值3 还是三原色表示法，上述的简写方式，取值是16进制法，所以在00-FF之间
<!--********************************************************-->
<!--字体标签，主要涉及颜色、大小、样式-->
<font color="green">我绿了</font>
<font size="24px">我是24px的字体</font>
<font size="1">我是1号字体</font>
<font color="#FF00FF">我的颜色是#FF00FF</font>
<font face="华文琥珀">我是华文琥珀</font>
<!--******************************************************-->
<center>HTML</center>居中标签
<hr>
段落标签:
<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>
文本标签全部代码如下:
<!-- 标识当前文档是HTML5 -->
<!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>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<!--
HTML颜色描述:
1. 英文单词: red, green, blue
2. RGB(值1, 值2, 值3): 红色, 绿色, 蓝色 ---- 0-255 (不推荐)
3. #值1值2值3 : 红色, 绿色, 蓝色 ----------- 00-FF (十六进制)
-->
<font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>
<hr>
<center>HTML</center>
<hr>
HTML <br>
<i>HTML</i> <br>
<b>HTML</b> <br>
<u>HTML</u> <br>
<hr>
已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。<br>
而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。
<hr>
<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>
</body>
</html>
3、图片音频视频标签
<img>在页面上引入图片的
height:用来定义图片的高度
width:用来定义图片的宽度
src:规定显示图像的 url（统一资源定位符）
<audio>定义音频(支持MP3、MAV、OGG)
src:规定音频的 url
controls:显示播放控件
<video>定义视频(支持MP4、WebM、OGG)
src:规定视频的 url
controls:显示播放控件
第一步：首先在html目录下分别创建用于存放视频，音频，图片的video,audio,img文件夹，然后讲资料提供的视频，音频，图片分别复制到对应的目录下。
第二步：创建名为02. HTML-图片音频视频标签.html的文件。
然后把编写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>HTML-图片音视频标签</title>
</head>
<body>
<!--
路径:
1. 绝对路径: 绝对磁盘路径 , 绝对网络路径
2. 相对路径:
当前路径: . ./img/01.jpg == img/01.jpg
上级目录: ..
尺寸单位:
1. 像素 px
2. 百分比 %
-->
<!-- <img src="C:\Users\Administrator\Pictures\Camera Roll\1.jpg" > -->
<!-- <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2022/09/19/2022091919443292317.jpg" > -->
<img src="img/01.jpg" height="200" width="300"/>
<audio src="audio/01.mp3" controls></audio>
<video src="video/01.mp4" controls height="200" width="300"></video>
</body>
</html>
注意：填写视频等资源的路径，路径建议采用相对路径。
4、超链接标签
<a> 定义超链接，用于连接到另一个资源
href: 指定需要访问的资源的URL
target: _self,默认值，在当前页面打开, _blank在空白页打开
<table>定义表格
broder:规定表格边框的粗细
width:规定表格的宽度
cellspacing:规定单元格之间的空白
<tr> 定义表格的行
align:定义表格行的内容对齐方式
<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>
</head>
<body>
<a href="https://www.itcast.cn" target="_self">传智教育</a> <br>
<a href="https://www.itheima.com" target="_blank">黑马程序员</a>
</body>
</html>
5、布局标签
<div> 定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。
<span>用来组合行内元素。一般用来展示文本
<!--****************************************************************-->
<!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>
<div>我是div1</div>
<div>我是div2</div>
<span>我是span1</span>
<span>我是span2</span>
</body>
</html>
- div占据一整行，span仅仅占据文本部分
- div的高度想要高一点，可以通过css设置高度，此处我们不做演示。
6、表单标签
<form> 定义表单的
action:定义表单数据提交的服务器地址
method:定义表单数据提交的方式，一般有get和post这2种
<input>定义表单项，通过type属性控制输入形式,接受用户的信息
type:定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>子标签定义选项
<textarea>定义文本域
★ 表单项标签和表单标签是配合在一起工作的，表单项标签必须书写在表单标签<form>中。
<!--**********************************************************************-->
<!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>
<input type="text" name="username">
<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
当我们点击提交时,我们数据提交到哪里去呢？以什么方式去提交呢？所以我们需要指定<form>表单标签的action属性和method属性，此时我们没有服务器，action属性值为空即可。
<form action="" method="get">
通过f12（或者右键检查）打开浏览器开发者工具，此处建议使用谷歌浏览器，来到network标签页进行抓包。
点击提交按钮，观察抓包的结果，此处需要注意，表单提交的方式如果是get，那么提交表单时，参数会遵循url?key=value&key=value的格式跟在地址的后面，其中，value就是用户填写的内容，自习观察key，key是表单项标签name的属性值。
修改<form>表单标签的method属性值为post，此时url地址的后面没有提交的参数了，我们可以去Payload页去查看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>
<!--
action: 表单数据提交的url , 如果未指定, 默认提交到当前页面.
表单项要想被提交必须指定name属性
method: 表单提交方式 ;
get: 默认值 , 表单数据在url后面拼接 ?username=java&age=22 ; url长度有限 .
post：参数隐藏在请求体中，长度无限制
-->
<form action="" method="post">
<input type="text" name="username">
<input type="text" name="age">
<input type="submit" value="提交">
</form>
</body>
</html>
7、表单项标签
<input>定义表单项，通过type属性控制输入形式,接受用户的信息
type:定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>字标签定义选项
<textarea>定义文本域
● type取值以及表现形式如下:
text: 默认值，定义单行的输入字段
password: 定义密码字段
radio:定义单选按钮
checkbox:定义复选框
file:定义文件上传按钮
hidden:定义一个隐藏的表单项
submit:定义提交按钮，提交按钮会把表单数据发送到服务器端
reset:定义重置按钮，重置按钮会清除表单中的所有数据
button: 定义可点击按钮
<!--******************************************************************-->
<!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="http://wwww.baidu.com" method="post">
姓名: <input type="text" name="name"> <br><br>
密码: <input type="password" name="password"> <br><br>
性别: <input type="radio" name="gender" value="1"> 男
<input type="radio" name="gender" value="2"> 女 <br><br>
爱好: <input type="checkbox" name="hobby" value="java"> java
<input type="checkbox" name="hobby" value="game"> game
<input type="checkbox" name="hobby" value="sing"> sing <br><br>
图像: <input type="file" name="image"> <br><br>
学历: <select name="degree">
<option value="">----------- 请选择 -----------</option>
<option value="1">初中</option>
<option value="2">高中</option>
<option value="3">大专</option>
<option value="4">本科</option>
<option value="5">硕士</option>
<option value="6">博士</option>
</select> <br><br>
描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
<input type="hidden" name="id" value="1">
<!-- 表单常见按钮 -->
<input type="submit" value="提交">
<input type="reset" value="重置">
<input type="button" value="按钮"> <br>
</form>
</body>
</html>
二、CSS
1、css的引入方式
● 内联样式：在标签内使用style属性，属性值是css属性键值对；
● 内部样式：定义<style>标签，在标签内部定义css样式
● 外部样式: 定义<link>标签，通过href属性引入外部css文件
● 1. 内联样式会出现大量的代码冗余，不方便后期的维护，所以不常用。
● 2. 内部样式，通过定义css选择器，让样式作用于指定的标签上
● 3. 外部样式，html和css实现了完全的分离，企业开发常用方式。
<!--************************************************-->
<!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>CSS-引入方式</title>
<!-- 内部样式 -->
<!-- <style>
div{
color: red;
font-size:40px
}
</style> -->
<!-- 外部样式 -->
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<!-- 内联样式 -->
<!-- <div style="color: red; font-size:40px">CSS 引入方式</div> -->
<div>CSS 引入方式</div>
<div>CSS 引入方式</div>
</body>
</html>
2、选择器和属性
选择器是选取需设置样式的元素（标签）。
● 选择器通用语法如下：
选择器名 {
css样式名：css样式值;
css样式名：css样式值;
}
★ 1.元素（标签）选择器：
- 选择器的名字必须是标签的名字
- 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
css样式名:css样式值；
}
div{
color: red;
}
★ 2.id选择器:
- 选择器的名字前面需要加上#
- 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签。
#id属性值 {
css样式名:css样式值；
}
#did{
color: blue;
}
★ 3.类选择器：
- 选择器的名字前面需要加上.
- 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个。
.class属性值 {
css样式名:css样式值；
}
.cls{
color: aqua;
}
/****************************************************************************/
<!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>CSS-选择器</title>
<style>
div{
color: red;
}
#did{
color: blue;
}
.cls{
color: aqua;
}
</style>
</head>
<body>
<div>Hello CSS</div>
<div id="did">Hello CSS id</div>
<div class="cls">Hello CSS class</div>
</body>
</html>
三、JavaScript
1、js引入方式
★ 第一种方式：内部脚本，将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
<script>
alert("Hello JavaScript")
</script>
★ 第二种方式：外部脚本将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 外部JS文件中，只包含JS代码，不包含<script>标签
- 引入外部js的<script>标签，必须是双标签
<script src="js/demo.js"></script>
<!--*********************************************************-->
<!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>
<!-- 内部脚本 -->
<!-- <script>
alert('Hello JS');
</script> -->
<!-- 外部脚本 -->
<script src="js/demo.js"></script>
</head>
<body>
</body>
</html>
2、基础语法
★ 语法规则如下：
- 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
- 每行结尾的分号可有可无
- 大括号表示代码块
- 注释：
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
★ js中3种输出语句，来演示书写语法
window.alert()//警告框
document.write()//在HTML 输出内容
console.log()//写入浏览器控制台
//**************************************************************
<!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>
</body>
<script>
/* alert("JS"); */
//方式一: 弹出警告框
// window.alert("hello js");
// //方式二: 写入html页面中
// document.write("hello js");
//方式三: 控制台输出
console.log("hello js");
</script>
</html>
3、变量
★ js中主要通过如下3个关键字来声明变量的：
● var:早期ECMAScript5中用于变量声明的关键字，可以重复声明
● let:ECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效，并且不能重复声明
● const声明常量的，常量一旦声明，不能修改
注意:
- JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
- 变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
<!--*****************************************************************************-->
<!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>
</body>
<script>
//var定义变量
// var a = 10;
// a = "张三";
// alert(a);
//特点1 : 作用域比较大, 全局变量
//特点2 : 可以重复定义的
// {
// var x = 1;
// var x = "A";
// }
// alert(x);
//let : 局部变量 ; 不能重复定义
// {
// let x = 1;
// alert(x);
// }
//const: 常量 , 不能给改变的.
const pi = 3.14;
pi = 3.15;
alert(pi);
</script>
</html>
4、数据类型
js是弱数据类型的语言，js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型：
■ number ：数字（整数、小数、NaN(Not a Number)）
■ string ：字符串，单双引皆可
■ boolean：布尔。true，false
■ object：对象类型，null也是object
■ undefined：当声明的变量未初始化时，该变量的默认值是 undefined。
■ 使用typeof函数可以返回变量的数据类型
<!--****************************************************************************************-->
<!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>
</body>
<script>
//原始数据类型
alert(typeof 3); //整数number
alert(typeof 3.14); //小数number
alert(typeof 3.14/0);//NaN（not a 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>
</html>
<!--*************************************************************************-->
● 算术运算符: + , - , * , / , % , ++ , --
● 赋值运算符: = , += , -= , *= , /= , %=
● 比较运算符: > , < , >= , <= , != , ==,===
注意: == 会进行类型转换，=== 不会进行类型转换
● 逻辑运算符: && , || , !
● 三元运算符条件表达式 ? true_value: false_value
注意：
● ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
● ===：不光比较值，还要比较类型，如果类型不一致，直接返回false
<!--************************************************************-->
<!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>
</body>
<script>
var age = 20;
var _age = "20";
var $age = 20;
alert(age == _age);//true ，只比较值
alert(age === _age);//false ，类型不一样
alert(age === $age);//true ，类型一样，值一样
</script>
</html>
5、函数
JavaScript中的函数被设计为执行特定任务的代码块，通过关键字function来定义。
★ 第一种定义格式:
function 函数名(参数1,参数2..){
要执行的代码
}
注意：
- 形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。
- 返回值也不需要声明类型，直接return即可。
- 函数需要被调用才能执行！
function add(a, b){
return a + b;
}
let result = add(10,20);
alert(result);
定义的add函数有返回值，所以我们可以接受返回值。
★ 第二种定义格式
var functionName = function (参数1,参数2..){
//要执行的代码
}
<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>
调用add函数时，再添加2个参数
var result = add(10,20,30,40);
浏览器打开，发现没有错误，并且依然弹出30，函数的调用只需要名称正确即可，参数列表不管的。如上述案例，10传递给了变量a，20传递给了变量b,而30和40没有变量接受，但是不影响函数的正常调用。
6、对象
大体分页3大类：
第一类：基本对象,我们主要学习Array和JSON和String
第二类：BOM对象,主要是和浏览器相关的几个对象。
第三类：DOM对象，JavaScript中将html的每一个标签都封装成一个对象。
基本对象：
● Array对象时用来定义数组的。常用语法格式有如下2种：
■ var 变量名 = new Array(元素列表);
■ var arr = new Array(1,2,3,4); //1,2,3,4 是存储在数组中的数据（元素）
■ var 变量名 = [ 元素列表 ];
■ var arr = [1,2,3,4]; //1,2,3,4 是存储在数组中的数据（元素）
● 通过索引来获取数组中的值
■ arr[索引] = 值;
<!--**********************************************************************-->
<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>
特点：
JavaScript中数组相当于java中的集合，数组的长度是可以变化的。而且JavaScript是弱数据类型的语言，所以数组中可以存储任意数据类型的值。
Array的属性和方法：
length：设置或返回数组中元素的数量。
<!--************************************************************-->
方法：
forEach()：遍历数组中的每个有值得元素，并调用一次传入的函数
//e是形参，接受的是数组遍历时的值
arr.forEach(function(e){
console.log(e);
})
push()：将新元素添加到数组的末尾，并返回新的长度
//push: 添加元素到数组末尾
arr.push(7,8,9);
console.log(arr);
splice()：从数组中删除元素
参数1：表示从哪个索引位置删除
参数2：表示删除元素的个数
//splice: 删除元素
arr.splice(2,2);
console.log(arr);
<!--**********************************************************************-->
<!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];
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对象
创建方式有2种：
var 变量名 = new String("…") ; //方式一
var 变量名 = "…" ; //方式二
new String创建的是引用类型，直接引号的是值类型不仅console能看出区别，typeof也能看出区别
<script>
//创建字符串对象
//var str = new String("Hello String");
var str = " Hello String ";
console.log(str);
</script>
String对象的属性和方法：
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>
★ JS对象:
自定义对象格式:
var 对象名 = {
属性名1: 属性值1,
属性名2: 属性值2,
属性名3: 属性值3,
函数名称: function(形参列表){}
};
调用方法：
对象名.属性名
类似Java的创建方式（不常用）：
var 对象名 = new Object();
对象名.属性名="1";
对象名.属性名="2";
或者自定义构造函数的方式（不常用）：
function Person(name, age){
this.name = name
this.age = age
}
var p1 = new Person('Tom',18)
<!--***********************************************************-->
<script>
//自定义对象
var user = {
name: "Tom",
age: 10,
gender: "male",
eat: function(){
console.log("用膳~");
}
}
console.log(user.name);
user.eat();
<script>
★ json对象
JSON对象：Java Script Object Notation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：
{
"key":value,
"key":value,
"key":value
}
key必须使用引号并且是双引号标记，value可以是任意数据类型。json这种数据格式的文本,经常用来作为前后台交互的数据载体,可以清晰的描述java中需要传递给前端的java对象。
★ xml格式存在如下问题：
- 标签需要编写双份，占用带宽，浪费资源
- 解析繁琐
var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
alert(jsonstr.name);
因为上述是一个json字符串，不是json对象，会使输出结果为undefined，所以我们可以使用如下函数来进行json字符串和json对象的转换。
var obj = JSON.parse(jsonstr);
alert(obj.name);
通过如下函数将json对象再次转换成json字符串。
alert(JSON.stringify(obj));
<!--**************************************************************************-->
<!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>
//自定义对象
// var user = {
// name: "Tom",
// age: 10,
// gender: "male",
// // eat: function(){
// // console.log("用膳~");
// // }
// eat(){
// console.log("用膳~");
// }
// }
// console.log(user.name);
// user.eat();
// //定义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>
7、BOM对象
BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。
★ BOM中提供了如下5个对象：
● Window: 浏览器窗口对象
● Navigator:浏览器对象
● Screen: 屏幕对象
● History:历史记录对象
● Location:地址栏对象
5个对象，我们重点学习的是Window对象、Location对象这2个。
1.window对象
window对象指的是浏览器窗口对象，是JavaScript的全部对象，所以对于window对象，我们可以直接使用，并且对于window对象的方法和属性，我们可以省略window.
window.alert('hello');可以简写为：alert('hello')
★ window对象提供了获取其他BOM对象的属性：
● history：用于获取history对象
● location：用于获取location对象
● Navigator：用于获取Navigator对象
● Screen：用于获取Screen对象
★ window常用的函数：
● alert()：显示带有一段消息和一个确认按钮的警告框。
● comfirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
● setInterval(fn,毫秒值)：按照指定的周期（以毫秒计）来调用函数或计算表达式。fn:函数，需要周期性执行的功能代码。毫秒值：间隔时间
//定时器 - setInterval -- 周期性的执行某一个函数
var i = 0;
setInterval(function(){
i++;
console.log("定时器执行了"+i+"次");
},2000);
● setTimeout(fn,毫秒值)：在指定的毫秒数后调用函数或计算表达式。只会在一段时间后执行一次功能。
//定时器 - setTimeout -- 延迟指定时间执行一次
setTimeout(function(){
alert("JS");
},3000);
2.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>
8、DOM对象
DOM：Document Object Model 文档对象模型。
JavaScript 将 HTML 文档的各个组成部分封装为对象。
HTML文档的封装对象为：
- Document：整个文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
DOM技术主要作用：
- 改变 HTML 元素的内容
- 改变 HTML 元素的样式（CSS）
- 对 HTML DOM 事件作出反应
- 添加和删除 HTML 元素
<!--***************************************************************-->
获取DOM中的元素对象。HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。document对象提供的用于获取Element元素对象的api
● document.getElementById() //根据id属性值获取，返回单个Element对象
● document.getElementsByTagName()//根据标签名称获取，返回Element对象数组
● document.getElementsByName()//根据name属性值获取，返回Element对象数组
● document.getElementsByClassName()//根据class属性值获取，返回Element对象数组
<!--********************************************************************-->
<!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>
四、JavaScript事件
什么是事件呢？
- 按钮被点击
- 鼠标移到元素上
- 输入框失去焦点
- ........
我们可以给这些事件绑定函数，当事件触发时，可以自动的完成对应的功能。这就是事件监听。JavaScript事件是js非常重要的一部分。主要围绕2点来学习：
- 事件绑定
- 常用事件
1、事件绑定
JavaScript对于事件的绑定提供了2种方式：
★ - 方式1：通过html标签中的事件属性进行绑定,可以借助标签的onclick属性，属性值指向一个函数。
<input type="button" id="btn1" value="事件绑定1" οnclick="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" οnclick="on()">
<input type="button" id="btn2" value="事件绑定2">
</body>
<script>
function on(){
alert("按钮1被点击了...");
}
document.getElementById('btn2').onclick = function(){
alert("按钮2被点击了...");
}
</script>
</html>
2、常用事件
★ 常用的事件属性：
onclick：鼠标单击事件
onblur：元素失去焦点。失去焦点事件，前提是输入框获取焦点的状态下，在输入框之外的地方点击，光标从输入框中消失了，这就是失去焦点。
onfocus：元素获得焦点。获取焦点事件，鼠标点击输入框，输入框中光标一闪一闪的，就是输入框获取焦点了。
onload：某个页面或图像被完成加载
onsubmit：当表单提交时触发该事件
onmouseover：鼠标被移到某元素之上
onmouseout：鼠标从某元素移开
<!--********************************************************************-->
案例要求：
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="点亮" οnclick="on()">
<input type="button" value="熄灭" οnclick="off()">
<br> <br>
<input type="text" id="name" value="ITCAST" οnfοcus="lower()" οnblur="upper()">
<br> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>
<input type="button" value="全选" οnclick="checkAll()">
<input type="button" value="反选" οnclick="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框架
1、Vue概述
为了提高前端的开发效率就需要我们使用DOM操作，通过这种开发流程就引入了：MVVM:其实是Model-View-ViewModel的前端开发思想;
- Model: 数据模型，特指前端中通过请求从后台获取的数据。
- View: 视图，用于展示数据的页面，可以理解成我们的html+css搭建的页面，但是没有数据。
- ViewModel: 数据绑定到视图，负责将数据（Model）通过JavaScript的DOM技术，将数据展示到视图（View）上。
★ 使用ViewModel部分开发的vue前端框架，用来替代JavaScript的DOM操作，会让数据展示到视图的代码开发变得更加的简单。
★ Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计，Vue 的核心库只关注视图层而且容易与其它库或已有项目整合。
★ Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2、使用方法
★ 第一步：在VS Code中创建名为12. Vue-快速入门.html的文件，并且在html文件同级创建js目录，将资料/vue.js文件目录下得vue.js拷贝到js目录。
★ 第二步：然后编写<script></script>标签来引入vue.js文件
<script src="js/vue.js"></script>
★ 第三步：在js代码区域定义vue对象，最好写在body下方，否则vue对象会找不到app这个元素。
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
}
})
</script>
Vue几个常用的属性：
- el: 用来指定哪儿些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
- data: 用来定义数据模型
- methods: 用来定义函数。这个我们在后面就会用到
★ 第四步：在html区域编写视图，其中{{}}是插值表达式，用来将vue对象中定义的model展示到页面上的。
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
<!--*******************************************************************-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
message: "Hello Vue"
}
})
</script>
</html>
3、vue指令
<!--***************************************************************-->
★ Vue指令:
HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
<!--***********************************************-->
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: 当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-指令-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>
注意：html属性前面有:表示采用的vue的属性绑定！
★ v-model： 在表单元素上创建双向数据绑定.
★ 双向绑定：
- vue对象的data属性中的数据变化，视图展示会一起变化。
- 视图数据发生变化，vue对象的data属性中的数据也会随着变化。
- 只有表单项标签！所以双向绑定一定是使用在表单项标签上的
<input type="text" v-model="url">
★ 双向绑定的作用：可以获取表单的数据的值，然后提交给服务器
<!--************************************************************************************-->
<!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。
<input οnclick="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="点我一下">
<input type="button" value="点我一下">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
}
})
</script>
</html>
在vue对象的methods属性中定义事件绑定时需要的handle()函数
methods: {
handle: function(){
alert("你点我了一下...");
}
}
给第一个按钮，通过v-on指令绑定单击事件
<input type="button" value="点我一下" v-on:click="handle()">
v-on也存在简写方式，即v-on: 可以替换成@所以第二个按钮绑定单击事件的代码如下：
<input type="button" value="点我一下" @click="handle()">
v-if和v-show
<!--*********************************************************************-->
v-if: //条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else:
v-else-if:
v-show: //根据条件展示某元素，区别在于切换的是display属性的值
★ <!--使用条件判断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的作用效果是一样的，只是原理不一样。
年龄<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>
★ 两者的区别：v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。
<!--***************************************************************************-->
<!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 v-if="age <= 35">年轻人(35及以下)</span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)</span>
<span v-else>老年人(60及以上)</span>
<br><br>
年龄<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>
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
age: 20
},
methods: {
}
})
</script>
</html>
v-for
v-for:这个指令是用来遍历的
格式如下：
<标签 v-for="变量名 in 集合模型数据">
{{变量名}}
</标签>
注意：需要循环那个标签，v-for 指令就写在那个标签上。
使用索引：
<标签 v-for="(变量名,索引变量) in 集合模型数据">
<!--索引变量是从0开始，所以要表示序号的话，需要手动的加1-->
{{索引变量 + 1}} {{变量名}}
</标签>
<!--********************************************************************************-->
<!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:{
addrs:["北京", "上海", "西安", "成都", "深圳"]
},
methods: {
}
})
</script>
</html>
编写2种遍历语法，来遍历数组，展示数据，代码如下：
<div id="app">
<div v-for="addr in addrs">{{addr}}</div>
<hr>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>
</div>
4、生命周期
vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后
重点关注的是mounted。
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后一般用于页面初始化自动的ajax请求后台数据。
创建名为18. Vue-生命周期.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-for</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
}
})
</script>
</html>
我们编写mounted声明周期的钩子函数，与methods同级，代码如下：
<script>
//定义Vue对象
new Vue({
el: "#app", //vue接管区域
data:{
},
methods: {
},
mounted () {
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
运行结果如下：我们发现，自动打印了这句话，因为页面加载完成，vue对象创建并且完成了挂在，此时自动触发mounted所绑定的钩子函数，然后自动执行，弹框。
六、Ajax异步交互
★ Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。
★ Ajax作用：
● 与服务器进行数据交互；前端通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上。
● 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。如：搜索联想、用户名是否可用的校验等等。
■ 原生Ajax
jax请求是基于客户端发送请求，服务器响应数据的技术。需要提供服服务器端和编写客户端。
- 服务器端
后台服务器地址：http://yapi.smart-xwork.cn/mock/169327/emp/list
备用地址：http://api.hhyp58.com/mock/92/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="获取数据" οnclick="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();//发送请求
■ 补充:如果是GET方式，请求参数就跟在URL后面
如果是POST方式，请求参数是在调用send方法的时候传递
xmlHttpRequest.send("fname=Bill&lname=Gates");
● 第四步：我们通过绑定事件的方式，来获取服务器响应的数据。
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){
//此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应， 200表示这是一个正确的Http请求，没有错误
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
}
}
readyState的取值含义：
1 (载入)：已经调用open() 方法，但尚未发送请求；
2 (载入完成)： 请求已经发送完成；
3 (交互)：可以接收到部分响应数据；
4 (完成)：已经接收到了全部数据，并且连接已经关闭。
1、Axios技术
原生的Ajax请求的代码编写起来还是比较繁琐的,Axios是简单的发送Ajax请求的技术，它是对原生的AJAX进行封装，简化书写。
Axios官网是：https://www.axios-http.cn
★ 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);
})
发送 get 请求:
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 可以获取到响应的数据。
回调函数就是一个被作为参数传递的函数
2、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目录下，然后创建名为02. 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" οnclick="get()">
<input type="button" value="删除数据POST" οnclick="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还针对不同的请求方法的别名：
方法：
axios.get(url [, config]) //发送get请求
axios.delete(url [, config])//发送delete请求
axios.post(url [, data[, config]])//发送post请求
axios.put(url [, data[, config]])//发送put请求
可以将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);
})
3、案例
需求：基于Vue及Axios完成数据的动态加载展示。
其中数据是来自于后台程序的，地址是：http://yapi.smart-xwork.cn/mock/169327/emp/list
步骤：
1. 首先创建文件，提前准备基础代码，包括表格以及vue.js和axios.js文件的引入
2. 我们需要在vue的mounted钩子函数中发送ajax请求，获取数据
3. 拿到数据，数据需要绑定给vue的data属性
4. 在<tr>标签上通过v-for指令遍历数据，展示数据
代码实现：
1. 首先创建文件，提前准备基础代码，包括表格以及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" v-for="(emp,index) in emps">
<td>{{index + 1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image" width="70px" height="50px">
</td>
<td>
<span v-if="emp.gender == 1">男</span>
<span v-if="emp.gender == 2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
emps:[]
},
mounted () {
//发送异步请求,加载数据
axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then(result => {
console.log(result.data);
this.emps = result.data.data;
})
}
});
</script>
</html>
七、前台分离开发
★前端开发有2种方式：前后台混合开发和前后台分离开发。
● 前后台混合开发，顾名思义就是前台后台代码混在一起开发。
★ 这种开发模式有如下缺点：
- 沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用
- 分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才
- 不便管理：所有的代码都在一个工程中
- 不便维护和扩展：前端代码更新，和后台无关，但是需要整个工程包括后台一起重新打包部署。
★ 目前基本都是采用的前后台分离开发方式：
● 将原先的工程分为前端工程和后端工程这2个工程，然后前端工程交给专业的前端人员开发，后端工程交给专业的后端人员开发。
★ 接口文档：规范前后端的数据交流的规范统一性。
● 前后端开发人员必须通过接口文档统一指定一套规范数据格式，这样下来就可以实现前后端数据交流。
★ 后台开发者开发一个功能的具体流程：
1. 需求分析：首先我们需要阅读需求文档，分析需求，理解需求。
2. 接口定义：查询接口文档中关于需求的接口的定义，包括地址，参数，响应数据类型等等
3. 前后台并行开发：各自按照接口文档进行开发，实现需求
4. 测试：前后台开发完了，各自按照接口文档进行测试
5. 前后段联调测试：前段工程请求后端工程，测试功能
1、YAPI
YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。
- API接口管理：根据需求撰写接口，包括接口的地址，参数，响应等等信息。
- Mock服务：模拟真实接口，生成接口的模拟测试数据，用于前端的测试。
首先我们登录YAPI的官网，然后使用github或者百度账号登录，没有的话去注册一个
登录进去后，在个人空间中，选择项目列表->添加测试项目。
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类。
登录进去后，在个人空间中，选择项目列表->添加测试项目。
然后点击创建的项目，进入到项目中，紧接着先添加接口的分类。
2、前端工程化
我们目前的前端开发中，当我们需要使用一些资源时,vue.js，和axios.js文件，都是直接再工程中导入的,但是上述开发模式存在如下问题：
- 每次开发都是从零开始，比较麻烦
- 多个页面中的组件共用性不好
- js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护。
现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点:
- 模块化：将js和css等，做成一个个可复用模块
- 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
- 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
- 自动化：项目的构建，测试，部署全部都是自动完成
企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。
前端工程化入门
我们的前端工程化是通过vue官方提供的脚手架Vue-cli来完成的，用于快速的生成一个Vue的项目模板。
Vue-cli主要功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
NodeJS安装和Vue-cli安装网上看。
NodeJS：NodeJS 是基于Chrome V8引擎的 JavaScript 运行环境。NodeJS使用事件驱动，非阻塞型I/O。NodeJS的包管理生态是 NPM，是现在世界上最大的开源程序包库。
/************************************************************/
前端工程化的一些常见特点和实践包括：
1. 构建工具：使用构建工具如Webpack、Gulp、Grunt等来自动化处理前端资源的打包、压缩、编译等任务，以提高开发效率。
2. 模块化：采用模块化的开发方式，使用模块化标准（如ES6的import/export、CommonJS等）将代码拆分成独立模块，并使用工具进行模块依赖管理，以提高代码的可维护性和复用性。
3. 自动化测试：编写自动化测试脚本，对前端代码进行单元测试、集成测试等，以确保代码质量和功能的稳定性。
4. 版本控制：使用版本控制系统（如Git）对代码进行管理，实现多人协作开发、版本回退、代码分支等功能，以提高团队协作效率。
5. 代码规范和静态检查：制定前端代码规范，使用工具（如ESLint、Prettier等）进行代码风格检查和静态代码分析，以提高代码质量和可读性。
6. 性能优化：通过代码压缩、图片优化、资源懒加载、缓存策略等手段，优化前端性能，提升网页加载速度和用户体验。
通过前端工程化的实践，可以提高前端开发的效率，并确保项目的质量和稳定性，同时促进团队协作和知识共享。
3、创建vue项目
首先，我们再桌面创建vue文件夹，然后双击进入文件夹，来到地址目录，输入cmd，然后进入到vue文件夹的cmd窗口界面,然后再当前目录下，直接输入命令`vue ui`进入到vue的图形化界面，点击项目管理器,然后我门选择创建按钮，在vue文件夹下创建项目，选择包管理器为npm,最下面的git不打开，然后预设模板选择手动，然后再配置页面选择语言版本和语法检查规范，选择2.0版本，语法检查规范选择ESLint with error prevention only然后创建项目。最后我们只需要等待片刻，即可进入到创建创建成功的界面。
3654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
