Vue.js框架是什么，为什么选择它？
1.诞生背景
近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，产生了一种叫webapp的东西，也就是移动端的网页应用。
它们功能越来越复杂，交互也越来越酷炫，功能与效果越来越接近于原生的APP。比如下面这些：
这种webapp它们不仅仅像h5营销网页一样有酷炫的效果，它们还有复杂的点击、输入、下拉选择，视图切换等复杂的交互。在这样的业务需求下，我们还是沿用PC端的开发方案，难免会不太合适。比如：视图切换。
在PC端，视图切换我们会用<a>标签进行页面的跳转，但如果在移动端，那就歇菜了，你会遇到这样的画面：
（等到花儿都谢了）
这个时候用户只能等.....3秒，5秒，8秒.......很难想象，在一个需要频繁切换视图的webapp里面，使用<a>标签去实现，对用户来说是很不友好的。
此外，接收用户输入的同时，很可能要及时更新视图，比如用户输入不同的内容，页面就会相对应进行更新，点击不同的选项，就会显示不同的状态等等交互效果。一旦这种交互多了，你要手动地进行操作，代码就容易变得复杂和难以维护。
为了解决webapp这些的体验和开发上的不足，我们决定学习并使用一个MVVM框架——Vue.js
2.什么是MVVM
MVVM可以拆分成：View --- ViewModel --- Model三部分 ，看下面的视图：
那么，我们怎么理解MVVM呢？
上图中，左侧的View相当于我们的DOM内容，我们所看到的页面视图，右侧的Model相当于我们的数据对象，比如一个对象的信息：
{
name:"张三",
age:21,
}而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。比如：你在Model层中修改了name的值为：“李四”，那么View视图层显示的“张三”也会自动变成了“李四”，而这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现（你不用再手动操作DOM了）。
如果你写过复杂的DOM操作，你就可以感受到它带来的便利。
这就是MVVM框架，属于MVVM的JS框架除了Vue.js，还有React.js，Angular.js。
这里我们不去分析具体这3个框架哪个更好，关于技术选型，每个开发团队的情况都不一样，考虑的因素也不一样，只要合适自己就好。这里我们只说一下Vue.js的优点：
1.Vue.js更轻量更快
2.更容易上手，易学
3.Vue的核心
我们就来认识一下Vue.js，这里摘取一段官网对它的介绍：
通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件
这句话有两个关键词：数据绑定 和 视图组件。
Vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变DOM来改变视图，vuejs只需要改变数据，就会自动改变视图。再也不用你去操心DOM的更新了，这就是MVVM思想的实现。
视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。看下图：
具体在开发过程中怎样实现一个组件，到底哪些区块可以划分成一个组件，后面再说，这里你只需要知道，在Vue.js中，网页是可以看成多个组件组成的即可。
4.适用场景
如果你还在用jquery频繁操作你的DOM来更新页面的话，那么，你可以用Vue.js来解放你的DOM操作了。
如果你的项目中有多个部分是相同的，并可以封装成一个组件，那么，你可以试试用Vue.js。
此外，Vue.js的核心实现中使用了ES5的Object.defineProperty特性，IE8及以下版本浏览器是不兼容的，所以，你的项目需要兼容这些较低版本的浏览器的话，那么，Vue.js就不适用了。
5.简易安装
要使用Vue.js，我们得先把它安装到我们的项目中，说明了简易安装，我们讲解的肯定是最简单的方法，先不管那些高大上的费时间的安装方法，直接引入一个js文件，先把代码敲代码再说。
<head>
<meta charset="UTF-8">
<title>简易安装 Vue.js</title>
<script src="vue.js"></script>
</head>官网提供了Vue.js源码下载的地方：
https://cdn.jsdelivr.net/vue/2.1.3/vue.js
如果你不想下载到本地，要可以直接用CDN的方式，引入网上资源，一样可以：
<script src="https://xx/vue.js"></script>这样，我们就成功地用最简单的方法把Vue.js引入到我们的项目中了。至于那些高大上的npm，Bower等花式安装方法，后面再讲。
6. 数据驱动视图
引入之后，我们就可以把它用起来。最厉害的地方是数据驱动视图，解放DOM操作，让你不再做又复杂又耗性能的DOM操作。
假设，我们现在要把js对象中的某个变量的值渲染在页面上，传统的做法，就是先用getElementById获取到DOM节点对象，再innerHTML设置它的内容。
现在，在Vue.js中，你需要这样做：
<div id="app">
{{ name }}
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
name:"web前端教程",
}
});
</script>我们通过new Vue( )创建一个实例vm，参数是一个json对象，属性el提供一个在页面上存在的DOM 元素(id='app')，表明这个实例是关联指定的DOM节点。
在DOM节点上，我们就可以使用双大括号{{ }}的语法来渲染Vue实例对象data中已经存在的属性值，如上面案例中的name属性的值“web前端教程”就会被渲染到页面中，替换{{ name }} 显示效果为：“web前端教程”。
在此过程中，我们并没有写过操作DOM节点的代码，而且，上一节我们讲过，MVVM模式中的viewModel充当着监控者的角色，假如它监控到model数据发生了变化，便会通知view视图进行更新，这个过程并不需要你去参与。
这就是Vue.js的数据驱动视图。
7.双向绑定
更方便的是，Vue.js还提供了方便的语法指令，实现视图和数据的双向绑定，也就是说，不但数据变化了可以驱动视图，用户在页面上做了一些操作，也很方便地实现更新model层的数据。
例子：监听用户在页面输入框输入的内容，然后将其实时更新在页面上。
在Vue中我们使用v-model指令就可以轻松实现。（v-model是什么东西，先不用管）。
<div id="app">
<input v-model="number">
<p>数字:{{ number }}</p>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
number:"",
}
});
</script>
效果如下面的动图：
案例中，我们不需要写代码去监听input控件的内容变化，用户输入的内容，会实时地更新vm实例中的data属性number的值，一旦number更新了，视图也会跟着更新了。因为这一切，都由Vue.js帮你完成了。
8. 组件
上面的我们演示了Vue.js的数据驱动，别忘了，上一节我们提到Vue.js还有一个重要的核心，就是：组件化。
组件化就是把页面中特定的区块独立抽出来，并封装成一个可方便复用的组件。
例子：假设，页面上有多个一样的卡片
传统的办法，我们可以要写三份同样的HTML布局：
<div id="app">
<!--第1个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
<!--第2个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
<!--第3个卡片-->
<div class="card">
<img src="logo.png" alt="">
<h2>web前端</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>
</div>如果我们把每个卡片看作一个可复用的区域的话，那么它就可以封装成一个组件。
在Vue.js中，我们试着把卡片封装成一个组件。
<div id="app">
<card></card>
<card></card>
<card></card>
</div>
<script>
//注册一个名叫card的组件
Vue.component('card',{
template:`<div>
<img src="logo.png" alt="">
<h2>web前端</h2>
<p>这里是描述，很长的描述</p>
<button>我是按钮</button>
</div>`
});
new Vue({
el:"#app"
});
</script>我们用Vue.component(tagName, options)注册了一个名字叫card的组件，这样，在需要复用这个组件的地方，我们只需要使用<card></card>就可以了。实际开发中，组件比这个复杂得多，越复杂，封装后的便利性越高。
可能你会说，组件里面的显示的内容不可能全都一样。放心，Vue为组件提供了props属性来接受传递进来的参数，稍后再介绍其用法。