The first
<html>
<head><title>TEST</title></head>
<body>
<div id='app'>{{msg}}</div> // 页面为 <div id=’app’> hello vue </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {msg: "hello vue"},
})
</script>
</body>
</html>The second
<html>
<head><title>TEST</title></head>
<body>
<div id='app'>{{msg}}</div> // 页面为 <p id='zzz'> hello vue </p> 也就是说，会把 原始的 div标签替换掉
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {msg: "hello vue"},
template: "<p id='zzz'> {{msg}}</p>
})
</script>
</body>
</html>The third
render function as a string (online too, so I did not write), or to create a component object as a parameter.
<html>
<head><title>TEST</title></head>
<body>
<div id='app'>{{msg}}</div> // 页面为 <h5 id='aaa'>aaaaa</h5> 也就是说，会把 原始的 div标签替换掉
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {msg: "hello vue"}, // 不会使用
template: "<p id='zzz'> {{msg}}</p>， //不会用到
render: h => h({
template: <h5 id='aaa'> {{msg}} </h5>,
data: function() {
return {msg: 'aaaaa'}
},
created: function(){ console.log('123')}
}
})
</script>
</body>
</html>