File tree Expand file tree Collapse file tree 2 files changed +6
-7
lines changed Expand file tree Collapse file tree 2 files changed +6
-7
lines changed Original file line number Diff line number Diff line change @@ -471,14 +471,13 @@ Vue.component('my-component', {
471
471
472
472
在添加 ` functional: true ` 之后,锚点标题组件的 render 函数之间简单更新增加 ` context ` 参数,` this.$slots.default ` 更新为 ` context.children ` ,之后` this.level ` 更新为 ` context.props.level ` 。
473
473
474
- 函数化组件只是一个函数 ,所以渲染开销也低很多。但同样它也有完整的组件封装,你需要知道这些, 比如 :
474
+ 因为函数化组件只是一个函数 ,所以渲染开销也低很多。在作为包装组件时它们也同样非常有用,比如,当你需要做这些时 :
475
475
476
476
477
477
- 程序化地在多个组件中选择一个
478
478
- 在将 children, props, data 传递给子组件之前操作它们。
479
479
480
480
481
-
482
481
下面是一个依赖传入 props 的值的 ` smart-list ` 组件例子,它能代表更多具体的组件:
483
482
484
483
Original file line number Diff line number Diff line change @@ -83,12 +83,12 @@ new Vue({
83
83
</style >
84
84
{% endraw %}
85
85
86
- 元素封装成过渡组件之后,在遇到插入或删除时, Vue 将
86
+ 当插入或删除包含在 ` transition ` 组件中的元素时, Vue 将会做以下处理:
87
87
88
88
89
- 1 . 自动嗅探目标元素是否有 CSS 过渡或动画,并在合适时添加 /删除 CSS 类名。
89
+ 1 . 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加 /删除 CSS 类名。
90
90
91
- 2 . 如果过渡组件设置了过渡的 [ JavaScript 钩子函数] ( #JavaScript-Hooks ) ,会在相应的阶段调用钩子函数 。
91
+ 2 . 如果过渡组件提供了 [ JavaScript 钩子函数] ( #JavaScript-Hooks ) ,这些钩子函数将在恰当的时机被调用 。
92
92
93
93
3 . 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作(插入/删除)在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,与 Vue,和Vue的 ` nextTick ` 概念不同)
94
94
@@ -976,12 +976,12 @@ new Vue({
976
976
目前为止,关于过渡我们已经讲到:
977
977
978
978
- 单个节点
979
- - 一次渲染多个节点
979
+ - 同一时间渲染多个节点中的一个
980
980
981
981
那么怎么同时渲染整个列表,比如使用 ` v-for ` ?在这种场景中,使用 ` <transition-group> ` 组件。在我们深入例子之前,先了解关于这个组件的几个特点:
982
982
983
983
- 不同于 ` <transition> ` , 它会以一个真实元素呈现:默认为一个 ` <span> ` 。你也可以通过 ` tag ` 特性更换为其他元素。
984
- - 元素 ** 一定需要 ** 指定唯一的 ` key ` 特性值
984
+ - 内部元素 ** 总是需要 ** 提供唯一的 ` key ` 属性值
985
985
986
986
### 列表的进入和离开过渡
987
987
You can’t perform that action at this time.
0 commit comments