关于template标签用法总结(含vue中的用法总结)

不念不忘少年蓝@ 2022-12-06 12:57 486阅读 0赞

### 文章目录 ###

*   *  [一、html5中的template标签][html5_template]
     *  [二、template标签操作的属性和方法][template]
     *  [三、vue中的template][vue_template]
        
         *  [1、template标签在vue实例绑定的元素内部][1_template_vue]
         *  [2、vue实例中的template属性][2_vue_template]

## 一、html5中的template标签 ##

html中的`template`标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在`template`标签。这是因为template标签天生不可见，它设置了`display:none;`属性。

<template><div>我是template</div></template>
    <abc>我是自定义表现abc</abc>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm96YWk4Ng_size_16_color_FFFFFF_t_70][]

## 二、template标签操作的属性和方法 ##

*  `content`属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是\#document-fragment。通过该属性可以获取template标签中的内容，`template对象.content`可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。
 *  `innerHTML`:可以获取template标签中的html。

<template id="tem">
        <div id="div1">我是template</div>
        <div>我是template</div>
    </template>
    <script>
        let o = document.getElementById("tem");
        console.log(o.content.nodeName);//#document-fragment
        console.log(o.content.querySelectorAll("div"));//NodeList(2) [div#div1, div]。得到一个类数组
        console.log(o.content.getElementById("div1"));//<div id="div1">我是template</div>
        console.log(o.innerHTML);//'<div id="div1">我是template</div><div>我是template</div>'
    </script>

## 三、vue中的template ##

### 1、template标签在vue实例绑定的元素内部 ###

它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在
    
    vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。

<div id="app">
        
        <template>
            <div>我是template</div>
            <div>我是template</div>
        </template>
    </div>
    
    <template id="tem">
        <div id="div1">我是template</div>
        <div>我是template</div>
    </template>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
        });
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm96YWk4Ng_size_16_color_FFFFFF_t_70 1][]

**注意：** vue实例绑定的元素内部的template标签不支持v-show指令，即v-show="false"对template标签来说不起作用。但是此时的template标签支持v-if、v-else-if、v-else、v-for这些指令。

<div id="app">
        <template v-if="true">
        
            <div>我是template</div>
            <div>我是template</div>
        </template>
        <div v-if="true">
        
            <div>我是template</div>
            <div>我是template</div>
        </div>
        
        <template v-for="a in 3">
            <div>我是template</div>
            <div>我是template</div>
        </template>
    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
        });
    </script>

### 2、vue实例中的template属性 ###

将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
    特点：
    
    1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
    2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
    3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。

<div id="app"></div>
    
    <template id="first">
        <div v-if="flag">{
       {msg}}<div>
        <div v-else>111<div>
    </template>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello",
                flag:true
            },
            template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容，并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
        });
    </script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm96YWk4Ng_size_16_color_FFFFFF_t_70 2][]

上面的例子中html中的template标签可以变成自定的标签，如下。但是下面这种方式也可以将`<abc></abc>`标签中的内容替换掉app元素，但是`<abc></abc>`标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。

上面的实例还可以写成下面的形式

<div id="app"></div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                msg:"hello",
                flag:true
            },
            template:"<div v-if='flag'>{
       {msg}}</div><div v-else>123</div>"//模板中只能有一个根元素，如果有多个需要使用v-if、v-else、v-else-if来选择显示哪一个
        });
    </script>

[html5_template]: https://blog.csdn.net/u010510187/article/details/100356624#html5template_1
[template]: https://blog.csdn.net/u010510187/article/details/100356624#template_8
[vue_template]: https://blog.csdn.net/u010510187/article/details/100356624#vuetemplate_24
[1_template_vue]: https://blog.csdn.net/u010510187/article/details/100356624#1templatevue_25
[2_vue_template]: https://blog.csdn.net/u010510187/article/details/100356624#2vuetemplate_73
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm96YWk4Ng_size_16_color_FFFFFF_t_70]: /images/20221123/a68de1c452f045ab9eed79ac3b2f6b90.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm96YWk4Ng_size_16_color_FFFFFF_t_70 1]: /images/20221123/0d7a49db36d2463897a16ddef543e021.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JvYm96YWk4Ng_size_16_color_FFFFFF_t_70 2]: /images/20221123/1e04364072f44aa0a5a24cc11f493ccd.png