vue.js过度&动画、混入&插件

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，直接发布的对象。