第一种
<!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>我是第一种模板，我在实例中</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标签的方式存在的模板，也是最常见的模板 </h1>
</template>
<script>
new Vue({
el:'#app',
data(){
return {}
},
//调用模板
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标签的方式存在的模板，但script的type类型必须是 x-template </h1>
</script>
<script>
new Vue({
el:'#app',
data(){
return {}
},
//调用模板
template:'#template-3'
})
</script>
</body>
</html>
