第一種
<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>
第二種
<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>
第三種
render 函數，以字符串（網上太多，故沒寫），要么以component對象作為參數創建。
<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>