Vue.js（1）----MVVM模式

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实例

    
        
        
    
    

        
        

            {{message}}
        

    
    
    

使用Vue的过程就是定义MVVM各个组成部分的过程。

1. 定义View
2. 定义Model
3. 创建一个Vue实例用来连接View和Model

在创建一个Vue实例的时候，需要传入一个选项对象，选项对象可以包括数据、挂载元素、方法、模生命周期钩子等。

比如在上一个实例中，Vue实例中的el属性指向View，el: '#app'表示将Vue实例挂载到

这个HTML元素上。data属性指向Model，data: exampleData表示我们的Model是exampleData对象。