第一種
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<script>
new Vue({
el:'#app',
data(){
return {
}
},
template:`
<h1>我是第一種模板，我在實(shí)例中</h1>
`
})
</script>
</body>
</html>
第二種
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<template id="template-2">
<h1>我是第二種模板，以template標(biāo)簽的方式存在的模板，也是最常見的模板 </h1>
</template>
<script>
new Vue({
el:'#app',
data(){
return {}
},
//調(diào)用模板
template:'#template-2'
})
</script>
</body>
</html>
第三種
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app"></div>
<script type="x-template" id="template-3">
<h1>我是第三種模板，以script標(biāo)簽的方式存在的模板，但script的type類型必須是 x-template </h1>
</script>
<script>
new Vue({
el:'#app',
data(){
return {}
},
//調(diào)用模板
template:'#template-3'
})
</script>
</body>
</html>
