vue中模板和组件分离

**

vue中模板和组件分离

**
第一种：使用script，将其类型跟改为text/x-template。代码示例如下：

   <!-- 第一种方式: 使用script -->
    <script type="text/x-template" id="comp2">
        <div>
            <h2>组件和模板分离的写法1</h2>
        </div>
    </script>

我们给模板设置好id之后，再进行模板的注册

Vue.component('comp2', {
     template: comp2
})

下面直接调用组件即可

<div id="app">
    <comp2></comp2>
</div>

第二种template写法
比较受欢迎，比较方便，比较推荐的一种写法

<template id="comp3">
        <div>
            <h3>组件模板分离的第二种写法</h3>
        </div>
    </template>

使用template标签, 并为其定义一个id, 组件的定义是一样的

Vue.component('comp3', {
     template: comp3
})