Vue 动态组件、动画、插件

1 动态组件

①简单来说：

就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。

②动态切换：

在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；

改变挂载的组件，只需要修改is指令的值即可。

示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 动态组件</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <button @click='toShow'>点击显示子组件</button>

    <component v-bind:is="which_to_show"></component>

</div>

<script>

// 创建根实例

new Vue({

  el: '#app',

  data:{

      which_to_show:'first'

  },

    methods:{

        toShow:function(){

            var arr = ["first","second","third"];

            var index = arr.indexOf(this.which_to_show);

            if(index<){

                this.which_to_show = arr[index+];

            }else{

                this.which_to_show = arr[];

            }

        }

    },

    components:{

        first:{

            template:'<div>这是子组件1<div>'

        },

        second:{

            template:'<div>这是子组件2<div>'

        },

        third:{

            template:'<div>这是子组件3<div>'

        },

    }

})

</script>

</body>

</html>

2 过渡效果：vue 有两种实现动画的效果。1）CSS动画 2）JS 实现。关键标签：<transition>,<v-if>,<v-show> 属性： mode="out-in" 或者 mode="in-out"

过渡会经过几个状态

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v-是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

2.1 自定义过渡类名，对于使用第三方 CSS 动画库非常方便。比如：Animate.css

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

示例：

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">

  <button @click="show = !show">

    Toggle render

  </button>

  <transition

    name="custom-classes-transition"

    enter-active-class="animated tada"

    leave-active-class="animated bounceOutRight"

  >

    <p v-if="show">hello</p>

  </transition>

</div>

多个组件的过渡简单很多 - 我们不需要使用 key 特性。相反，我们只需要使用动态组件：

3 vue 使用插件

1）使用 npm 命令 install 插件，在项目目录里进行操作。install 命令如果保存需要在 project.json 文件目录里使用。

cnpm install  vue-router --save  //save 表示将对应的插件写到配置文件中 project.json

2）在根组件文件中（main.js）中导入，使用方法

// 导入到根组件中

import VueRouter from ""

// 通过全局方法 Vue.use() 使用插件：

Vue.use(VueRouter)