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代码分离,便于维护和阅读。

Logo

前往低代码交流专区

更多推荐