tags: `Front-end Framework`

Vue.js

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

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

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

基礎知識

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

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

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

Vue Instance

建立 Vue Instance

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

傳入選項物件

{
  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
  // ...
}

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 的時候，需要確保畫面都已更新完成。

tags: Front-end Framework