Detailed explanation of the usage of template tag of contains the usage summary of vue
- 2021-10-16 01:08:17
- OfStack
1. template Tag in html5
In html
template
The content in the tag is not displayed on the page. But the DOM structure exists when viewing the page in the background
template
Label. This is because the template tag is inherently invisible, and it sets the
display:none;
Property.
<!-- The current page only displays " I am a custom performance abc" This content is not displayed " I am template", This is because template Labels are inherently invisible -->
<template><div> I am template</div></template>
<abc> I am a custom performance abc</abc>
2. Properties and methods of template tag operations
content
Attribute: content attribute exists in dom object corresponding to template tag in js, and the corresponding attribute value is 1 dom node, and the nodeName of node is # document-fragment. This property allows you to get the contents of the template tag,
template对象.content
You can call getElementById, querySelector, querySelectorAll methods to get the child nodes inside.
innerHTML
You can get html from the template tag.
<template id="tem">
<div id="div1"> I am template</div>
<div> I am 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] . Get 1 Classes array
console.log(o.content.getElementById("div1"));//<div id="div1"> I am template</div>
console.log(o.innerHTML);//'<div id="div1"> I am template</div><div> I am template</div>'
</script>
3. template in vue
1. The template tag is inside the element bound by the vue instance
It can display the contents of the template tag, but the template tag does not exist in the dom structure in the background. If the template tag is not placed inside the element bound by the vue instance, the contents inside cannot be displayed on the page by default, but the template tag exists in the background dom structure.
<div id="app">
<!-- Here template The contents in the tag are displayed and displayed in the dom Does not exist in template Label -->
<template>
<div> I am template</div>
<div> I am template</div>
</template>
</div>
<!-- Here template The content in the tag is not displayed on the page, but is displayed in the dom The structure exists in the label and the internal structure -->
<template id="tem">
<div id="div1"> I am template</div>
<div> I am template</div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
});
</script>Note: The v-show directive is not supported by the template tag inside the element bound by the vue instance, that is, v-show= "false" does not work for the template tag. However, the template tag at this time supports v-if, v-else-if, v-else, v-for instructions.
<div id="app">
<template v-if="true">
<!-- At this time template The contents in the tab are displayed on the page, but look at the dom Structure does not template Label -->
<div> I am template</div>
<div> I am template</div>
</template>
<div v-if="true">
<!-- Displays on the page at this time div Tag, and look at the contents in the dom Structure exists outermost div Label -->
<div> I am template</div>
<div> I am template</div>
</div>
<!-- Output here 6 I am template' And dom Does not exist in the structure template Label -->
<template v-for="a in 3">
<div> I am template</div>
<div> I am template</div>
</template>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
});
</script>
2. template attribute in vue instance
Compile the template attribute value in the instance, and replace the compiled dom with the elements bound by the vue instance. If there are contents in the elements bound by the vue instance, these contents will be directly overwritten.
1) If there is an template attribute in the vue instance, the attribute value will be compiled, and the compiled virtual dom will directly replace the element bound by the vue instance (that is, the element bound by el);
Features:
2) The dom structure in the template attribute can only have one root element. If there are multiple root elements, v-if, v-else, v-else-if are set to display only one root element;
3) The data defined in vue instances data, methods can be used in the attribute value corresponding to this attribute.
<!-- The page here shows hello-->
<div id="app"></div>
<!-- Here template The label must be in the vue Bind to the element, and the following is not displayed in the page template Contents in the tag -->
<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"// This property allows you to set the custom template Replace all the contents in the property app The content of, and will overwrite the original content inside, and view the dom Structure does not exist when template Label
});
</script>
In the above example, the template tag in html can be changed into a custom tag, as follows. However, the following method can also be used
<abc></abc>
The contents in the tag replace the app element, but
<abc></abc>
The contents of the tag are also displayed on the page. So here we use the template tag to define the template properties that need to be set in the vue instance.
<abc id="first">
<div v-if="flag">{{msg}}<div>
<div v-else>111<div>
</abc>The above example can also be written in the following form
<!-- The page here shows 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>"// Templates can only have 1 If there are more than one root element, use the v-if , v-else , v-else-if To choose which to display 1 A
});
</script>