Vue中的MVVM模型 · JS與WEB前端框架技術

# MVVM模型下圖不僅概括了MVVM模式（Model-View-ViewModel），還描述了在Vue.js中ViewModel是如何和View以及Model進行交互的。 ![](https://box.kancloud.cn/e0a1279329810059f2f6659afade71f2_1065x566.png) ViewModel是Vue.js的核心，它是一個Vue實例。 > Vue實例是作用于某一個HTML元素上的，這個元素可以是HTML的body元素，也可以是指定了id的某個元素。當創建了ViewModel后，雙向綁定是如何達成的呢？ * 首先，我們將上圖中的DOM Listeners和Data Bindings看作兩個工具，它們是實現雙向綁定的關鍵。 * 從View側看，ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化，如果有變化，則更改Model中的數據； * 從Model側看，當我們更新Model中的數據時，Data Bindings工具會幫我們更新頁面中的DOM元素。 ## Hello World示例了解一門語言，或者學習一門新技術，編寫Hello World示例是我們的必經之路。這段代碼在畫面上輸出"Hello World!"。 ~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <div id="app"> {{ message }} </div> </body> <script src="js/vue.js"></script> <script> // 這是我們的Model var exampleData = { message: 'Hello World!' } // 創建一個 Vue 實例或 "ViewModel" // 它連接 View 與 Model new Vue({ el: '#app', data: exampleData }) </script> </html> ~~~ 使用Vue的過程就是定義MVVM各個組成部分的過程的過程。 1. **定義View** 2. **定義Model** 3. **創建一個Vue實例或"ViewModel"，它用于連接View和Model** 在創建Vue實例時，需要傳入一個**選項對象**，選項對象可以包含數據、掛載元素、方法、模生命周期鉤子等等。在這個示例中，**選項對象**的**el屬性**指向View，`el: '#app'`表示該Vue實例將掛載到`<div id="app">...</div>`這個元素；**data屬性**指向Model，`data: exampleData`表示我們的Model是exampleData對象。 Vue.js有多種數據綁定的語法，最基礎的形式是文本插值，使用一對大括號語法，在運行時`{{ message }}`會被數據對象的message屬性替換，所以頁面上會輸出"Hello World!"。 ### 雙向綁定示例 MVVM模式本身是實現了雙向綁定的，在Vue.js中可以使用`v-model`指令在表單元素上創建雙向數據綁定。 ~~~  <div id="app"> <p>{{ message }}</p> <input type="text" v-model="message"/> </div> ~~~ 將message綁定到文本框，當更改文本框的值時，`<p>{{ message }}</p>`中的內容也會被更新。 ![](https://box.kancloud.cn/3dd7204e47bdcfebbc88e75e2a40d7f2_449x212.gif) 反過來，如果改變message的值，文本框的值也會被更新，我們可以在Chrome控制臺進行嘗試。 ![](https://box.kancloud.cn/184bf84402dd679852660846f51df5f0_678x596.gif) Vue實例的data屬性指向exampleData，它是一個引用類型，改變了exampleData對象的屬性，同時也會影響Vue實例的data屬性。