Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。这些都和Vue的内置组件息息相关，下面我们重点介绍3个Vue内置组件。

1.动态组件

动态组件适用于多个组件频繁切换的处理。

<component> 用于将一个‘元组件’渲染为动态组件，以 is 属性值决定渲染哪个组件。

用于实现多个组件的快速切换，例如选项卡效果。

is 属性会在每次切换组件时，Vue 都会创建一个新的组件实例。

<div id="app">
    <!-- 按钮代表选项卡的标题功能 -->
    <button
      v-for="title in titles"
      :key="title"
      @click="currentCom = title"
    >
      {{ title }}
    </button>

    <!-- component 设置动态组件 -->
    <component :is="currentCom"></component>
</div>
  
<script>
    // 设置要切换的子组件选项对象
    var ComA = {
      template: `<p>这是组件A的内容：<input type="text"></p>`
    };  
    var ComB = {
      template: `<p>这是组件B的内容：<input type="text"></p>`
    };
    var ComC = {
      template: `<p>这是组件C的内容：<input type="text"></p>`
    };

    new Vue({
      el: '#app',
      data: {
        // 所有组件名称
        titles: ['ComA', 'ComB', 'ComC'],
        // 当前组件名称
        currentCom: 'ComA'
      },
      components: {
        ComA, ComB, ComC
      }
    });
</script>

2.keep-alive 组件

主要用于保留组件状态或避免组件重新渲染。

include 属性用于指定哪些组件会被缓存，具有多种设置方式。

exclude 属性用于指定哪些组件不会被缓存。

max 属性用于设置最大缓存个数。

<div id="app">
    <button 
      v-for="title in titles"
      :key="title"
      @click="currentCom = title"
    >
      {{title}}
    </button>

    <!-- 通过 include 设置哪些组件会被缓存 -->
    <!-- <keep-alive include="ComA,ComB,ComC"> -->
    <!-- <keep-alive :include="['ComA', 'ComB', 'ComC']"> -->
    <!-- <keep-alive :include="/Com[ABC]/"> -->

    <!-- 通过 exclude 设置哪些组件不会被缓存 -->
    <!-- <keep-alive exclude="ComD"> -->
    <!-- <keep-alive :exclude="['ComD']"> -->
    <!-- <keep-alive :exclude="/ComD/"> -->

    
    <keep-alive max="2">
      <!-- 动态组件 -->
      <component :is="currentCom"></component>
    </keep-alive>
</div>

<script>
    var ComA = {
      template: `
        <div>
          请选择主食：
          <br>
          <label for="mantou">馒头：</label>
          <input id="mantou" type="radio" name="zhushi" value="mantou">
          <br>
          <label for="mifan">米饭：</label>
          <input id="mifan" type="radio" name="zhushi" value="mifan">
        </div>
      `
    };
    var ComB = {
      template: `
        <div>
          请选择菜品：
          <br>
          <label for="luobo">炒萝卜：</label>
          <input id="luobo" type="checkbox" name="cai" value="luobo">
          <br>
          <label for="niurou">炒牛肉：</label>
          <input id="niurou" type="checkbox" name="cai" value="niurou">
          <br>
          <label for="pingguo">炒苹果：</label>
          <input id="pingguo" type="checkbox" name="cai" value="pingguo">
        </div>
      `
    };
    var ComC = {
      template: `
        <div>
          请选择汤：
          <br>
          <label for="tang1"">西红柿鸡蛋汤：</label>
          <input id="tang1"" type="radio" name="tang" value="tang1"">
          <br>
          <label for="tang2">紫菜蛋花汤：</label>
          <input id="tang2" type="radio" name="tang" value="tang2">
          <br>
          <label for="tang3">清汤</label>
          <input id="tang3" type="radio" name="tang" value="tang3">
        </div>
      `
    };

    var ComD = {
      template: `
        <div>
          请输入支付信息：
          <br>
          <label for="account"">请输入账号：</label>
          <input id="account"" type="text" name="account">
          <br>
          <label for="password">请输入密码：</label>
          <input id="password" type="password" name="password">
          <br>
        </div>
      
      `
    };

    new Vue({
      el: '#app',
      data: {
        titles: ['ComA', 'ComB', 'ComC', 'ComD'],
        currentCom: 'ComA'
      },
      components: {
        ComA, ComB, ComC, ComD
      }
    });
  </script>

3.过渡组件

用于在 Vue 插入、更新或者移除 DOM 时， 提供多种不同方式的应用过渡、动画效果。其中的典型代表就是transition 组件：

1）用于给元素和组件添加进入/离开过渡:
2）条件渲染 (使用 v-if )
3）条件展示 (使用 v-show )
4）动态组件
5）组件根节点

组件提供了 6个 class，用于设置过渡的具体效果。
1）v-enter
2）v-enter-to
3）v-enter-active
4）v-leave
5）v-leave-to
6）v-leave-active

<style>
    /* 用于设置出场的最终状态 */
    .v-leave-to {
      opacity: 0;
    }

    /* 用于设置过渡的执行过程 */
    .v-leave-active {
      transition: opacity 1s;
    }

    /* 用于设置入场的初始状态 */
    .v-enter {
      opacity: 0;
    }

    /* 用于设置入场的最终状态 */
    .v-enter-to {
      opacity: 0.5;
    }

    /* 用于设置入场的过程 */
    .v-enter-active {
      transition: all 1s;
    }
</style>

<div id="app">
    <button @click="show = !show">切换</button>

    <transition>
      <p v-if="show">hello world</p>
    </transition>
</div>  
<script>
    new Vue({
      el: '#app',
      data: {
        show: true
      }
    });
</script>

我们上面所讲的3个Vue内置组件，是Vue的重要组成部分，这部分组件的缺失将会引起Vue的部分功能瘫痪，在Vue的整体结构中扮演着举足轻重的角色，我们的动力节点在线推出的全新Vue是课程，将Vue的各部分组件拆分讲解，一一击破，帮助我们快速奠定Vue的知识基础，我们学有所成才是对动力节点在线最好的肯定！