# 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层数据进行修改，以此也实现了视图与模型层的相互解耦