Vue.js 與 Vuex 前端開發實戰 part.2 筆記

[mvpdw06]

Vue Component

可用 X-Template 來指定 HTML Template，一定要有 id，才能用 id 來找到該元件

<script type="text/x-template" id="myComponent">
  <div>
    My component!
  </div>
</script>

<script>
  // register global component!
  Vue.component('my-component', {
    template: '#myComponent'
  })
</script>

Component 的 data

component 的 data 必須要是 function return data object

因 JavaScript 切分變數有效範圍的最 單位為 function， 內的 data 屬性必須是 function 的形式 輸出。

v-for 的 key

key 的作用，有 key 會移除 DOM 更換新的 node，沒有則不會做這件事，除非數量不同

Component 的 props

• 可驗證或有預設值
• v-model 從父層下來的資料會變成單向資料流，要更新回父元件，父元件需註冊 $on 事件，子元件需發送 #emit 事件，作為溝通橋樑（千萬不要直接拿 $parent 實體操作）。
• 多層 component 時，可透過 event bus 作為元件之間的直接溝通，event bus 是一個沒有 DOM 的 Vue
  實體，需要被更新的 component 跟 event bus 註冊 $on 事件，需要送出更新的 component 對於 event bus 送出 $emit 事件。

Component 動態切換

• :is 屬性來決定是否該產生此 component，出現與消失會經過 life cycle。
• 可利用 <keep-alive></keep-alive> 來避免重新 mount，並在顯示隱藏時經過 activated 與 deactivated 這兩個 life cycle。

Slot 可在子元件身上開洞，讓父元件決定內容

• 可用 slot="mySlot1" 來指定多個 slot
• child 身上的 <slot></slot> 可由子元件決定預設顯示資料（預設時，slot 綁有變數會吃 chlid 的）

Vue 檔案

• 有 template、script、style 這三個區域
• style 可以是 scoped!!!!!

js object clone 最快的方法是 JSON.stringfy 再轉回來，但前提是不能有 function