1.前端工程化概念
前端工程化是使用軟件工程的方法來單獨解決前端的開發流程中模塊化、組件化、規范化、自動化的問題,其主要目的為了提高效率和降低成本。
前后端分離（前端代碼工程化獨立出來形成一個單獨的app）
1.開發分離
2.部署分離
3.服務器分離
本次技術棧
- ECMAScript6 VUE3中大量使用ES6語法
- Nodejs 前端項目運行環境
- npm 依賴下載工具
- vite 前端項目構建工具
- VUE3 優秀的漸進式前端框架
- router 通過路由實現頁面切換
- pinia 通過狀態管理實現組件數據傳遞
- axios ajax異步請求封裝技術實現前后端數據交互
- Element-plus 可以提供豐富的快速構建網頁的組件倉庫
2.ECMA6Script
- 由于VUE3中大量使用了ES6的語法,所以ES6成為了學習VUE3的門檻之一
2.1es6的變量和模板字符串
-
ES6 新增了
let和const，用來聲明變量,使用的細節上也存在諸多差異 -
let 和var的差別
1、let 不能重復聲明2、let有塊級作用域，非函數的花括號遇見let會有塊級作用域，也就是只能在花括號里面訪問。3、let不會預解析進行變量提升4、let 定義的全局變量不會作為window的屬性5、let在es6中推薦優先使用
- let更像Java中聲明變量的感覺，var可能更加隨意了
// 1.let生命變量不能重復聲明let c =1;c = 100// let c = 99;// 2.let有作用域，只能在花括號訪問{let i = 100}// console.log(i) //ReferenceError: i is not defined// 3.let不會預解析進行變量提升console.log(m)var m=99// console.log(p)// let p=98// ReferenceError: Cannot access 'p' before initialization// at 01let和const.html:27:21// 4.let定義的變量不會作為全局變量 var可以console.log(window.a)// 5.const就是不可修改的let 有點像final修飾的變量一樣,const修飾的量必須賦值// const b =1// b=2// 6.模板字符串對字符串進行處理 ``放入標簽即可，避免了使用單雙引號的難點 拼接和linux一樣let city = "henan"let info = ` <ul><li></li><li></li><li>${city}</li><li></li><li></li></ul>`2.2 es6的解構表達式
-
解構表達式在數組上的使用
-
解構表達式進行 對象取值操作 并賦值給let變量
-
解構表達式抓形參
小結：
解構表達式目的是抓取對象，數組，形參列表的值
支持批量抓取//2. 使用特點 箭頭函數this關鍵字// 在 JavaScript 中，this 關鍵字通常用來引用函數所在的對象，// 或者在函數本身作為構造函數時，來引用新對象的實例。// 但是在箭頭函數中，this 的含義與常規函數定義中的含義不同，// 并且是由箭頭函數定義時的上下文來決定的，而不是由函數調用時的上下文來決定的。// 箭頭函數沒有自己的this，this指向的是外層上下文環境的this
2.3 es6箭頭函數
就是lambda表達式
- 箭頭函數聲明
let fun2 =()=>{}let fun3 = (x)=>{return x+1}
- 2.箭頭函數的各種省略
{-- 小括號可省 參數僅1個-- 花括號可省 代碼僅一行-- return可省 代碼僅一行且帶return
}
-
3.箭頭函數的this
-
意義
普通函數的this表示調用者
箭頭函數this表示外層的this
2.4 rest和spread
rest參數，形參上使用和java可變參數幾乎一樣
<script>// 1 參數列表中多個普通參數 普通函數和箭頭函數中都支持let fun1 = (a,b,c,d=100)=> console.log([a,b,c,d])fun1()// 2 ...作為參數列表,稱之為rest參數 普通函數和箭頭函數中都支持 ,因為箭頭函數中無法使用arguments,rest是一種解決方案// let fun2 = (...args)=>{console.args}// fun2(1,2,3,4,5)// rest參數在一個參數列表中的最后一個只,這也就無形之中要求一個參數列表中只能有一個rest參數let arr =[1,2,3]// let info = ...arr 這樣寫的是錯的 ...arr 表示1，2，3let fun3 = (a,b,c)=>{console.log(a,b,c)}fun3(...arr) //這樣就可以將數組展開 放入方法形參供其使用// 3.spread可以快速合并數組let a =[1,2,3] //總之一個道理...arr表示去括號的操作let b =[1,2,3]let c =[1,2,3]console.log(...a,...b,...c)//1 2 3 1 2 3 1 2 3//js的對象是{}包裹，spread同樣適用</script>
Appendix
普通函數的this表示調用者
箭頭函數this表示外層的this
)
