动态组件

<!-- 
    动态组件

    vue 内置了一款 component 组件，可以通过设置这个组件的 is 属性为某个组件的名字，从而实现用某个组件去替换这个动态组件的模板内容

   -->

  <div id="app" v-cloak>
    <button :class="{'active': curPage === 'home'}" @click="curPage = 'home'">首页</button>
    <button :class="{'active': curPage === 'list'}" @click="curPage = 'list'">列表页</button>
    <button :class="{'active': curPage === 'about'}" @click="curPage = 'about'">关于页</button>

    <!-- <home v-if="curPage === 'home'"></home>
    <list v-else-if="curPage === 'list'"></list>
    <about v-else></about> -->

    <!-- 动态组件 component 内置组件 -->
    <comopnent :is="curPage"></comopnent>
  </div>

  <script src="./js/vue.js"></script>
  <script>
    Vue.component('home', {
      template: `
        <div>
          <h1>首页</h1>
        </div>
      `,
    })

    Vue.component('list', {
      template: `
        <div>
          <h1>列表页</h1>
        </div>
      `,
    })

    Vue.component('about', {
      template: `
        <div>
          <h1>关于页</h1>
        </div>
      `,
    })

    let vm = new Vue({
      el: '#app',
      data: {
        curPage: 'home'
      },
    })
  </script>