這兩天速成了一下Vue，在這里記錄一下相關的筆記，之后有時間詳細學Vue的時候再來回顧一下！
一、Vue理解
1、Vue的核心特征：雙向綁定。
在網頁中，存在視圖和數據。在Vue之前，需要使用JavaScript編寫復雜的邏輯去操作DOM元素來實現視圖和數據的一致性。Vue把這個過程封裝了起來，使得我們可以更關心視圖和數據之間的關系而不是具體的代碼實現，這就是MVVM(Model-View-ViewModel)雙向綁定。
View就是用戶看到的內容，比如表單，輸入框；
Model就是View對應的數據，比如表單展示的內容對應的數據對象，輸入框中的內容對應的數據對象；
Vue之前，View展示的數據（用戶看到的）和它實際的數據（Model中存儲的），這二者的一致性需要程序員使用JavaScript來手動同步。
引入Vue之后，在原來的模式中加入了一個中介——ViewModel。我們只需要告訴ViewModel哪個View和哪個Model對應，當其中一個變化時，另一個就會同步變化，這就是MVVM的核心。
舉個例子，頁面中有一個表格Table，例如學生的信息表。在Vue之前，如果我們想刪除一條記錄，需要手動去操作DOM元素讓表格呈現的內容發生變化；同理，如果數據庫中這個表發生了變化，我們也要去手動修改添加上相關的記錄。
使用Vue之后，我們只需要把表格和其對應的數據綁定起來，當用戶對視圖（表格）進行了修改，變化會自動同步到ViewModel中，之后會自動更新到Model數據庫；同理，如果數據庫發生了變化，ViewModel也會自動同步相關的邏輯，讓用戶看到的視圖發生變化。
這個過程中對DOM元素的操作對程序員來說就變成透明的了，我們可以更關注怎么去實現好看的視圖以及把視圖和數據對應地綁定起來，而不必關心怎么對視圖和數據進行同步。
2、兩個指令和生命周期
①v-bind和v-model是兩個重要的指令。
v-bind通常用于單向數據綁定，適用于那些用戶不能修改的數據。例如把一個超鏈接綁定到數據上，那么用戶永遠只能點這個超鏈接，而不能去修改它。但是服務器可以通過修改Model來改變這個超鏈接的URL，從而使得用戶打開的頁面不同。例如點擊某個link時，服務器根據其他的信息來設置這個link具體的URL。
v-model則用于雙向綁定，適用于那些用戶可以修改內容的視圖。例如常見的管理系統，用戶可以對表格中的數據進行增刪改查，這就要求用戶操作完之后，變化要同步到Model中從而使得數據庫進行持久化；相應的，如果數據庫中的數據發生了變化，這個變化也應該同步到用戶所看到的View上。
簡單的區別就是：v-bind，View在等Model變化然后自己變化；v-model，View和Model都可以變化并引起對方同步變化。
②Vue的生命周期。
Vue的生命周期共有四段：創建、掛載、更新和銷毀。在每一段的前后（before和after）都可以為Vue定義一些行為，稱為鉤子函數，這樣的鉤子函數一共有八個。
其中比較重要的是掛載（mounted），當Vue實例被掛載后就會執行這個函數的內容。例如可以設置為展示用戶數據的Vue，在掛載好之后即從數據庫獲取最新的數據并展示。
二、Vue流程
上圖是一個新建好的Vue項目框架，這里按照瀏覽器的訪問情況介紹一下Vue的流程。
1、瀏覽器會首先訪問index.html，index.html里面什么也沒有，body里只有一個id為app的div。
index.html會默認引入main.js，所以瀏覽器會在訪問index.html執行main.js的相關內容。
2、main.js關鍵就是：
new Vue({router, // ES6: router: router，屬性名和屬性名之后的名字一樣的時候，可以簡寫為屬性名render: h => h(App)
}).$mount('#app')// 1. new Vue({...}) 創建一個Vue實例
// 2. $mount('#app') 將該Vue實例掛載到頁面中id為app的元素上，即該實例會替換該元素內的內容
// 3. router是一個路由對象，用于管理頁面的路由
// 4. render: h => h(App) 是一個渲染函數，用于指定如何渲染頁面，這里的App是一個Vue組件
// 4.1 h(App)：調用 h 函數(createElement 函數)，傳入 App 組件作為參數，這意味著 App 組件將作為根組件被渲染。
// 4.2 Vue 會使用這個組件來構建整個應用程序的 VDOM(虛擬 DOM) 樹
也就是說，執行完main.js之后，會有一個Vue實例被掛載到index.html的id為app的div上，即會替換掉它，因此我們所看到的實際上是這個Vue實例中的內容，而這個Vue實例在渲染時使用的是App組件，這個App組件就是我們在上面導入的App.vue。
3、App.vue展示網頁的實際內容，它被被導入到main.js，并作為組件被渲染到index.html中。
總結：流程就是：index.html->main.js->App.vue。我們看到的實際上是App.vue的內容。
我們之后的前端工程化開發就是在App.vue里面放我們自己寫的vue，從而完成前端的視圖展示和其與數據的同步。
三、ElementUI
