1. JavaScript
1.1 基礎介紹
- JavaScript(簡稱:JS)是一門跨平臺、面向對象的腳本語言,是用來控制網頁行為,實現頁面的交互效果。JavaScript和Java是完全不同的語言,但基本語法類似
- 組成
-
ECMAScript: 規定了JS基礎語法核心知識,包括變量、數據類型、流程控制、函數、對象等。
-
BOM:瀏覽器對象模型,用于操作瀏覽器本身,如:頁面彈窗、地址欄操作、關閉窗口等。
-
DOM:文檔對象模型,用于操作HTML文檔,如:改變標簽內的內容、改變標簽內字體樣式等。
-
1.2 引入方式
-
JS有兩種引入方式,分為內部腳本和外部腳本
- 內部腳本:將JS代碼定義在HTML頁面中
- JavaScript代碼必須位于<script></script>標簽之間
- 在HTML文檔中,可以在任意地方,放置任意數量的<script></script>
- 一般會把腳本置于<body>元素的底部,可改善顯示速度
- HTML頁面是從上往下解析的,如果JS代碼過多,影響頁面顯示速度
- JS代碼中,可以操作HTML標簽,如果標簽還沒渲染出來[在JS代碼下面,沒加載出來],就可能會報錯
- 外部腳本:將JS代碼定義在外部 JS文件中,然后引入到 HTML頁面中
- 外部JS文件中,只包含JS代碼,不包含<script>標簽
- ?引入外部js的<script>標簽,必須是雙標簽
??
- 內部腳本:將JS代碼定義在HTML頁面中
內部腳本引入
<script>
js代碼;
</script>
<body><script>//1.內部腳本alert('Hello,World');</script>
</body>
外部腳本引入
<script src="外部文件路徑"></script>
HTML代碼
<body><script src="hello.js"></script>
</body>
js代碼
alert('外部引入');
- 細節:?
- demo.js中只有js代碼,沒有<script>標簽
- JS書寫規范
- 結束符:每行js代碼,結尾以分號結尾,而結尾的分號可有可無。(建議在一個項目中保持一致,要么全部都加,要么全部都不加)
- 注釋:單行注釋,多行注解的寫法, 與java中一致。
1.3?JS基礎語法?
-
1.31 變量&常量
-
JS中主要通過 let 關鍵字來聲明變量的。( 弱類型語言,變量是可以存放不同類型的值的。)
- 變量名需要遵循如下規則:
- 組成字符可以是任何字母、數字、下劃線(_)或美元符號($),且數字不能開頭[與java相同]
- 變量名嚴格區分大小寫,name和Name是不同的變量
- 不能使用關鍵字作為變量名,如:let、var、if、for等
- JS中用 const 關鍵字聲明常量
- 在早期js中,聲明變量還能用var,但不嚴謹(不推薦)
- var聲明的變量可以重復聲明
- var聲明的作用域為全局作用域
- 在早期js中,聲明變量還能用var,但不嚴謹(不推薦)
- 一旦聲明,常量的值就不能改變(不能重新賦值)
<body><script>let a=10;a="hello";b=true;alert(a);alert(n);</script>
</body>
- 拓展[輸出方式]:
- alert()? ? ? ? ? ? ? ? 彈出警告框
- console.log()? ? ? 輸出到控制臺
- document.write() 輸出到body區域,在頁面中顯示(不常用)
1.32 數據類型
- JavaScript的數據類型分為:基本數據類型和引用數據類型(對象)
- 基本數據類型
number | 數字(整數、小數、NaN(not a Number)) |
boolean | 布爾。true,false |
null | 對象為空,JavaScript是大小寫敏感的,因此null、Null、NULL是完全不同的 |
undefined | 聲明的變量未初始化時,該變量的默認值是undefined |
string | 字符串、單引號、雙引號、反引號皆可,推薦單引號 |
數據類型可以用 typeof 去檢測?
示例
<body><script>console.log(typeof 1)console.log(typeof 1.3)console.log(typeof true)console.log(typeof null)console.log(typeof 'asd')console.log(typeof "asd")console.log(typeof `asd`)</script></body>
演示
模板字符串語法[字符串反引號的應用場景]
-
模板字符串的使用場景:拼接字符串和變量。
-
模板字符串的語法:
-
`...` :反引號 (英文輸入模式下鍵盤 tab 鍵上方波浪線 ~ 那個鍵)
-
內容拼接時,使用 ${ } 來引用變量
-
<script>let name ='張三';let age = 18;let info = `大家好,我是新入職的${name},今年${age}歲`;let info1 = `大家好,我是新入職的`+name+`,今年`+age+`歲`;console.log(info);console.log(info1);</script>
1.33 函數?
- 介紹
- 函數(function)是被設計用來執行特定任務的代碼塊,方便程序的封裝復用。
- 定義
- JavaScript中的函數通過function關鍵字進行定義,語法為:
function functionName(參數1,參數2....){執行代碼
}let result = add(10,20);
alert(result);
- 調用?:函數名稱(實際參數列表)
注:JS為弱類型語言,形參、返回值都不需要指定類型,在調用函數時,實參個數和形參個數可以不一致,但建議一致?
<body><script>function add(a,b){return a+b;}alert(add(20,10));</script>
</body>
1.34 匿名函數
-
匿名函數是一種沒有名稱的函數,可以通過兩種方式定義:函數表達式和箭頭函數。
函數表達式
let add=function(a,b){retutn a+b;
}箭頭函數
let add =add(a,b) =>{return a+b;
}
- ?匿名函數定義后,可以通過變量名直接調用
let result = add(10,20);
alert(result);
<script>let add=function(a,b){return a+b;}let del=(a,b)=>{return a-b;}console.log(add(1,2));console.log(del(1,2));</script>
?1.35 自定義對象
- 定義格式
let 對象名 ={
? ? ? ? 屬性名1:屬性值1,
? ? ? ? 屬性名2:屬性值2,
? ? ? ? 屬性名3:屬性值3,
? ? ? ? 方法名:function(形參列表){ }
}
<script>let user={name:'zhangsan',age:18,gender:'男',toString(){return `姓名:${this.name},年齡:${this.age},性別:${this.gender}`}}console.log(user.toString())</script>
細節 :如果使用箭頭函數,this不指向當前對象,指向當前對象的父級【不推薦】
1.36 json
- 概念:
- JavaScript Object Notation,JavaScript對象標記法(JS對象標記法書寫的文本)
- 由于語法簡單,層次結構鮮明,多用于作為數據載體,在網絡中進行數據傳輸。
- 方法
- JSON.parse() :將json文本轉換成JS對象
- JSON.stringify():將JS對象轉換成json文本
<script>let user={name:'zhangsan',age:18,gender:'男',toString:function(){return `姓名:${this.name},年齡:${this.age},性別:${this.gender}`}}console.log(JSON.stringify(user));let personJson='{"name":"zhangsan","age":18,"gender":"男"}'console.log(JSON.parse(personJson));</script>
?
細節:json格式的文本所有的key必須使用雙引號引起來?
1.4 DOM
-
1.41 概念
- DOM:Document Object Model 文檔對象模型。也就是 JavaScript 將 HTML 文檔的各個組成部分封裝為對象。
-
Document:整個文檔對象
-
Element:元素對象? ?[如<html>,<head>,<body>等]
-
Attribute:屬性對象? ?[如<href>等]
-
Text:文本對象? ?[如<h1>文本</h1>中的文本]
-
Comment:注釋對象? ?[就是注釋]
-
-
1.42 操作
- DOM操作核心思想:
- 將網頁中所有的元素當作對象來處理(標簽的所有屬性在該對象上都可以找到)
- 操作步驟:
- 獲取要操作的DOM元素對象
- 操作DOM對象的屬性或方法(查文檔或AI)
- 獲取DOM對象
- 根據CSS選擇器來獲取DOM元素,獲得匹配到的第一個元素:document.querySelector('選擇器')
- 根據CSS選擇器來獲取DOM元素,獲得匹配到的所有元素:document.querySelectorAll('選擇器')
- 注:得到的是一個NodeList節點集合,是一個偽數組(有長度、有索引的數組)
- 其他方式(了解,已經用的很少了)
- document.getElementById('id')
- document.getElementsByTagName('div')
- document.getElementsByClassName('cls')
- DOM操作核心思想:
<body><h1 id="title">111</h1><h1 id="title1">222</h1><h1 id="title1">333</h1><script>//1.獲取DOM對象let h1=document.querySelector('#title');let h2=document.querySelectorAll('#title1');//2.調用DOM對象中的屬性或方法h1.innerHTML='修改文本';h2[1].innerHTML='修改文本2';</script>
</body>
1.5 事件監聽?
-
1.51 概念
- 事件:HTML事件是發生在HTML元素上的"事情"。比如:
- 按鈕被點擊
- 鼠標移動到元素上
- 按下鍵盤按鍵
- 事件監聽:JavaScript可以在事件觸發時,立即調用一個函數做出相應,也成為事件綁定或注冊事件。
- 事件:HTML事件是發生在HTML元素上的"事情"。比如:
-
1.52 事件監聽
- 語法: 事件源.addEventListener('事件類型’,事件觸發執行的函數);
- 事件監聽三要素
- 事件源:哪個dom元素觸發了條件,要獲取dom元素
- 事件類型:用什么方式觸發,比如:鼠標單擊 click
- 事件觸發執行的函數:要做什么事
<body><input type="button" id="btn1" value="按鈕1"><input type="button" id="btn2" value="按鈕2"><script>var btn1 =document.querySelector("#btn1").addEventListener("click",function(){console.log("第一個按鈕點擊成功")});</script>
</body>
早期版本寫法(了解):
- 事件源.on事件 = function() {...}?
- 缺點:on方式會被覆蓋,addEventListener方式可以綁定多次,擁有更多特性,推薦使用
1.53 常見事件
- 鼠標事件
- click:鼠標點擊
- mouseenter:鼠標移入
- mouseleave:鼠標移出
- 鍵盤事件
- keydown:鍵盤按下觸發
- keyup:鍵盤抬起觸發
- 焦點事件
- focus:獲得焦點觸發
- blur:失去焦點觸發
- 表單事件
- input:用戶輸入時觸發
- submit:表單提交時觸發
2. Vue
2.1 概述
-
Vue,是一款用于構建用戶界面的漸進式的JavaScript框架(官方網站:https://cn.vuejs.org)。
- 構建用戶界面
- 構建用戶界面是指,在Vue中,可以基于數據渲染出用戶看到的界面。
- 漸進式
- 漸進式中的漸進呢,字面意思就是 "循序漸進"。Vue生態中的語法呢是非常多的,比如聲明式渲染、組件系統、客戶端路由(VueRouter)、狀態管理(Vuex、Pinia)、構建工具(Webpack、Vite)等等。
- 框架
- 就是一套完整的項目解決方案,用于快速構建項目。
- 優點:大大提升前端項目的開發效率。
- 缺點:需要理解記憶框架的使用規則。
2.2 準備工作
- 準備
- 引入Vue模塊(官方提供)
- 創建Vue程序的應用實例,控制視圖的元素
- 準備元素(div),被Vue控制
<body><div id="app"></div><script type="module">//引用官方模塊import { createApp } from 'https://unpkg.com/vue@3/dist/vue.global.js'//控制視圖元素createApp({}).mount('#app'); //調用mount方法,接管app區域[其實就是CSS選擇器]</script></body>
- 數據驅動視圖
- 準備數據
- 通過插值表達式渲染頁面
<body><div id="app"><!-- 通過插值表達式渲染頁面 --><h1>{{msg}}</h1></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({//定義方法[準備數據]data(){return{msg:'hello vue'}}}).mount('#app'); </script></body>
細節:?
-
Vue中定義數據,必須通過data方法來定義,data方法返回值是一個對象,在這個對象中定義數據。
-
插值表達式中編寫的變量,一定是Vue中定義的數據,如果插值表達式中編寫了一個變量,但是在Vue中未定義,將會報錯 。
-
Vue應用實例接管的區域是 '#app',超出這個范圍,就不受Vue控制了,所以vue的插值表達式,一定寫在
<div id="app">...</div>
的里面 。
2.3 常用指令
- 指令:HTML標簽上帶有 v-前綴的特殊屬性,不同的指令有不同的含義,可以實現不同的功能
- 常用指令
指令 | 作用 |
---|---|
v-for | 列表渲染,遍歷容器的元素或者對象的屬性 |
v-bind | 為HTML標簽綁定屬性值,如設置 href , css樣式等 |
v-if/v-else-if/v-else | 條件性的渲染某元素,判定為true時渲染,否則不渲染 |
v-show | 根據條件展示某元素,區別在于切換的是display屬性的值 |
v-model | 在表單元素上創建雙向數據綁定 |
v-on | 為HTML標簽綁定事件 |
2.31 v-for
-
作用:列表渲染,遍歷容器的元素或者對象的屬性?
-
語法:
<tr v-for="(item,index) in items" : keys="item.id"> {{item}}</tr>???????
- 參數
-
items 為遍歷的數組
-
item 為遍歷出來的元素
-
index 為索引/下標,從0開始 ;可以省略,省略index語法:
v-for = "item in items"
-
- key:
-
作用:給元素添加的唯一標識,便于vue進行列表項的正確排序復用,提升渲染性能
-
推薦使用id作為key(唯一),不推薦使用index作為key(會變化,不對應)
-
注:遍歷的數組,必須在data中定義; 要想讓哪個標簽循環展示多次,就在哪個標簽上使用 v-for 指令。
-
2.32 v-bind
- 動態為HTML標簽綁定屬性值,如設置href,src,style樣式等。
- 語法:
v-bind:屬性="變量"//簡化版:屬性="變量"<td><img class="avatar" v-bind:src="e.image" alt="令狐沖"></td>
- 注:v-bind 所綁定的數據,必須在data中定義/或基于data中定義的數據而來。
2.33 v-if & v-show
- 作用:這兩類指令,都是用來控制元素的顯示與隱藏的
- v-if:
-
語法:v-if="表達式",表達式值為 true,顯示;false,隱藏
-
原理:基于條件判斷,來控制創建或移除元素節點(條件渲染)
-
場景:要么顯示,要么不顯示,不頻繁切換的場景
-
其它:可以配合 v-else-if / v-else 進行鏈式調用條件判斷
-
注意: v-else-if必須出現在v-if之后,可以出現多個;v-else 必須出現在v-if/v-else-if之后
-
<td><span v-if="e.job==1">班主任</span><span v-else-if="e.job==2">講師</span><span v-else-if="e.job==3">學工主管</span><span v-else-if="e.job==4">教研主管</span><span v-else-if="e.job==5">咨詢師</span><span v-else>其他</span>
</td>
-
v-show:
-
語法:v-show="表達式",表達式值為 true,顯示;false,隱藏
-
原理:基于CSS樣式display來控制顯示與隱藏
-
場景:頻繁切換顯示隱藏的場景
-
<td><span v-show="e.job == 1">班主任</span><span v-show="e.job == 2">講師</span><span v-show="e.job == 3">學工主管</span><span v-show="e.job == 4">教研主管</span><span v-show="e.job == 5">咨詢師</span>
</td>
v-if 與 v-show的區別?
- v-if: 條件不成立,直接不渲染這個元素(不頻繁切換的場景)
- v-show:通過css樣式,來控制元素的展示與隱藏(頻繁切換的場景)
2.34 v-model
- 作用:在表單元素上使用,雙向數據綁定。可以方便的 獲取 或 設置 表單項數據
- 語法:
v-model="變量名"
- 這里的雙向數據綁定,是指 Vue中的數據變化,會影響視圖中的數據展示 。?
createApp({data() {return {此處數據searchForm:{name: '',gender: ''job: '',},empList: [...]
}}}.mount(...)
注意:v-model 中綁定的變量,必須在data中定義。?
2.35 v-on?
- 作用:為html標簽綁定事件(添加時間監聽)
- 語法:
語法
v-on:時間名="方法名"
簡寫為 @時間名="..."<button type="button" v-on:click="search">查詢</button>
<button type="button" @click="clear">清空</button>
- 方法需定義,與data平級?
3. Ajax?
- 介紹: Asynchronous JavaScript And XML,異步?的JavaScript和XML
- 作用:
- 數據交換:通過Ajax可以給服務器發送請求,并獲取服務器響應的數據。
- 異步交互:可以在不重新加載整個頁面的情況下,與服務器交換數據并更新部分網頁的技術,如:搜索聯想、用戶名是否可用的校驗等。
XML:(英語:Extensible Markup Language) 可擴展標記語言,本質是一種數據格式,可以用來存儲復雜的數據結構
3.1 同步與異步
- 同步請求
瀏覽器頁面在發送請求給服務器,在服務器處理請求的過程中,瀏覽器頁面不能做其他的操作。只能等到服務器響應結束后才能,瀏覽器頁面才能繼續做其他的操 作?
- 異步請求
瀏覽器頁面發送請求給服務器,在服務器處理請求的過程中,瀏覽器頁面還可以做其他的操作。?
?3.2 Axios
- 介紹: Axious 是對原生的Ajax進行了封裝,簡化書寫,快速開發。
- 官網:Axious
- 步驟:
- 引入Axious的js文件(參考官網)
- 使用Axious發送請求,并獲取響應結果
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios({url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',method:'get'}).then(function(res) {console.log(res.data);}).catch(function(err) {console.log(err);})
?method:請求方式 GET/POST
url:請求路徑
data:請求數據(POST)
params:發送請求時攜帶的url參數,如:...?key=val