十七、模板的分离写法

■刚才,我们通过语法糖简化了Vue组件的注册过程,另外还有一个地方的写法比较麻烦,就是template模块写法。

■如果我们能将其中的HTML分离出来写,然后挂载到对应的组件上,必然结构会变得非常清晰。

■Vue提供了两种方案来定义HTML模块内容:

• 使用<script>标签
• 使用<template>标签

    <div id="app">
      <cpn></cpn>
    </div>
    <!-- 1. script标签，注意：类型必须是text/x-template -->
    <!-- <script type="text/x-template" id="cpnC">
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈</p>
      </div>
    </script> -->

    <!-- 2.template标签 -->
    <template id="cpnC">
      <div>
        <h2>我是标题</h2>
        <p>我是内容，哈哈哈</p>
      </div>
    </template>
    <script>
      //1.注册一个全局组件
      Vue.component("cpn",{
        template: '#cpnC'
      })
      
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World"
        }
      });
    </script>