### 作為對比，我們先看看學HTML時寫的```Hello World```：
~~~
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML初體驗</title>
</head>
<body>
<div id="app"></div>
</body>
<script>
var app = document.getElementById("app");
app.innerText= "Hello World";
</script>
</html>
~~~
使用上一節Vue之后的代碼：
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 在線引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<title>Vue初體驗</title>
</head>
<body>
<!--準備Vue容器-->
<div id="app">{{message}}</div>
</body>
<script>
// 使用new Vue();來創建一個新的Vue實例
const vm = new Vue({
el: '#app',
data : {
message : 'Hello Vue!'
}
});
</script>
</html>
~~~
以上兩個寫法都是通過在頁面輸出一段Hello的話語，如果我們的邏輯再復雜一點呢？
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 在線引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<title>Vue初體驗</title>
</head>
<body>
<!--準備Vue容器-->
<div id="app">
<h2>{{message}}</h2>
<h3>{{tips}}</h3>
<h4>{{date_time}}</h4>
</div>
</body>
<script>
// 使用new Vue();來創建一個新的Vue實例
const vm = new Vue({
el: '#app',
data : {
message : 'Hello Vue!',
tips : "Good good study and day day up!",
date_time : new Date
}
});
</script>
</html>
~~~
>[danger] 如果使用原生JavaScript去寫的話，不知道得寫多少個```getElementBy```咯？
