>[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|非必須|偵聽屬性|
