为什么叫系统学习呢？因为我以前接触过Vue.js，但是没学过它的原理，只是简单的使用了，使用的时候就觉得很好用，没有其他的什么感觉，但当我进入职场后，学习了很多的前端技术后，才发现这个技术的友好，被它深深的吸引，所以准备拿出时间再系统的学习一遍。
参考书籍是Vue. js 实战／梁额编著．
这里先介绍一下我们要系统学习的内容：
双向绑定数据
计算属性
内置指令与自定义指令
组件
Render函数
webpack的使用
Vue.js插件
首先让我们了解一下什么是Vue，大神可略过。
先看一下官方文档的介绍：
简单小巧的核心，渐进式技术栈，足以应付任何国模的应。所以可以有阶段性的Vue.js，不必一开始就使用所有的东西。
但是，它同样提供了现代web开发中的常见的高级功能：
解耦视图与数据
可复用的组件
前端路由
状态管理
虚拟DOM（Virtual DOM）
Vue.js设计上使用了MVVM (Model-View-View Model) 模式。
MVVM模式 是由经典的软件架构MVC衍生而来的，当View发生变化时，会自动更新到ViewModel（视图模型），反之亦然。View和ViewModel之间通过双向绑定简历联系
Vue.js与传统jQuery相比的优点。
先上一段代码
不难看出，这是给指定的DOM中插入元素，并给他绑定一个点击事件。但是存在一个明显的缺点，那就是让视图代码和业务逻辑耦合在一起，随着功能的增加，直接操作DOM会使代码越来越难以维护。
而Vue.js通过MVVM的模式模式将视图与数据拆分为两部分，只操作数据即可，DOM绑定的事Vue会帮你自动搞定，下面展现Vue.js的改写方法；
<body>
<div id = "app">
<button v-if="showBtn" v-on:click="handleClick">Click me</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
showBtn:true
},
methods:{
handleClick:function(){
console.log('Clicked!');
}
}
})
</script>上面的代码先不做解释，反正我能看懂，你看不懂就继续往下看吧，后续会一一介绍每个属性的意义。
上面只是简单的介绍的了Vue的的异同，解决的问题，存在的意义和核心思想，接下来我们正式学习如何使用Vue.js
首先，我们介绍一套“万金油”技术栈，被许多商业项目用于生产环境。
jQuery + RequireJS ( SeaJS ) + artTemplate (doT) +Gulp (Grunt)
这套技术栈以jQuery为核心，能兼容大部分浏览器。使用RequireJS或者SeaJS进行模块化开发可以解决代码依赖混乱的问题，同时便于维护以及团队协作。使用轻量级的前端模板可以将数据与HTML模板分离。最后，使用自动化的构建工具（如Gulp）可以合并并压缩代码，如果你喜欢谢Less、Sass以及现在流行的ES6，也可以帮你进行预编译。
随着项目的扩大和时间的转移，出现了更为复杂的业务场景，比如SPA（单也买你富应用）、组件解耦等。为了提升开发效率，降低维护成本，传统的前端开发模式已经不能完全满足我们的需求，这时就出现了如Angular、React以及我们介绍的主角Vue.js.
接下来咱们写一个完整的代码来体验一下Vue：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:'#app',
data:{
books:[
{ name:'《Vue.js实战》' },
{ name:'《JavaScript语言精粹》' },
{ name:'《JavaScript高级程序设计》' }
]
}
})
</script>
</body>
</html>显示效果图
效果是不是还不错，它将图书列表玄幻显示出来了
对于一些业务逻辑复杂，对前端工程有要求的项目，可以使用vue单文件的形式配合webpack使用，必要时还会使用到vuex来管理状态，vue-router来管理路由。所以说Vue.js框架分开发模式是多样化的，后续会详细介绍，到时就会对整个Vue生态有所了解。
接下来就让我们开启Vue的大门吧，创建我们的第一个Vue应用。
请看下一节