vue template和html5的template用法比較
1.html5中的template標籤
html中的template標籤中的內容在頁面中不會顯示。但是在後臺檢視頁面DOM結構存在template標籤。這是因為template標籤天生不可見，它設定了display:none;屬性。
2.template標籤操作的屬性和方法
content屬性:在js中template標籤對應的dom物件存在content屬性，對應的屬性值是一個dom節點，節點的nodeName是#document-fragment。透過該屬性可以獲取template標籤中的內容，template物件.content可以呼叫getElementById、querySelector、querySelectorAll方法來獲取裡面的子節點。
innerHTML:可以獲取template標籤中的html
3.vue中的template
(1)template標籤在vue例項繫結的元素內部
它是可以顯示template標籤中的內容，但是檢視後臺的dom結構不存在template標籤。如果template標籤不放在vue例項繫結的元素內部預設裡面的內容不能顯示在頁面上，但是檢視後臺dom結構存在template標籤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template id="tem">
<div id="mdiv">
<h1 id="title">hello world! tem</h1>
</div>
</template>
<div id="app">
<template>
<div>
<h1 id="title">hello world! app</h1>
<script type="text/javascript">
var tem =document.getElementById("tem");//獲取template標籤
console.log(tem);
console.log(tem.innerHTML); //
var title = tem.content.getElementById("title"); //在template標籤內部內容，必須要用.content屬性才可以訪問到
console.log(title);`在這裡插入程式碼片`
</script>
<script>
new Vue({
el : '#app',
})
</body>
</html>
(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中定義的資料。
<template id = "first">
<div v-if = "flag">第一個{{msg}}</div>
<div v-else>第二個</div>
<div id = "app"></div>
<abc id="second">
<div v-if="flag">{{msg}}</div>
<div v-else>111</div>
</abc>
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"#first"//透過該屬性可以將自定義的template屬性中的內容全部替換app的內容,並且會覆蓋裡面原有的內容，並且在檢視dom結構時沒有template標籤
});
如果將上面的template:"#first"改為template:"#second"，則標籤中的內容也會顯示在頁面上。所以此處利用template標籤來定義vue例項中需要設定的template屬性。(?)
vue template和html5的template用法比較
1.html5中的template標籤
html中的template標籤中的內容在頁面中不會顯示。但是在後臺檢視頁面DOM結構存在template標籤。這是因為template標籤天生不可見，它設定了display:none;屬性。
2.template標籤操作的屬性和方法
content屬性:在js中template標籤對應的dom物件存在content屬性，對應的屬性值是一個dom節點，節點的nodeName是#document-fragment。透過該屬性可以獲取template標籤中的內容，template物件.content可以呼叫getElementById、querySelector、querySelectorAll方法來獲取裡面的子節點。
innerHTML:可以獲取template標籤中的html
3.vue中的template
(1)template標籤在vue例項繫結的元素內部
它是可以顯示template標籤中的內容，但是檢視後臺的dom結構不存在template標籤。如果template標籤不放在vue例項繫結的元素內部預設裡面的內容不能顯示在頁面上，但是檢視後臺dom結構存在template標籤。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template id="tem">
<div id="mdiv">
<h1 id="title">hello world! tem</h1>
</div>
</template>
<div id="app">
<template>
<div>
<h1 id="title">hello world! app</h1>
</div>
</template>
</div>
<script type="text/javascript">
var tem =document.getElementById("tem");//獲取template標籤
console.log(tem);
console.log(tem.innerHTML); //
var title = tem.content.getElementById("title"); //在template標籤內部內容，必須要用.content屬性才可以訪問到
console.log(title);`在這裡插入程式碼片`
</script>
<script>
new Vue({
el : '#app',
})
</script>
</body>
</html>
(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中定義的資料。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template id = "first">
<div v-if = "flag">第一個{{msg}}</div>
<div v-else>第二個</div>
</template>
<div id = "app"></div>
<abc id="second">
<div v-if="flag">{{msg}}</div>
<div v-else>111</div>
</abc>
</script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"#first"//透過該屬性可以將自定義的template屬性中的內容全部替換app的內容,並且會覆蓋裡面原有的內容，並且在檢視dom結構時沒有template標籤
});
</script>
</body>
</html>
如果將上面的template:"#first"改為template:"#second"，則標籤中的內容也會顯示在頁面上。所以此處利用template標籤來定義vue例項中需要設定的template屬性。(?)