# 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

- 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`