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

文章目录

一、html5中的template标签
二、template标签操作的属性和方法
三、vue中的template
- 1、template标签在vue实例绑定的元素内部
- 2、vue实例中的template属性

一、html5中的template标签

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

<!--当前页面只显示"我是自定义表现abc"这个内容，不显示"我是template",这是因为template标签天生不可见-->
<template><div>我是template</div></template>
<abc>我是自定义表现abc</abc>

二、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-fragmentconsole.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标签中的内容显示并且在dom中不存在template标签--><template><div>我是template</div><div>我是template</div></template>
</div>
<!--此处的template标签中的内容在页面中不显示，但是在dom结构存在该标签及内部结构-->
<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>

注意： 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"><!--此时template标签中的内容显示在页面上，但是看dom结构没有template标签--><div>我是template</div><div>我是template</div></template><div v-if="true"><!--此时页面上显示div标签中的内容，并且看dom结构存在最外面的div标签--><div>我是template</div><div>我是template</div></div><!--此处会输出6个‘我是template’并且dom结构中不存在template标签--><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中定义的数据。

<!--此处页面显示hello-->
<div id="app"></div>
<!--此处template标签必须在vue绑定的元素外面定义，并且在页面中不显示下面的template标签中的内容-->
<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>

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

<abc id="first"><div v-if="flag">{{msg}}<div><div v-else>111<div>
</abc>

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

<!--此处页面显示hello-->
<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>

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

vue template html属性,详解template标签用法(含vue中的用法总结)
一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了 ...
Vue中watch用法
Vue中watch用法我前端开发时看到同事使用到了watch,所以稍微提取了一下操作方法(vue) 具体如下图: vue代码账户名称:<el-input v-model="qqNa ...
关于 template 标签在 js vue 中的用法
template 定义内容模板 <template> 元素是一种用于保存客户端内容机制,该内容在加载页面时不会呈现. 将模板视为一个可存储在文档中以便后续使用的内容片段.虽然解析器在加载 ...
【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
Vue中props用法
在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素 ...
vue 中provide的用法_聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数 ...
vue中inject用法
作用:刷新vue组件使用方法: 在APP.vue中 provide(){return {reload:this.reload}}, methods:{reload(){this.isRouterAl ...
[转载]C#中MessageBox.Show用法以及VB.NET中MsgBox用法
一.C#中MessageBox.Show用法 MessageBox.Show (String) 显示具有指定文本的消息框. 由 .NET Compact Framework 支持. MessageBo ...
return在php中用法,细致解读PHP中return用法（附代码）_后端开发
在大部分编程言语中,return关键字能够将函数的实行效果返回,PHP中return的用法也迥然不同,对初学者来讲,控制PHP中return的用法也是进修PHP的一个入手下手. 起首,它的意义就是返回 ...