组件模板分离

组件模板的分离写法

###   script标签

​ 使用`script`标签定义组件的模板，`script`标签注意类型是`text/x-template`。

```html

  <!-- 1.script标签注意类型是text/x-template -->

  <script type="text/x-template" id="cpn1">

    <div>

        <h2>组件模板的分离写法</h2>

        <p>script标签注意类型是text/x-template</p>

      </div>

  </script>

```

###   template标签

​ 使用`template`标签，将内容写在标签内。

```html

  <!-- 2.template标签 -->

  <template id="cpn2">

    <div>

      <h2>组件模板的分离写法</h2>

      <p>template标签</p>

    </div>

  </template>

```

> 调用分离的模板，使用`template:'#cpn1'`

```html

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

  <script>

    const app = new Vue({

      el: "#app",

      components: { //局部组件创建

        cpn1:{

          template:'#cpn1'

        },

        cpn2: {

          template: '#cpn2'

        }

      }

    })

  </script>

```