三劍客
萬維網聯盟（ 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, blue2. 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:規定音頻的 urlcontrols:顯示播放控件
<video>定義視頻(支持MP4、WebM、OGG)src:規定視頻的 urlcontrols:顯示播放控件
第一步：首先在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. 像素 px2. 百分比 %--><!-- <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: 指定需要訪問的資源的URLtarget: _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); //整數numberalert(typeof 3.14); //小數numberalert(typeof 3.14/0);//NaN（not a number）非數字alert(typeof "A"); //stringalert(typeof 'Hello');//string
?alert(typeof true); //booleanalert(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;// }//定義函數-2var 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);//lengthconsole.log(str.length);//charAtconsole.log(str.charAt(4));//indexOfconsole.log(str.indexOf("lo"));//trimvar 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 = namethis.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();// //定義jsonvar 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);//locationalert(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. 點擊 "點亮" 按鈕, 點亮燈泡; 點擊 "熄滅" 按鈕, 熄滅燈泡; -- onclickfunction 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 , onblurfunction 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. 點擊 "全選" 按鈕使所有的復選框呈現選中狀態 ; 點擊 "反選" 按鈕使所有的復選框呈現取消勾選的狀態 ; -- onclickfunction 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發送異步請求-getaxios({method: "get",url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"}).then(result => {console.log(result.data);})}function post(){// 通過axios發送異步請求-postaxios({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然后創建項目。最后我們只需要等待片刻，即可進入到創建創建成功的界面。
)
