1

1预期：string | Object (组件的选项对象) 用于动态组件且基于 DOM 内模板的限制来工作。 示例： <!-- 当 `currentView` 改变时，组件也跟着改变 --> <component v-bind:is="currentView"></component> <!-- 这样做是有必要的，因为 `<my-row>` 放在一个 --> <!-- `<table>` 内可能无效且被放置到外面 --> <table> <tr is="my-row"></tr> </table> 更多的使用细节，请移步至下面的链接。

• See also：
  • 动态组件
  • DOM 模板解析说明

slot 废弃

推荐 2.6.0 新增的 v-slot。

• 预期：string 用于标记往哪个具名插槽中插入子组件内容。
• 参考：具名插槽

slot-scope 废弃

推荐 2.6.0 新增的 v-slot。

• 预期：function argument expression
• 用法： 用于将元素或组件表示为作用域插槽。attribute 的值应该是可以出现在函数签名的参数位置的合法的 JavaScript 表达式。这意味着在支持的环境中，你还可以在表达式中使用 ES2015 解构。它在 2.5.0+ 中替代了 scope。 此 attribute 不支持动态绑定。
• 参考：作用域插槽

scope 移除

被 2.5.0 新增的 slot-scope 取代。推荐 2.6.0 新增的 v-slot。

用于表示一个作为带作用域的插槽的 <template> 元素，它在 2.5.0+ 中被 slot-scope 替代。

• 用法： 除了 scope 只可以用于 <template> 元素，其它和 slot-scope 都相同。

内置的组件

component

• Props：
  • is - string | ComponentDefinition | ComponentConstructor
  • inline-template - boolean
• 用法： 渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。 <!-- 动态组件由 vm 实例的 `componentId` property 控制 --> <component :is="componentId"></component> <!-- 也能够渲染注册过的组件或 prop 传入的组件 --> <component :is="$options.components.child"></component>
• 参考：动态组件

transition

• Props：
  • name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 "v"
  • appear - boolean，是否在初始渲染时使用过渡。默认为 false。
  • css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
  • type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
  • mode - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
  • duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。
  • enter-class - string
  • leave-class - string
  • appear-class - string
  • enter-to-class - string
  • leave-to-class - string
  • appear-to-class - string
  • enter-active-class - string
  • leave-active-class - string
  • appear-active-class - string
• 事件：
  • before-enter
  • before-leave
  • before-appear
  • enter
  • leave
  • appear
  • after-enter
  • after-leave
  • after-appear
  • enter-cancelled
  • leave-cancelled (v-show only)
  • appear-cancelled
• 用法： <transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。 <!-- 简单元素 --> <transition> <div v-if="ok">toggled content</div> </transition> <!-- 动态组件 --> <transition name="fade" mode="out-in" appear> <component :is="view"></component> </transition> <!-- 事件钩子 --> <div id="transition-demo"> <transition @after-enter="transitionComplete"> <div v-show="ok">toggled content</div> </transition> </div> new Vue({ ... methods: { transitionComplete: function (el) { // 传入 'el' 这个 DOM 元素作为参数。 } } ... }).$mount('#transition-demo')
• 参考：过渡：进入，离开和列表

transition-group

• Props：
  • tag - string，默认为 span
  • move-class - 覆盖移动过渡期间应用的 CSS 类。
  • 除了 mode，其他 attribute 和 <transition> 相同。
• 事件：
  • 事件和 <transition> 相同。
• 用法： <transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的 DOM 元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。 注意，每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作 <transition-group> 支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。如果 CSS transform property 是“可过渡”property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。 <transition-group tag="ul" name="slide"> <li v-for="item in items" :key="item.id"> {{ item.text }} </li> </transition-group>
• 参考：过渡：进入，离开和列表

keep-alive

• Props：
  • include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
  • exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
  • max - 数字。最多可以缓存多少组件实例。
• 用法： <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会