目錄
五、前端基礎
1.技術棧簡介
2.ES6
(1).let%const
(2).解構表達式
(3).字元串擴充
(4).函數優化
(5).對象優化
(6).map和reduce方法
(7).Promise
(8).子產品化
3.Vue
(1).MVVM思想
(2).雙向綁定
(3).指令
(4).計算屬性和監聽器
(5).過濾器
(6).元件化
(7).生命周期和鈎子函數
五、前端基礎
1.技術棧簡介
2.ES6
ES6全稱ECMAScript6.0是JavaScript語言的下一代标準。
ECMAScript是浏覽器腳本語言的規範，而我們熟悉的各種js語言，如JavaScript則是規範的具體實作。
建立一個ES6檔案夾，shift+！回車快速生成模闆
(1).let%const
- let：聲明的變量有嚴格局部作用域，隻能一次聲明變量，不會變量提升
- var：聲明的變量往往會越域，可以多次聲明變量，會變量提升
- const：聲明常量，聲明之後不允許改變。一旦聲明必須初始化，否則會報錯
//作用域
<script>
{
let a = 1;
var b = 1;
}
console.log(a);//ReferenceError: a is not defined
console.log(b);
</script>
//多次聲明
<script>
let a = 1;
let a = 2;//let不能多次聲明
var b = 1;
var b = 2;
</script>
//變量提升
<script>
console.log(a);//undefined
let a = 1;
console.log(b);//ReferenceError: a is not defined
var b = 2;
</script>
(2).解構表達式
數組解構
<script>
let arr = [1,2,3];
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];
let [a,b,c] = arr;
console.log(a,b,c);//1 2 3
</script>
對象解構
<script>
const person = {
name: "kaigu",
age: 8,
language: ['tmd','genwoa','wsmbugenwoa']
}
//const name = person.name;
//const age = person.age;
//const language = person.language;
const {name,age,language} = person;
//const {name:abc,age,language} = person;
//console.log(abc,age,language);
console.log(name,age,language);
</script>
(3).字元串擴充
(4).函數優化
函數參數預設值
不定參數
箭頭函數
(5).對象優化
(6).map和reduce方法
map
reduce
(7).Promise
Promise非常符合人類的思考方式，代碼很清晰，讓人一目了然。
不使用Promise：複雜的嵌套模式
Promise可以封裝異步操作
Promise優化
(8).子產品化
子產品化就是把代碼進行拆分，友善重複利用。類似java中的導包。
- export指令：用于規範子產品的對外接口
- import指令：用于導入其他子產品提供的功能
export 不僅可以導出對象，一切js變量都可以導出。如：基本類型變量、函數、數組、對象
調用
更加簡便的導出方法
3.Vue
(1).MVVM思想
- M：即Model，模型，包括資料和一些基本操作
- V：即View，視圖，頁面渲染結果
- VM：即View-Model，模型與視圖間的雙向操作（無需開發人員幹涉）
初始化項目
npm init -y 安裝vue
npm install vue (2).雙向綁定
模型變化----->視圖變化
視圖變化------>模型變化
(3).指令
v-text\v-html
v-bind
v-model
v-on
v-for
v-if\v-show
v-else\v-else-if
(4).計算屬性和監聽器
計算屬性
偵聽器
(5).過濾器
(6).元件化
元件也是一個vue執行個體
在vue執行個體中能編輯的data、方法等都可以在元件裡編輯，唯一不同是vue使用template來指定元件
全局元件
局部元件
(7).生命周期和鈎子函數
在vue執行個體整個聲明周期裡的每個生命階段中都會有一個鈎子函數來擷取其生命狀态。