1.什么是Vue：
Vue (讀音 /vju?/，類似于 **view**) 是一套用于構建用戶界面的**漸進式框架**。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與[現代化的工具鏈]([https://v2.cn.vuejs.org/v2/guide/single-file-components.html)](https://v2.cn.vuejs.org/v2/guide/single-file-components.html))以及各種[支持類庫]([https://github.com/vuejs/awesome-vue#libraries--plugins)](https://github.com/vuejs/awesome-vue#libraries--plugins))結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
Vue教學網址：https://v2.cn.vuejs.org/v2/guide/
2.Vue的特點：
- 遵循MVVM模式：
- 體積小，運行效率高，本身只關注視圖層，可以引入其他的第三方庫
3.Vue的使用步驟：
1.實現步驟：
1.創建一個基礎的HTML文檔：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
</html>
2.引入Vue環境：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>
</html>
注意看引入的Vue環境是需要在線引入的，因此我們可以進行離線引入，即訪問Vue環境的網址，將Vue環境所需要的資源復制到我們自定義的js文件中，再在HTML文檔中引入我們定義的js文件即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>//src屬性的值即為vue環境資源所在的js文件路徑<script src="vue/vue.js"></script>
</body>
</html>
Vue環境的部分源碼如下：
3.準備一個容器：
<font style="color:rgba(0, 0, 0, 0.85);">Vue 應用需要一個根元素來進行掛載。通常會在 HTML 中創建一個 </font>`div`<font style="color:rgba(0, 0, 0, 0.85);"> 元素作為 Vue 應用的掛載點。</font>
然后在 JavaScript 中使用 new Vue({ el: '#app' }) 將 Vue 實例掛載到這個 div 上。這樣 Vue 就可以管理這個 div 及其內部的 DOM 結構，實現數據驅動的視圖更新。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 準備容器-->
<div id="app"></div>//src屬性的值即為vue環境資源所在的js文件路徑<script src="vue/vue.js"></script>
</body>
</html>
注意：div容器應使用id選擇器，因為div容器與Vue實例是一一對應的，如果使用類選擇器或標簽選擇器就可能出現一個Vue實例對應到多個div容器的現象
4.創建Vue實例：
通過new關鍵字創建一個Vue實例，并給此實例添加兩個屬性，el屬性表示此Vue實例綁定的div容器的id，data屬性是一個對象，用于保存數據內容；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 準備容器-->
<div id="app"></div>//src屬性的值即為vue環境資源所在的js文件路徑<script src="vue/vue.js"></script><script>// 創建vue實例let vm=new Vue({//'#'表示選擇器el:"#app",data:{name:'張三'}});
</body>
</html>
5.在div容器中獲取Vue實例中保存的數據：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 準備容器-->
<div id="app"><h1>hello,{{name}}</h1>
</div>//src屬性的值即為vue環境資源所在的js文件路徑<script src="vue/vue.js"></script><script>// 創建vue實例let vm=new Vue({//'#'表示選擇器el:"#app",data:{name:'張三'}});
</body>
</html>
2.總結：
-
1.引入Vue環境； -
2.準備容器，并添加id屬性為此容器命名； -
3.創建Vue實例，并傳入配置對象； -
4.app容器中的代碼 需要符合HTML的規范 可以混入Vue語法（上面的插值表達式就屬于Vue語法）； -
5.Vue實例與容器是一一對應的； -
6.一旦data中的變量 發生改變 那么頁面也會改變；
3.說明：
還是以上面的代碼為例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!-- 準備容器-->
<div id="app"><h1>hello,{{name}}</h1>
</div>//src屬性的值即為vue環境資源所在的js文件路徑<script src="vue/vue.js"></script><script>// 創建vue實例let vm=new Vue({//'#'表示選擇器el:"#app",data:{name:'張三'}});
</body>
</html>
此時我們在瀏覽器的控制臺上可以獲取此時name變量的值
當我們此時改變name變量的值時，瀏覽器頁面上也會相應改變
有個問題需要注意一下，就是我們在代碼中name變量是Vue實例中data屬性的子屬性，而非Vue實例vm的屬性，那為什么我們可以直接通過vm.name獲取或修改name屬性的值呢。實際上它的底層是通過Object的defineproperty（）方法將data的屬性復制到了vm中，并提供了get/set方法，才使得我們可以直接獲取或修改name的值;
