>[info] 本章可以参考： [Vue 实例 - 创建一个 Vue 实例](https://cn.vuejs.org/v2/guide/instance.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">
<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>
~~~
>[success] 我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是**响应式的**。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改`app.message`的值，你将看到上例相应地更新。
>[info]注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是`#app`) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
1. `<div id="app">` 我们为Vue准备了一个div的元素，以便于后面script代码中去创建vue应用，并且将应用绑定在我们的这个元素中；
2. 通过`new Vue();`来创建一个Vue的应用，然后给他传入一个Object，这个对象中包括`el`属性，这个属性时非常重要的，该属性值告诉了Vue应用应该绑定在哪个元素中，所以在我们准备的div元素中需要有一个`id`的属性，便于`el`进行传值；
3. 所以要记住的是，我们创建的这个Vue对象通过传入`el: '#app'`将应用绑定在了`<div id="app">`上，这个应用的作用域也只仅限于`<div id="app">`与它的子元素中，如果在它之外是无法使用和操作的，这个需要牢记；
4. `{{message}}`我们成为文本插值，在html的相关位置使用文本插值可以输出我们在`Vue.data`内创建的属性，但根据第三点描述，是有作用域的哦。
<br/>
## 我们可以给``` new Vue({Object})```传入哪些值？
|属性|类型|是否必须|描述|
| --- | --- | --- | --- |
|el|Stirng（css选择器）|必须|指定Vue应用的绑定对象（作用域）|
|data|Object|非必须|作用域内要使用的参数|
|computed|Object|非必须|计算属性|
|methods|Object|非必须|方法属性|
|watch|Object|非必须|侦听属性|
