我要悄悄的學Vue，然後找乙份工作先 3

這是學習vue的第三天，很快的，不知道是不是我覺得這個vue的語法

感覺很像django的模板語法一樣，個人感覺很舒服，都可以直接套過來使用就行了.

條件判斷

vue裡面也有條件判斷，這看起來和其他的框架語言是一致的.

v-if

v-if = 「表示式/布林值」

如果表示式計算為true, 那麼dom就會將這個標籤渲染出來

如果表示式計算為false, 那麼dom就不會渲染出來

v-else

與 v-if 一起用，用於條件為 false 執行的函式

v-else-if

用於第三個選擇情況下

eg:

使用 key 去管理復用的元素

比如這個案例:

帳號登陸: 郵箱登陸: 切換登陸方式個人理解: 在這2個條件下，如果發生布林值的變化， vue內部會就地更新這些東西，比如說這些 input 標籤，如果不加key值，那麼vue會選擇直接用上面生成的，簡單的對比一下屬性更新就完事了，如果加了 key，且這個key得保持唯一性，那麼vue內部就會進行標籤的替換， vue官網建議我們新增這個key屬性，所以也要加. 而沒有新增 key屬性的標籤會被高效的復用.

v-if 和 v-show 的區別

v-if 根據布林值來決定是否渲染出來這個標籤

v-show 是更改元素的 display 樣式，將其顯示還是隱藏.

如果效果切換很頻繁，推薦使用 v-show 來進行判斷，這樣會加快執行的效率

其他情況下，我們還是使用v-if進行邏輯判斷，然後是否渲染.

迴圈遍歷

同樣，vue裡面也是可以迴圈遍歷，可以遍歷的包括陣列, 物件…

這個很像 python 的 for…in 遍歷

使用場景：那些標籤需要重複n次，那麼就在這個標籤的第乙個裡面加上v-for

v-for 遍歷陣列

num = [1, 2, 3]

- 常規遍歷: v-for = "n in num"
- 拿到值和索引值:  v-for = "(n, index) in num"

v-for 遍歷物件

obj =  ,
- 常規遍歷:  v-for = "item  in obj"
- 拿到值和鍵  v-for = "(item, key) in obj"
- 拿到值，鍵和索引值  v-for="(item, key, index) in obj"
綜合遍歷:
obj = [
,  ,
,]

v-for 中繫結 :key 的區別

個人理解：

key的作用，同樣也是打斷vue的高效復用問題，如果不加的key屬性的話，

vue會選擇就地更新這些改變的元素，而不會選擇移動元素，場景一般在vue管理的陣列，

然後你去操作這個陣列，之後vue管理的虛擬dom是如果改變的，

為了給 vue 乙個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素

，需要為每項提供乙個唯一 key, 這樣就會不會就地更新了.

響應式的js陣列方法

對陣列的操作方法中，有些是響應式的，就是更改之後頁面也會隨之變化

記錄一下這些方法:

// 1. push 是響應式的  我們來試試看  (在最後面新增元素)
// this.letter.push("f");
// 2. pop  是響應式的 我們來試試看  (刪除最後面的元素)
// this.letter.pop();
// 3. 通過元素下標操作不是響應式的
// this.letter[0] = "不是的";
// 4. shift  是響應式的   (刪除最前面的元素)
// this.letter.shift();
// 5. unshift 是響應式的，  (在最前面新增元素)
// this.letter.unshift("i will sit first !");
// 6.  splice   是響應式的，  而且這個方法 他有三個功能
//  splice(開始位置， 刪除個數， 備選元素)
// 第乙個引數為開始點， 對應索引下標
// 當第二個引數， 沒有的時候， 表示刪除功能， 且刪除 start 後面所有的
// 當第二個引數， 有的時候， 且只有第一和第二個引數的時候， 表示刪除， 到第二個元素位置
// 當第二個引數為0的時候， 表示插入， 需要新增第三個引數作為插入的元素， 元素可以多個，逗號隔開
// 當第二個引數， 有且不為0的時候， 新增第三個引數，且第三個引數長度大於第二個引數， 表示替換， 第三個引數表示替換的元素
// 替換可以理解為， 先刪除， 在新增
// this.letter.splice(1);
// this.letter.splice(1, 0, "f", 'g'); // 新增
// this.letter.splice(1, 2, 'f', 'g')    // 替換 
// 7. sort  是響應式的， 排序
// this.letter.sort();
// 8. reverse 反轉陣列  也是響應式的
// this.letter.reverse();
// 9. 使用vue內部的乙個方法   這個辦法是vue封裝在它內部的乙個 
// vue.set(物件，索引值， 備選的值 )
0, "hello world");

js的高階函式-(函式式程式設計)

好像不僅僅是js中存在這些高階函式， 在其他語言中， 這些函式也是有的.
這裡我跟著老師，再次學習了filter, map, reduce 這些高階函式
// let num = [1, 2, 3, 4, 5, 6, 7, 8];
// 需求1. 找出這個陣列裡面所有的偶數
//  常規方法
// let newnum =;
// for (const n of num) 
// }
// 高階函式 filter 方法
// let newnum = num.filter(function(n))
// let newnum = num.filter(n => n%2 ==0 );
// console.log(newnum);
// 需求2. 將所有偶數擴大2倍
//  常規方法
// let newnum =;
// for (const n of num) 
// }
// 高階函式 map 的使用
// let newnum = num.map(function(n));
// 需求3. 合計所有數
//  常規方法
// let result = 0;
// for (const n of num) 
// }
// 高階函式 reduce 的使用
// let result = num.reduce(function(privalue, n), 0)
// console.log(result);
// 合起來使用就是這樣的鏈式   
// let result = num.filter(n => n % 2 == 0).map( n => n ** 2).reduce((privalue, n) => privalue + n ,0);
// let result = num.filter(function(n)).map(function(n)).reduce(function(privalue, n) ,0)
// console.log(result);

包括條件判斷，迴圈遍歷，響應式的js陣列方法，以及js的高階函式，最後實現乙個小案例，圖書商店.

小案例，圖書商店

我要悄悄的學Vue，然後找乙份工作先 3

我要悄悄的學Vue, 然後找乙份工作 5

我要悄悄的學Vue，然後找乙份工作先 4

請允許我悄悄的愛你，好嗎？

我要悄悄的學Vue，然後找乙份工作先 3

我要悄悄的學Vue, 然後找乙份工作 5

我要悄悄的學Vue，然後找乙份工作先 4

請允許我悄悄的愛你，好嗎？

相關推薦