Vue.js的官方文档是这样介绍它的。
简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
简单小巧是指Vue.js压缩后仅有17kb，渐进式就是可以一步一步，有阶段地来使用Vue.js，不必一开始就使用所有的东西。
使用Vue.js可以让Web开发变得简单，同时也颠覆了传统前端的开发模式。它提供了现代 Web开发中常见的高级功能，比如：
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
1.1 Vue.js是什么？
1.1.1 MVVM模式
与知名前端框架Angular。Ember等一样，Vue.js在设计上也使用了MVVM（Model-view-ViewModel）模式。
MVVM模式是由经典的软件架构MVC衍生而来。当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之亦然，View和ViewModel之间同过双向绑定（data-building）建立联系。
1.1.2 Vue.js有什么不同
对于使用过jQuery的人来说，一定对操作DOM、绑定事件等这些原生JavaScript能留非常熟悉，比如我们在指定的DOM中插入一个元素，并绑定一个事件：
if(showBtn){
var btn=$('<button>Click me</button>');
btn.on(‘click’,function(){
console.log('Clicked!');
});
$('#app').append(btn);
}这段代码不难理解，操作的内容也并不复杂，不过这样让我们的视图代码和业务逻辑紧紧耦合在一起，随着功能的不断增加，直接操作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({
e1:'#app'
data:{
show button:true
},
methods:{
handleClick:function(){
console.log('Clicked!');
}
}
})
</script>1.2 如何使用Vue.js
每一个框架的产生都是为了解决某个具体的技术问题，我们先对传统前端开发模式和Vue.js的开发模式做一个对比，以此了解Vue.js产生的背景和核心思想。
1.2.1 传统前端开发模式
前端技术近几年发展迅速，如今前端开发已不再是10年前写个HTNL和Css那样简单了，新的概念层出不穷，比如ECMAScript6、Node.js、NPM、前端工程化等。这些新东西不断优化我们的开发模式，改变我们的编程思想。
随着这些技术的普及，一套可以称为“万金油”的技术栈被许多商业项目用于生产环境：
jQuery+RequireJS+artTemplate+Gulp
这套技术以jQuery为核心，能兼容绝大部分浏览器，这是很多企业比较关心的。使用RequireJS进行模块化开发可以解决代码依赖混乱的问题，同时便于维护和团队协作。使用轻量级的前端模板如doT，可以将数据与HTML模板分离。最后，使用自动化构建工具Gulp可以合并压缩代码。
这一套看似完美无暇的前端解决方案就构成了我们所说的传统前端开发模式，由于它的简单、高效、使用、至今仍有不少开发者在使用。不过随着项目的扩大和时间的推移，出现了更复杂的业务场景，比如SPA(单页面富应用)、组件解耦等。为了提升开发效率、降低维护成本，传统的前端开发模式已不能完全满足我们的要求，这时就出现了诸如Angular、React、Vue.js。
1.2.2 Vue.js的开发模式、
Vue.js是一个渐进式的JavaScript框架，根据项目需求，可以从不同的维度来使用它。如果只是想体验Vue.js带来的快感，或者开发几个简单的HTML5页面或者小应用，可以直接通过Script加载CDN文件。
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>引入Vue.js框架后，在body底部使用new Vue()的方式创建一个实例，这就是Vue.js最基本的开发模式。
图书列表的小demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实例</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="book in books" >{{book.name}}</li>
</ul>
</div>
<script src="img/js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
books: [
{name:'《Vue.js实战》'},
{name:'《Java实战》'},
{name:'《C#实战》'},
]
}
})
</script>
</body>
</html>
对于一些业务逻辑复杂，对前端工程有要求的项目，可以使用Vue单文件的形式配合webpack使用，必要时还会用到vuex来管理状态，vue-router来管理路由。