# MVVM >[info]MVVM（用這個架構） * M: model 模型層，主要負責業務數據相關 * V: view 視圖層，負責視圖相關,細分下來就是html+css層 * VM: viewModel 視圖模型層，V與M溝通的橋梁，負責監聽M或者V的修改，是實現MVVM雙向綁定的要點 *****  <br> ```javascript //view 層 <div id="app"> //v-model 指令綁定輸入框的值 <input type="text" v-model = "iinputVal"> // 插值法 <p>{{inputVal}}</p> </div> <script> new Vue({ el:"#app", //model層 data:{ inputVall:""//input框內容一開始是空的 } }) </script> ``` >**VM** >* 1. 監聽輸入框的內容 改變 model 里面的變量inputVal >* 2. inputVal發生改變，是不是要更新頁面（view）用到這個變量的地方， 通過viewmodel層去更新頁面 V (視圖層) -> VM(視圖模型層) -> model 例子： 監聽輸入框的內容，改變inputVal model（模型層）-> VM (視圖模型層) -> view(視圖層) 例子： inputVal發生變化，通過VM更新界面上面的p標簽 ***** >[success]MVVM支持雙向綁定，意思就是當M層數據進行修改時，VM層會監測到變化，并且通知V層進行相應的修改，反之修改V層則會通知M層數據進行修改，以此也實現了視圖與模型層的相互解耦