vue:MVVM,一个初始vue项目

vue（vue.js的简称）是目前最火的一个前端框架。是一套构建用户界面的框架，不仅容易上手，还便于与第三方库或既有项目整合。前端只要负责MVC中的V这一层，主要工作是和界面打交道，来制作前端页面效果。

MVC是后端的分层开发概念，MVVM是前端视图层的概念，主要关注于视图层的分离，主要包括三部分，
M(Model)：页面中要渲染的数据
V(View)：页面中用来展示数据的DOM元素
VM(VM ViewModel)：VM是核心，它是调度者，用来联系M层和V层，当M中的数据发生变化，会被VM自动渲染到页面，当页面上的数据被修改时，也会自动被同步到M中。
MVVM相对于MVC来说，提供了双向数据绑定机制。

一个简单的vue项目：
（1）导入vue包
将从官网下载的vue.js文件加入到文件夹中，并在.html文件中的head标记（注意不是body标记内，含有JS代码的script标记才加入body标记内）内加入script标记，置其属性src为vue.js的路径。


（2）创建一个容器，以使用vue控制这个指定容器中的所有DOM元素。
下例中创建div容器：

（3）使用Vue()函数创建一个vm对象，控制一个容器，该容器内的所有元素都可以使用vm对象中的数据
该函数的参数是一个JSON格式的数据，第一个元素为el(element的缩写，用id选择的方式指定控制的容器），第二个元素为data（表示要渲染的数据）。注意，el属性指定的元素即为MVVM中的V视图层，data属性就是MVVM中的M视图数据层，new Vue()得到的vm对象即为MVVM中的VM，它提供了双向数据绑定的能力。

上例中的vm对象el值表明该vm对象控制id为app的div标记，div标记中加入的p标记{{msg}}被替代为Vue函数中的data中的msg的值。

效果如下：

一个数据可以被引用多次：


另一种给标记赋值的方法是设置标记的属性v-text值为data中对应的元素：

效果不变。

注意：（1）这里的v-text属性语法叫做指令，在vue中，所有的指令都是属性，vue的指令都是以v-开头的。
（2）双大括号{{}}语法叫做“插值表达式”，在插值表达式中，可以写任何合法的JS表达式。v-text的属性值也可以指任何合法的JS表达式，结果为表达式的结果。
例如：


插值表达式与v-指令的一个区别在于浏览器渲染的闪烁问题（用v-cloak属性解决），这里不过多解释。
另外的区别：插值表达式只会插入内容，不会清除标记内原来的内容，v-text会清除标记内原来所有内容。

一般属性插值表达式，v-指令使用次数少。