前言

Vue概念：
Vue中提供有一个内置的组件叫做 component 。这个组件就是动态组件，它需要设置 is 属性。is 属性的值就是需要渲染的组件的名字

1. 引入 vue 链接
https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.js"><

2. 创建组件（三个选项需要做三个小组件）。

          Vue.component("home", {
        template: `
          <div>
            <h1>home</h1>
          </div>
        `,
      });
     Vue.component("list", {
        template: `
          <div>
            <h1>list</h1>
          </div>
        `,
      });
      Vue.component("about", {
        template: `
          <div>
            <h1>about</h1>
          </div>
        `,
      });

3. 创建实例

          var vm = new Vue({
      //实例的id:app
        el: "#app",
        //data的数据是为了模拟一个选中时用的数据
        data: {
          curPage: "home",
        },
      });

4. 调用组件与插件

        <div id="app">
    //这里的css是一个高亮的样式用了v-bind做了绑定与判断
    //@click自定义事件触发curPage赋值为home将根里的data的数据修改为home
      <button :class="{ active: curPage === 'home' }" @click="curPage = 'home'">
        home
      </button>
      <button :class="{ active: curPage === 'list' }" @click="curPage = 'list'">
        list
      </button>
      <button
        :class="{ active: curPage === 'about' }"
        @click="curPage = 'about'"
      >
        about
      </button>

      <hr />
        //<component is="组件名" ></component>
        //is 属性的值就是需要渲染的组件的名字用v-bind绑定
      <component :is="curPage"></component>
    </div>