＜script ＞和＜template＞标签的使用

Vue提供了两种方式在JavaScript中的HTML模板分离，分别是 script 和 template 标签。

1、使用 script 标签

使用 script 标签时，type 指定为 text/template ，这是在告诉我们这不是一段js脚本，这样浏览器在解析HTML文档时会忽略 script 标签内定义的内容。

• 代码如下：

<div id="app">
        <m-comp></m-comp>
    </div>

    <!-- 使用<script>标签定义根模板 -->
    <script type="text/template" id="mComp">
        <!-- div：外部容器，必须的 -->
        <div>
            这是 script 组件！
        </div>
    </script>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        //方法一：创建并注册（全局注册）
        Vue.component("m-comp",{
            template:"#mComp"  
        });
        var vm=new Vue({
            el:"#app"
        });

        // 或：

        //方法二：局部注册
        var vm=new Vue({
            el:"#app",
            components:{
                "m-comp":{
                    template:"#mComp"  //作为一个id
                }
            }
        });
    </script>

• 效果图如下：

2、使用 template 标签

使用 template 标签时，不需要指定type属性。
template选项不再是HTML元素，而是一个id。Vue.js根据这个id查找对应的元素，然后将这个元素内的HTML作为模板进行翻译。

• 代码如下：

<div id="app">
        <m-comp></m-comp>
    </div>

    <!-- 使用<template>标签定义根模板 -->
    <template  id="mComp">
        <!-- div：外部容器，必须的 -->
        <div>
            这是 template 组件！
        </div>
    </template>

    <!-- 借助免费的CDN来引入vue.js文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
        //方法一：创建并注册（全局注册）
        Vue.component("m-comp",{
            template:"#mComp"  
        });
        var vm=new Vue({
            el:"#app"
        });

        // 或：

        //方法二：局部注册
        var vm=new Vue({
            el:"#app",
            components:{
                "m-comp":{
                    template:"#mComp"  //作为一个id
                }
            }
        });
    </script>

• 效果图如下：

结果：使用 script 标签或 template 标签来定义组件的HTML模板。
优点：HTML代码和JavaScript代码分离，便于维护和阅读。