Template make a template
Templates written directly in options
Write directly after the template option in the constructor. This way of writing is more intuitive, but if the template html code is too much, it is not recommended to write this way.
js:
var app = new Vue ({ el: '#app' , data:{ message: 'hello View!' }, template:` <h1 style="color:red">I am options template</h1> ` })
It should be noted here that the identity of the template is not single quotes and double quotes, but the key above the Tab.
Templates written in <template> tags
<template id="demo2">
<h2 style="color:red">I am the template tag template</h2>
</template>
<script type="text/javascript">
var app = new Vue ({
el: '#app' ,
data:{
message: 'hello View!'
},
template:'#demo2'
})
</script>
Tags written in <srcipt>
<script type="x-template" id="demo3">
<h2 style="color:red">I am script tag template</h2>
</script>
<script type="text/javascript">
var app = new Vue ({
el: '#app' ,
data:{
message: 'hello View!'
},
template:'#demo3'
})
</script>
full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Template three writing examples</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Template three writing examples</h1>
<hr>
<div id="app">
{{message}}
</div>
<template id="dd2">
<h2 style="color:red">I am Template tag template</h2>
</template>
<script type="x-template" id="dd3">
<h2 style="color:red">I am the script template tag</h2>
</script>
<script type="text/javascript">
var app = new Vue ({
el: "#app",
data:{
},
template: "#dd3"
// template:`
// <h2 style="color:red">I am an option template</h2>
// `
})
</script>
</body>
</html>