###### tags: `Front-end Framework`

# Vue.js

**Vue是一種宣告式渲染的框架，不同於命令式的一個口令一個動作的取值塞值，Vue直接把資料與畫面綁定，讓畫面與資料能夠單向或雙向的更新。**

**使用連字號命名法最保險(todo-item)**

**將傳入的 `props` 解構成純值的作法，更新時就不會改寫到外層的資料了。**

---

:::spoiler 基礎知識


**M(Model)**=\[模型\]:以最簡單的格式儲存特定的數據資訊結構。因保持原始的狀態，保證了它的便攜性與可重用性。

**V(View)**=\[視圖\]:是在IOSAPP中用來構建用戶介面(UI)使用的所有物件。泛指UIView類別、和其他提供用戶交互的 UI元件。

**VM(ViewModel)**=\[視圖模型\]:是位於模型與視圖控制器之間，ViewModel將模型中的數據轉換為可讀格式，由視圖控制器(ViewController)在視圖(View)中呈現。

---
## Vue Instance

1. 建立 Vue Instance

下面建立了一個名為 vm 的 Vue Instance，「vm」為 view model 的簡稱。
var vm = new Vue({
  // options
})

2. 傳入選項物件

{
  el: '#id',    // CSS selector 或 HTMLElement 實例
  props: {},    // Array<string> 或 Object
  data: {},     // Object 或 Function
  computed: {}, // { [key: string]: Function | { get: Function, set: Function } }
  methods: {},  // { [key: string]: Function }
  watch: {},    // { [key: string]: string | Function | Object }
  mounted() {}  // Function
  // ...
}

---

* [IT幫幫忙30天，照著做](https://ithelp.ithome.com.tw/articles/10190936)

* [Vue進階](https://book.vue.tw/preface.html#%E9%A0%90%E8%A8%88%E7%9A%84%E5%85%A7%E5%AE%B9)

* [Vue線上測試環境](https://codepen.io/askie/pen/QPJqvP)

---

v-bind Shorthand
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on Shorthand
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

---

### 比較 Filters 和 Computed

個人的理解是：

- Filters 主要用於簡單的文字格式處理，需要在應用程式中重複使用。
- Computed 適合較複雜的資料處理與轉換。
- Methods 主要用來觸法狀態的改變，可能意味著會觸發 Computed 或 Filters 重新計算。
- Filters 和 Computed 應是純粹的輸入輸出，通常不應該在此修改狀態。
- Watch : 當你需要響應更改的數據執行非同步或複雜的計算時，Watch 就非常有用。

v-for VS v-if
-------------

若 v-for 和 v-if 存在同一個節點，v-for 優先於 v-if。

v-show VS v-if
-------------

如果需要非常頻繁地切換，則使用 `v-show`；如果在運行時條件很少改變，則使用 `v-if` 。

v-model VS data binding
------------

負責監聽使用者的輸入事件並更新數據。v-model 會選擇 Vue Instance 中綁定的 data 作為初始值，而不是表單元素(form)中的 value, checked, selected。

-------------

### Event Modifiers(事件修飾符)

* @click.prevent: 後綴修飾符`.prevent`可防止瀏覽器預設行為。

* @click.stop: 後綴修飾符`.stop`可阻止點擊事件往父層傳播。

* @click.capture: 後綴修飾符`.capture`可將事件的傳遞改由父層往子層傳遞。

* @click.self: 後綴修飾符`.self`僅僅觸發自己範圍的事件，不包含子層。

* @click.once: 後綴修飾符`.once`僅在按下第一次時被執行。

### Component
-------------

Component 在 Vue 中扮演很重要的腳色，使我們可封裝重用程式碼。

在 Vue 中元件有兩種註冊方式，`全域`和`區域`。

### extend
-------------

Vue.extend({})
有數個元件的內容很相近，只有少部分內容不一樣的時候，可以使用 extend 來建立重複的部分

### slot
-------------
slot概念是把外層的內容塞進子元件的指定位置裏。跟插槽的字面意思一樣，**前提是：有插口才能插**。子元件需要開一個插口（slot），才可以在外層元件把內容塞進子元件裏。

`v-slot` 只能與 `<template>` 標籤搭配使用。

slot（插槽） 可分為四種：

- slot（插槽）
- Named slot（具名插槽）
- Scoped slot（作用域插槽）
- Dynamic slot（動態插槽）

---

* $nextTick(會等待畫面都更新結束後才執行):使用時機在當狀態更新時，需要手動存取 DOM 的時候，需要確保畫面都已更新完成。

:::