子组件索引
尽管有 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 树。