### 作为对比，我们先看看学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```咯？
