---
# System prepended metadata

title: JS Vue(10/10) 五倍紅寶石(第八屆共筆)(2021/8/26)
tags: [JavaScript, Vue]

---

# JS Vue(10/10) 五倍紅寶石(第八屆共筆)(2021/8/26)
詳細內容請洽:
[Kuro 重新認識 Vue.js 008 天絕對看不完的 Vue.js 3.0 指南](https://book.vue.tw/)
## 漸進式框架
有不同階層，Vue 只處理前兩層，其他交由別的工具
Local Storage:高級版 cookie ，容量大很多，可以把資料暫存在瀏覽器(專案可能會用到)

## 指令式渲染 vs. 宣告式渲染
- 指令式渲染：傳統 JS 作法
- 宣告式渲染：Vue，把畫面顯示的邏輯交給template處理
  狀態由script決定，我只要專注在資料上面就好了

## MVVM 模式
Vue2 的 data、Vue3 的 ref 用來存放資料(Model)
method 去做資料雙向的綁定(Data Bindings)

- ref
  如果會更動到裡面的值的時候要用 ref 去包
  function 不用加 ref

## 指令
v-開頭的都稱作指令

- v-bind
  綁定屬性，用來生屬性出來，可不寫 v-bind 簡寫成一個冒號 :
  生內容物出來用 {{}}
  
- v-model
  使用者從 view 寫資料到 model 裡，再反應回 view，進行資料的雙向綁定
  專門拿來跟表單元素做綁定，不能跟div或p之類的元素綁定
  注意多選在 script 給他空陣列、單選給空字串
  select option 表單: v-model 要綁在 select

- v-if
  是元素的新增刪除裡面的東西，true 的時候才會出現
  可以跟 v-else 搭配，但 v-else 只能寫一個

- v-show
  是元素的顯示隱藏，用 css style:display none block 控制

- v-for 
  對陣列跑迴圈，放數字可印出1~那個數字，實作可以拿來做最底下頁數標籤
  搭配 :key 屬性使用，避免Todo-list因為 checkbox 本身無狀態導致的勾選錯誤。
  [Todo-list example](https://stackblitz.com/edit/vue-5hjvyr)

- v-text 
  = innertext

- v-html 
  印出標籤

- v-once
  當他元素裡面的東西寫死後就不會再受到動態更新了

### 修飾子
- .number
  可以轉型變數字

- .lazy
  可以讓他離開焦點的時候才更新，把值寫到對應的地方

- .trim
  可以去掉前後空白字元

- .prevent
  = preventDefault 停止元素的預設事件

- .passive
  停止瀏覽器的預設事件

- stop
  停止事件冒泡，可用在蓋板廣告，點擊廣告時不會關掉廣告

- event.key
  偵測你按的事什麼

- keydown
  按下鍵盤按鈕後要做什麼事

## 函式 vs computed
- 函式
  呼叫要加 ()
- computed 
  - 呼叫不用加 ()
  - 如果重複寫多次{{}}，computed 只會被執行一次
  - 裡面的變數被更新的時候才會被執行，只會把前一次計算結果留下來，不能帶參數

### template
template 標籤：放在瀏覽器上時這個標籤會消失，包東西好用

## Vue 實體生命週期
黑色框框的都是 Hooks function
![](https://i.imgur.com/Mo84g3x.png)

- onBeforeUpdate：資料更新了，畫面還沒更新
- onUpdated：資料更新了，畫面也更新了

## component 上下層
- 父層引入子層 props in
- 子層輸出父層 event out

props 進來沒辦法去修改它，因為他是父層的東西，要傳遞出去交給父層去做
context 指的是 component 本身
emit 用來觸發事件

## JS

  解構，表式展開運算子，拆開物件
- event delegation
  監聽器加在父層，再用 e.Target 選到滑鼠點到的按鈕

  
- 事件傳遞順序有兩種機制：

  事件冒泡 (Event Bubbling)
  從啟動事件的元素節點開始，逐層往上傳遞（簡稱：由內層到外層），直到整個網頁的根節點。
  

  事件捕獲 (Event Capturing)
  機制與事件冒泡相反。（簡稱：由外層到內層）


## 問題
  既然事件傳遞順序有兩種機制，那我怎麼知道事件是依賴哪種機制執行的？

  答案：兩種都會執行。


- 資料來源：https://ithelp.ithome.com.tw/articles/10191970

---

## 補充
deep clone 淺拷貝、深拷貝

[一起來了解 Javascript 中的 Proxy 與 Reflect](https://blog.techbridge.cc/2018/05/27/js-proxy-reflect/)

package.json 內的 scripts 表示可用指令，VScode 可在左下角 npm 指令碼使用指令
如果沒有可右鍵開啟

---

###### tags: `JavaScript` `Vue` 
