Vue第三天

插槽（具名插槽）

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。

<navigation-link url="/profile"> Your Profile </navigation-link> <a v-bind:href="url" class="nav-link" > <slot></slot> </a>

然后渲染出来：

<navigation-link url="/profile"> <!-- 添加一个 Font Awesome 图标 --> <span class="fa fa-user"></span> Your Profile </navigation-link>

过渡和动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：

1、在 CSS 过渡和动画中自动应用 class 2、可以配合使用第三方 CSS 动画库，如 Animate.css 3、在过渡钩子函数中使用 JavaScript 直接操作 DOM 4、可以配合使用第三方 JavaScript 动画库，如 Velocity.js

这里是点击淡入淡出的效果

<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> new Vue({ el: '#demo', data: { show: true } }) <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; } </style>

自定义过渡的类名

1、enter-class 2、enter-active-class 3、enter-to-class (2.1.8+) 4、leave-class 5、leave-active-class 6、leave-to-class (2.1.8+) 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。