动态组件

动态组件

有的时候,我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理,但是会比较麻烦,vue 提供了一个更方便的方式来处理这种情况

component 组件

componentvue 内置的一个组件,它提供一个 is 属性用来动态渲染不同的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .current {
            background: yellow;
        }
    </style>
</head>
<body>

    <div id="app">
        <button @click="goto('InBox')" :class="{'current': currentComponent==='InBox'}">收邮件</button>
        <button @click="goto('PostMail')" :class="{'current': currentComponent==='PostMail'}">发邮件</button>
        <button @click="goto('RecycleBin')" :class="{'current': currentComponent==='RecycleBin'}">垃圾箱</button>
        <hr>
        <component :is="currentComponent"></component>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>

        const InBox = {
            data() {
                return {
                    items: [
                        '111111',
                        '22222222222',
                        'aaaaaaaa',
                        '3333333'
                    ]
                }
            },
            template: `
                <div>
                    <ul>
                        <li v-for="item of items">
                            <input type="checkbox" />
                            {{item}}
                        </li>
                    </ul>
                </div>
            `,
            created() {
                console.log('InBox:created');
            },
            destroyed() {
                console.log('InBox:destroyed');
            }
        }
        const PostMail = {
            template: `
                <div>PostMail</div>
            `,
            created() {
                console.log('PostMail:created');
            },
            destroyed() {
                console.log('PostMail:destroyed');
            }
        }
        const RecycleBin = {
            template: `
                <div>RecycleBin</div>
            `,
            created() {
                console.log('RecycleBin:created');
            },
            destroyed() {
                console.log('RecycleBin:destroyed');
            }
        }
        
        let app = new Vue({
            el: '#app',
            data: {
                currentComponent: 'InBox'
            },
            components: {
                InBox,
                PostMail,
                RecycleBin
            },
            methods: {
                goto(target) {
                    this.currentComponent = target;
                }
            }
        });
    </script>
</body>
</html>

我们会发现,当组件切换的时候,都会触发组件的销毁和重建。首先,性能不好。其次,会丢失组件状态

keep-alive 组件

当在这些组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。keep-alive 是一个内置容器组件, 使用 >keep-alive 以后,内部包含的组件将增加 激活失活/冻结 的状态

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

生命周期

使用了 keep-alive 的组件会触发 activateddeactivated 两个生命周期函数

activated

keep-alive 组件激活时调用

deactivated

keep-alive 组件停用时调用

插件

插件通常是用来给 vue 提供扩展功能的一种方式

  • Vue 添加属性和方法
  • Vue 实例 添加属性和方法
  • 添加全局资源:指令、过滤器、组件等
  • 添加配置选项

安装插件

通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成

Vue.use(插件);

如果插件是一个对象,必须提供 install 方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }

  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })

  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

实例

axios

https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js

function http(_Vue, options) {
  _Vue.prototype.$http = axios;
}

Vue.use(http);

// or

function http(_Vue, options) {
  _Vue.prototype.$http = adaptor.http;
}

Vue.use(http, {adaptor: axios});

new Vue({
  el: '#app',
  data: {
  },
  async created() {
    // let rs = await axios({
    //     method: 'post',
    //     url: 'https://api.apiopen.top/musicRankings'
    // });
    // console.log(rs);

    let rs = await this.$http({
      method: 'post',
      url: 'https://api.apiopen.top/musicRankings'
    });
    console.log(rs);
  }
});

修改 prototype 会修改整个 Vue 原型链

另外一种方式

function http(_Vue) {
  _Vue.mixin({
    beforeCreate() {
      if ( this.$options.adaptor ) {
        this.$http = this.$options.adaptor;
      }
      if ( this.$options.parent && this.$options.parent.$http ) {
        this.$http = this.$options.parent.$http;
      }
    }
  });
}

Vue.use(http);

new Vue({
  el: '#app',
  adaptor: axios,
  components: {
    'my-component': myComponent
  }
})

动画

vue 中给组件或元素添加动画的方式可以分为多种,但总体无非还是通过 cssJavaScript 来进行处理

CSS

通过 css 添加动画的方式特别的简单,只需要利用 css 中的 transition 就可以做到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
            transition: .5s all;
        }
        .js_animation_box.end {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <button id="js_animation_btn">原生动画</button>
    <div id="js_animation_box" class="js_animation_box"></div>
    <script>
        // 原生 + css
        let jsAnimationBtn = document.querySelector('#js_animation_btn');
        let jsAnimationBox = document.querySelector('#js_animation_box');

        jsAnimationBtn.onclick = function() {
            jsAnimationBox.classList.add('end');
        }
    </script>
</body>
</html>

JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <button id="js_animation_btn">原生动画</button>
    <div id="js_animation_box" class="js_animation_box"></div>
  	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script>
				// jq
        $('#js_animation_btn').on('click', function() {
            $('#js_animation_box').animate({
                width: 200,
                height: 200
            }, .5);
        });
    </script>
</body>
</html>

vue 中的动画处理

vue 中基本和上面的处理方式是一样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
            transition: .5s all;
        }
        .js_animation_box.end {
            width: 200px;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isEnd = !isEnd">vue动画</button>
        <div :class="['js_animation_box', isEnd ? 'end' : '']"></div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isEnd: false
            }
        });
    </script>
</body>
</html>
动画生命周期

vue 为元素和组件的几个特殊的情况提供了对应的处理方式

  • 条件渲染 (使用 v-if)
  • 条件展示 (使用 v-show)
  • 动态组件
  • 组件根节点
transition 组件

通过 transition 组件包裹的元素或组件,会在上面定义的几个场景中触发过渡,并添加指定的 class 样式

过渡类名
  • v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除
  • v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数
  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除
  • v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数
  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y5o1YQ7f-1590901832457)(assets/transition.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .js_animation_box {
            width: 100px;
            height: 100px;
            background: red;
        }

        .slide-fade-enter-active, .slide-fade-leave-active {
            transition: all 5s ease;
        }
        .slide-fade-enter {
            width: 0;
            height: 0;
        }
        .slide-fade-enter-to {
            width: 100px;
            height: 100px;
        }
        .slide-fade-leave {
          	/*可以和slide-fade-enter-to合并*/
            width: 100px;
            height: 100px;
        }
        .slide-fade-leave-to {
          	/*可以和slide-fade-enter合并*/
            width: 0;
            height: 0;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="isShow = !isShow">vue动画</button>
        <transition name="slide-fade">
            <div v-if="isShow" class="js_animation_box"></div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值