表單綁定

表單開發是 Web 開發中最常見的需求之一，幾個基本的 Vue 表單處理如下

事件修飾符

1
2
3
4
5
6

.prevent // 防止做原本預設的動作
.stop // 阻止事件冒泡到父元素，阻止任何父事件處理程序被執行
.self // 只在自己的層級處理自己的程序
.once // 只處理一次
.native // 在元件的根元素上監聽一個原生事件
.sync

Vue3 還有很多新功能官方正在進行中，目前有幾個差不多定案的新功能

Vue 處理共用邏輯的方式

以往用 Vue2 處理共用邏輯有幾種方式

🔸 Mixins
🔸 Higher-order Components ( HOC )
🔸 Renderless Components

但 Vue2 存在著一些問題，命名衝突、產生多餘的元件實體、資料難以追蹤來源，就會有一些狀況產生。
隨著 Vue3 的升級，Vue3 Composition API 解決了 Vue2 的問題

圖片切換範例

API 抽離管理，清楚管理資料

axios create 的物件會變成 axios 的實體
axios interceptors 攔截器，可以做驗證檢查

什麼是 Vuex?

Vuex 是 Vue 應用程式的狀態管理，組件常會跨結構的傳遞狀態、需要全域狀態的管理，用 Vuex 可以更容易的控管你的資料流。

嵌套路由(Nested Routes)

父層有 router-view 可以切換，內層也有自己的 router-view 可以切換

設定動態網址

單頁式應用

single-page application，縮寫 SPA
透過 JS 動態渲染當前頁面來與使用者互動，而非傳統的從伺服器重新載入整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗，使應用程式更像一個桌面應用程式。

router-view

將會改變的區塊使用 router-view 顯示

Slot 插槽

在子元件上面開個洞， 由外層元件將內容置放在至子層元件指定的位置中
可解決樣式一樣，但內容不一樣的組件