🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 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> <!--这是我们的View--> <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`指令在表单元素上创建双向数据绑定。 ~~~ <!--这是我们的View--> <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属性。