Vue2學習（3）

子組件索引

儘管有 props 和 events，可是有時仍然須要在 JavaScript 中直接訪問子組件。爲此可使用 ref 爲子組件指定一個索引 ID。例如：

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile

當 ref 和 v-for 一塊兒使用時，ref 是一個數組，包含相應的子組件。

字符串模板(string template)

• JavaScript 內聯模板字符串

• .vue 組件

  非字符串模板(non-string template)

• DOM 模板

單元素/組件的過渡

Vue 提供了 transition 外層包裹容器組件(wrapper component)，能夠給下列情形中的任何元素和組件添加進入/離開(enter/leave)過渡

• 條件渲染（使用 v-if）
• 條件展現（使用 v-show）
• 動態組件
• 組件根節點

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

render

每一個元素都是一個節點。每一段文字都是一個節點。甚至註釋也都是節點！節點只是頁面的一部分。正如在一棵家譜樹中同樣，每一個節點均可以有子節點（也就是說，每一個節點均可以包含多個子節點）。

有效地更新全部這些節點多是很困難的，但幸運的是，你無需手動執行。相反，只需在 Vue 模板中，在頁面中添加你須要用到的 HTML：

<h1>{{ blogTitle }}</h1>

或者經過一個 render 函數：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

在這兩種場景中，Vue 會自動保持頁面更新，更確切地說，在 blogTitle 修改時，也一樣可以及時更新。

virtual DOM

Vue 經過實現一個 virtual DOM，來跟蹤那些「真正須要對 DOM 所作的修改」。仔細看看這一行：

return createElement('h1', this.blogTitle)

createElement 實際返回的是什麼呢？準確地說，返回的並不是一個真正的 DOM 元素。可能更確切地說，應該將其命名爲 createNodeDescription（譯註：createNodeDescription，建立節點描述），包含「哪些節點應該由 Vue 渲染在頁面上」的相關描述信息，也包括全部子節點的相關描述。咱們將以上這個節點描述稱爲 「virtual node」（譯註：virtual node，虛擬節點），一般縮寫爲 VNode。」virtual DOM」 就是由 Vue 組件樹構建出來的，被稱爲整個 VNodes 樹。