Vue.js（1）----MVVM模式
2017-07-10 本文已影响197人
_地中海大叔
MVVM模式
MVVM模式是Vue.js的核心，它是一个Vue实例。Vue实例可以作用某一个HTML元素上，这个元素可以是body元素，也可以是指定id的元素。下图不仅包括了MVVM模式，还显示了ViewModel是如何和View以及Model是如何联系的。
如上图所示，当创建了一个Vue实例以后：
从View的这个方面看，ViewModel中的DOM Listeners工具会帮我们检测页面上DOM元素的变化，如果有变化，则更改Model中的数据。
从Model这个方面看，当Model中的数据发生改变时，Data Bindings会负责更新页面中的DOM元素。
Hello World实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>详解Vue</title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{message}}
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script>
//这是我们的Model
var exampleData = {
message:'Hello World'
}
//创建一个Vue实例或“ViewModel”
//它连接View和Model
new Vue({
el:'#app',
data:exampleData
})
</script>
</html>
使用Vue的过程就是定义MVVM各个组成部分的过程。
- 定义View
- 定义Model
- 创建一个Vue实例用来连接View和Model
在创建一个Vue实例的时候，需要传入一个选项对象，选项对象可以包括数据、挂载元素、方法、模生命周期钩子等。
比如在上一个实例中，Vue实例中的el属性指向View，el: '#app'表示将Vue实例挂载到<div id="app"></div>这个HTML元素上。data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
