正文
前言：关于Vue框架，好几个月之前就听说过，了解一项新技术之后，总是处于观望状态，一直在犹豫要不要系统学习下。正好最近有点空，就去官网了解了下，看上去还不错的一个组件，就抽空研究了下。最近园子里vue也确实挺火，各种入门博文眼花缭乱，博主也不敢说写得多好，就当是个学习笔记，有兴趣的可以看看。
一、MVVM大比拼
关于MVVM，原来在介绍knockout.js的时候有过讲解，目前市面上比较火的MVVM框架也是一抓一大把，比如常见的有Knockout.js、Vue.js、Avalonjs、Angularjs等，每一款都有它们自己的优势。
- Knockout：微软出品，可以说是MVVM的模型领域内的先驱，使用函数偷龙转凤，最短编辑长度算法实现DOM的同步，兼容IE6，实现高超，但源码极其难读，最近几年发展缓慢。
- Vue：是最近几年出来的一个开源Javascript框架，语法精简，实现精致，但对浏览器的支持受限，最低只能支持IE9。
- Avalonjs：是一个简单易用迷你的MVVM框架，由大神司徒正美研发。使用简单，实现明快。
- React：React并不属于MVVM架构，但是它带来virtual dom的革命性概念，受限于视图的规模。
- Angularjs：Google出品，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。入门容易上手难，大量避不开的概念也是很头疼的。
- 更多MVVM框架优缺点比较，可以看下 这里 。
其实在博主的博文里面，说得最多的还是那句：任何技术和框架都有它存在的价值和意义！由上也可以看出没有哪个框架是真正完美的，关键看你如何取舍，在你的项目中用好了以上任何一种框架，你就是技术大牛。不过话虽这样说，博主觉得多了解一些框架对我们并无坏处，至少能开阔我们的眼界吧。
二、Vue常用网址
上文说了，Vue是一个开源框架，最新版本已经更新到了2.0，是一个独立的Javascript框架，不依赖于任何其他框架（例如jquery），下面是博主收集的一些常用网址。
后来博主又找到一个中文的api地址，感谢开源社区工作者的翻译。
还有一个博主觉得很方便的就是一个Vue的在线测试网址：。里面键入相应的html+js+css可以直接运行查看效果。
三、Vue基础入门
1、MVVM图例
说到MVVM，先来看看下面下面这张图
这张图足以说明MVVM的核心功能，在这三者里面，viewmodel无疑起着重要的桥梁作用。
- 一方面，通过viewmodel将Model的数据绑定到View的Dom元素上面，当Model里面的数据发生变化的时候，通过viewmodel里面数据绑定的机制，触发View里面Dom元素的变化；
- 另一方面，又通过viewmodel来监听View里面的Dom元素的数据变化，当页面上面的Dom元素发生变化的时候，
viewmodel通过Dom树的监听机制，触发对应的Model的数据变化。 当然在Vue.js里面viewmodel也是核心部件，它就是一个Vue实例。这个实例作用于单个或者多个html元素，从而实现Dom树监听和数据绑定的双向更新操作。
2、第一个Vue实例
关于第一个实例，无疑是最简单的应用。要使用vue，不用多说，肯定是先去github上面下载源码喽，然后引入到我们的项目中来，需要引用的js就一个vue.js，版本是2.0.5。
先来看一个最简单的例子：
年龄：{{ Age }}
学校：{{ School }}
这段代码不难理解，我们的Model就是data变量，而viewmodel就是这里的new Vue()得到的对象。这里两个最简单的属性相信大家一看就能明白。
- el：表示绑定的Dom元素，此例子中表示的是父级的Dom元素。
- data：需要绑定的数据Model。
如果仅仅是展示，只需要 姓名：{{ Name }} 这样写就好了。运行的效果如下：
值得一提的是 {{ Name }} 这种写法仅仅只能实现单向绑定，只有在Model里面数据发生变化的时候会触发界面Dom元素的变化，反之并不能触发Model数据的变化。可以通过浏览器的Console来验证这一理论。
那么，对于双向绑定的机制，Vue是如何实现的呢？
3、双向绑定
vue里面提供了v-model指令，为我们方便实现Model和View的双向绑定，使用也非常简单。还是上文的例子，我们加入一个文本框，里面使用v-model指令。
姓名：{{ Name }}
年龄：{{ Age }}
学校：{{ School }}
效果如下：
代码说明：
{{Name}}这种写法和v-text的作用是相同的，用于绑定标签的text属性。注意如果标签没有text属性，该绑定会失效，比如你在一个文本框上面使用v-text是没有效果的 由得到的效果可以看出，v-html绑定后会覆盖原来标签里面的内容（比如上面的“年龄：”），记住此处是覆盖而非append。
对于v-html应用的时候要慎重，在网站上动态渲染任意 HTML 有一定的危险存在，因为容易导致 XSS 跨站脚本攻击。所以最好是在信任的网址上面使用。
注意v-text和v-html绑定都是单向的，只能从Model到View的绑定，不能实现View到Model的更新。
2、v-model指令
v-model上面有介绍它的双向绑定功能，对于v-model指令，vue限定只能对表单控件进行绑定，常见的有、
