不想做全栈的工程师不是好的工程师。
最近在自学Vue，同时准备在博客上将自己的学习心得、期间遇到的问题给同步记录下来，做成一个学习系列。这个系列会杜绝说教、偏理论，更多的是通过理论加简单的例子加深理解。
OK，废话不多说，开始我们今天的学习。
首先，在学习Vue之前，你需要对MVVM设计模式有所了解。如果你还不够了解MVVM，可以先阅读这篇文章：MVVM
关于Vue，我们还有以下几点需要了解。
Vue.js是一种渐进式、轻量级前端框架，所谓轻量级是指的Vue.js压缩之后也只有十几kb，渐进式是指可以选择使用其功能；Vue与React、Angular框架一样（Vue与其他框架比较），都是基于MVVM设计模式实现的；MVVM分为view model viewmodel三大项，view model之间是没有相互的联系，彻底解耦了视图与业务逻辑；view与model两者是通过viewmodel联系起来的，view的变化会引起viwemodel的变化，viewmodel的变化会引起view的变化；view与viewmodel是通过双项绑定建立联系的；对于MVVM模式开发而言，开发者只需要关心数据即可，DOM的事情vue会自动帮你做；OK，上面提到了很关键的几个点：渐进式、数据双向数据绑定。
Talk is cheap, show me the code！我们通过代码具体演示以下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Learning Vue.js</title> </head> <body> <div id="app1"> <span style="color:red"> Hello,{{name}}</span></br> <input name="username" v-model="name" placeholder="please input you name"></input> </div> </body> <!--这里是以CDN引入的方式加载的vue.js--> <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <script> new Vue({ el : "#app1", //指定绑定的DOM元素 data : { //设置data属性值 name : "xiaoming", sex : 'male', phone : "152xxxxx" }, methods : { //设置方法属性 click : function() { alert('this is click function'); } } }) </script> </html>页面效果：
上面我们说了，view与 viewmodel是双向数据绑定，当我们在视图中或者viewmodel中修改name时都会引起另一方的修改。
是不是很简单？
让我们从本节开始，践行Vue的渐进式理念，一步一步深入学习Vue的相关知识吧！
Vue学习系列：
Vue学习系列 -- vue生成周期了解
Vue学习系列 -- 常见事件/指令学习
Vue学习系列 -- 计算属性
