1.vue 过度动画
1.过度
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。
语法格式：
<transition name = "nameoftransition"> <div></div> </transition>
例如：
<div id="databinding"> <button v-on:click="show = !show">点我</button> <transition name="fade"> <p v-show="show" v-bind:style="styleobj">动画实例</p> </transition> </div> <script type="text/javascript"> var vm = new Vue({ el: '#databinding', data: { show: true, styleobj: { fontSize: '30px', color: 'red' } }, methods: {} }); </script>
实例中通过点击 "点我" 按钮将变量 show 的值从 true 变为 false。如果为 true 显示子元素 p 标签的内容。
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：
2.CSS过度
通常我们都使用 CSS 过渡来实现效果。
<div id="databinding"> <button v-on:click="show = !show">点我</button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> <script type="text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>
3.CSS动画
CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
<div id="databinding"> <button v-on:click="show = !show">点我</button> <transition name="bounce"> <p v-if="show">vue 6！！！</p> </transition> </div> <script type="text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>
4.自定义过渡的类名
我们可以通过以下特性来自定义过渡类名：
enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)
自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。
<div id="databinding"> <button v-on:click="show = !show">点我</button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight"> <p v-if="show">vue 6！！！</p> </transition> </div> <script type="text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>
5. 同时使用过渡和动画
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。
但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
6. 显性的过渡持续时间
可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
7. 初始渲染的过渡 appear
可以结合钩子和上面的自定义class属性使用。
<transition appear> <!-- ... --> </transition>
8.JS钩子
可以在属性中声明 JavaScript 钩子
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition> // ... methods: { // -------- // 进入中 // -------- beforeEnter: function (el) { // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 enter: function (el, done) { // ... done() }, afterEnter: function (el) { // ... }, enterCancelled: function (el) { // ... }, // -------- // 离开时 // -------- beforeLeave: function (el) { // ... }, // 此回调函数是可选项的设置 // 与 CSS 结合时使用 leave: function (el, done) { // ... done() }, afterLeave: function (el) { // ... }, // leaveCancelled 只用于 v-show 中 leaveCancelled: function (el) { // ... } }
这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
一个使用 Velocity.js 的简单例子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> </head> <body> <div id="databinding"> <button v-on:click="show = !show">点我</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false"> <p v-if="show">VUE 666666666！！！</p> </transition> </div> <script type="text/javascript"> new Vue({ el: '#databinding', data: { show: false }, methods: { beforeEnter: function(el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function(el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function(el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } }) </script> </body> </html>
9. 多个元素过度
我们可以设置多个元素的过渡，一般列表与描述：需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。
Vue还提供了过度模式来实现不同的过度效果：
in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。
<div id="databinding"> <button v-on:click="show = !show">点我</button> <transition name="bounce" mode="in-out"> <p v-if="show" key="A">vue 6A！！！</p> <p v-else key="B">vue 6B！！！</p> </transition> </div> <script type="text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>
2.混入
混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
<div id="databinding"></div> <script type="text/javascript"> var vm = new Vue({ el: '#databinding', data: {}, methods: {}, }); // 定义一个混入对象 var myMixin = { created: function() { this.startmixin() }, methods: { startmixin: function() { document.write("欢迎来到混入实例"); } } }; var Component = Vue.extend({ mixins: [myMixin] }) var component = new Component(); </script>
2.1选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。
<div id="databinding"></div> <script type="text/javascript"> var mixin = { created: function() { document.write('混入调用' + '<br>') } } new Vue({ mixins: [mixin], created: function() { document.write('组件调用' + '<br>') } }); </script>
结果：
混入调用
组件调用
如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。如下实例，Vue 实例与混入对象的 methods 选项都包含了相同的函数：
<div id="databinding"></div> <script type="text/javascript"> var mixin = { methods: { hellworld: function() { document.write('HelloWorld 方法' + '<br>'); }, samemethod: function() { document.write('Mixin：相同方法名' + '<br>'); } } }; var vm = new Vue({ mixins: [mixin], methods: { start: function() { document.write('start 方法' + '<br>'); }, samemethod: function() { document.write('Main：相同方法名' + '<br>'); } } }); vm.hellworld(); vm.start(); vm.samemethod(); </script>
结果：
HelloWorld 方法
start 方法
Main：相同方法名
2.2全局混入
也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。
<script type="text/javascript"> // 为自定义的选项 'myOption' 注入一个处理器。 Vue.mixin({ created: function() { var myOption = this.$options.myOption if (myOption) { document.write(myOption) } } }) new Vue({ myOption: 'hello!' }) // => "hello!" </script>
3.插件
插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：
添加全局方法或者属性。如: vue-custom-element
添加全局资源：指令/过滤器/过渡等。如 vue-touch
通过全局混入来添加一些组件选项。如 vue-router
添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
1.使用插件
通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：
// 调用 `MyPlugin.install(Vue)` Vue.use(MyPlugin) new Vue({ // ...组件选项 })
也可以传入一个可选的选项对象：
Vue.use(MyPlugin, { someOption: true })
Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。
Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。
2.开发插件
Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：(我自己测试调用Vue.use的时候会调用Install方法，多次调用只会调用1次)
例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> 5 isNotNull: {{ isNotNull(5) }} <br/> 5 double is: {{ double(5) }} <br/> <input v-focus /> <input /> </div> <script> let MyPlugin = {}; MyPlugin.install = function(Vue, options) { console.log(options); // 1. 添加全局方法或属性 Vue.isNotNull = function(value) { return value ? false : true; } // 2. 添加全局指令 Vue.directive('focus', { inserted: function(el) { el.focus(); } }) // 3. 注入混入:一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。 Vue.mixin({ created: function() { // $options用于获取自定义的属性 var myProp = this.$options.myProp; if(myProp) { document.write("myProp: " + myProp); } } }) // 4. 添加实例方法 Vue.prototype.$double = function(value) { return value * 2; } } Vue.use(MyPlugin, { name: "test" }); var app = new Vue({ el: '#app', myProp: "我的属性", data: { msg: 'Hello Vue!' }, methods: { isNotNull(value) { return Vue.isNotNull(value); }, double(value) { return this.$double(value); } } }) </script> </body> </html>
结果：
控制台：
在使用过程中发现：使用一些第三方组件需要用Vue.use，比如Vue.use(VueRouter)、Vue.use(MintUI)。但是用 axios时，就不需要用 Vue.use(axios)，就能直接使用。因为axios没有Install，直接发布的对象。