什么是Vue.js框架 为什么选择它？(第一课)
“大白话，讲编程”系列又回来了，这个系列我们一起学习的是vue.js基础知识。你没看错，是基础知识。所以，哪怕你入行不久，相信你在的大白话风格下，也能学会。
但还是希望你有开发过html，css，javascript的项目经验，如果你连一点项目经验都没有，亦或者你早已掌握vue.js的知识，那么这个系列不适合你当前的学习阶段。
1 学习目标
通过这一节，你会学会：
1.目前前端技术使用的趋势
2.什么是mvvm
3.vue.js的优点
4.vue.js的两大核心
5.vue.js的适用场景
2 诞生背景
近几年来，得益于手机设备的普及和性能的提升，移动端的web需求大量增加，产生了一种叫webapp的东西，也就是移动端的网页应用。
它们功能越来越复杂，交互也越来越酷炫，功能与效果越来越接近于原生的app。比如下面这些：
（效果直逼原生app）
这种webapp它们不仅仅像h5营销网页一样有酷炫的效果，它们还有复杂的点击、输入、下拉选择，视图切换等复杂的交互。在这样的业务需求下，我们还是沿用pc端的开发方案，难免会不太合适。比如：视图切换。
在pc端，视图切换我们会用<a>标签进行页面的跳转，但如果在移动端，那就歇菜了，你会遇到这样的画面：
（等到花儿都谢了）
这个时候用户只能等.....3秒，5秒，8秒.......很难想象，在一个需要频繁切换视图的webapp里面，使用<a>标签去实现，对用户来说是很不友好的，换你你也不愿意等那么久，反正我是不愿意了....
此外，接收用户输入的同时，很可能要及时更新视图，比如用户输入不同的内容，页面就会相对应进行更新，点击不同的选项，就会显示不同的状态等等交互效果。一旦这种交互多了，你要手动地进行操作，代码就容易变得复杂和难以维护。
为了解决webapp这些的体验和开发上的不足，我们决定学习并使用一个mvvm框架——vue.js
3 什么是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.更容易上手，易学
4 vue的核心
铺垫了这么多，终于讲到了vue的核心。
那么，我们就来认识一下vue.js，这里摘取一段官网对它的介绍：
通过尽可能简单的api实现响应的数据绑定和组合的视图组件
这句话有两个关键词：数据绑定和视图组件。
vue的数据驱动：数据改变驱动了视图的自动更新，传统的做法你得手动改变dom来改变视图，vuejs只需要改变数据，就会自动改变视图，一个字：爽。再也不用你去操心dom的更新了，这就是mvvm思想的实现。
视图组件化：把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。看下图：
具体在开发过程中怎样实现一个组件，到底哪些区块可以划分成一个组件，后面的章节我们再一一介绍，这里你只需要知道，在vue.js中，网页是可以看成多个组件组成的即可。
5 适用场景
如果你还在用jquery频繁操作你的dom来更新页面的话，那么，你可以用vue.js来解放你的dom操作了。
如果你的项目中有多个部分是相同的，并可以封装成一个组件，那么，你可以试试用vue.js。
此外，vue.js的核心实现中使用了es5的object.defineproperty特性，ie8及以下版本浏览器是不兼容的，所以，你的项目需要兼容这些较低版本的浏览器的话，那么，vue.js就不适用了。
毕竟，开发一个项目的目的不是为了使用某个框架。
6 本节小结
为了更好满足当前移动webapp项目的开发需求，mvvm框架诞生，而vue.js便是这样的一种js框架，其两大核心：数据驱动和组件化。
来源：公众号：web前端教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。