# 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属性。
- 内容介绍
- EcmaScript基础
- 快速入门
- 常量与变量
- 字符串
- 函数的基本概念
- 条件判断
- 数组
- 循环
- while循环
- for循环
- 函数基础
- 对象
- 对象的方法
- 函数
- 变量作用域
- 箭头函数
- 闭包
- 高阶函数
- map/reduce
- filter
- sort
- Promise
- 基本对象
- Arguments 对象
- 剩余参数
- Map和Set
- Json基础
- RegExp
- Date
- async
- callback
- promise基础
- promise-api
- promise链
- async-await
- 项目实践
- 标签系统
- 远程API请求
- 面向对象编程
- 创建对象
- 原型继承
- 项目实践
- Classes
- 构造函数
- extends
- static
- 项目实践
- 模块
- import
- export
- 项目实践
- 第三方扩展库
- immutable
- Vue快速入门
- 理解MVVM
- Vue中的MVVM模型
- Webpack+Vue快速入门
- 模板语法
- 计算属性和侦听器
- Class 与 Style 绑定
- 条件渲染
- 列表渲染
- 事件处理
- 表单输入绑定
- 组件基础
- 组件注册
- Prop
- 自定义事件
- 插槽
- 混入
- 过滤器
- 项目实践
- 标签编辑
- iView
- iView快速入门
- 课程讲座
- 环境配置
- 第3周 Javascript快速入门