欢迎访问CSDN博客专栏CSDN专栏 Java全栈之路,Github主页

摘要:

希望你有开发过html,css,javascript的项目经验,如果你连一点项目经验都没有,亦或者你早已掌握Vue.js的知识,那么这个系列不适合你当前的学习阶段。

1 学习目标

通过这一节,你会学会:

1.目前前端技术使用的趋势
2.什么是MVVM
3.Vue.js的优点
4.Vue.js的两大核心
5.Vue.js的适用场景

2 诞生背景

近几年来,得益于手机设备的普及和性能的提升,移动端的web需求大量增加,产生了一种叫webapp的东西,也就是移动端的网页应用。
它们功能越来越复杂,交互也越来越酷炫,功能与效果越来越接近于原生的APP。比如下面这些:

App图片1
App图片2
(效果直逼原生APP)

这种webapp它们不仅仅像h5营销网页一样有酷炫的效果,它们还有复杂的点击、输入、下拉选择,视图切换等复杂的交互。在这样的业务需求下,我们还是沿用PC端的开发方案,难免会不太合适。比如:视图切换。

在PC端,视图切换我们会用标签进行页面的跳转,但如果在移动端,那就歇菜了,你会遇到这样的画面:
网页加载地址栏图片
(等到花儿都谢了)

这个时候用户只能等…..3秒,5秒,8秒…….很难想象,在一个需要频繁切换视图的webapp里面,使用标签去实现,对用户来说是很不友好的,换你你也不愿意等那么久,反正我是不愿意了….

此外,接收用户输入的同时,很可能要及时更新视图,比如用户输入不同的内容,页面就会相对应进行更新,点击不同的选项,就会显示不同的状态等等交互效果。一旦这种交互多了,你要手动地进行操作,代码就容易变得复杂和难以维护。

为了解决webapp这些的体验和开发上的不足,我们决定学习并使用一个MVVM框架——Vue.js
搞得好像不会点MV***框架好像很out一样

3 什么是MVVM

MVVM可以拆分成:View — ViewModel — Model三部分 ,看下面的视图:
DOM 监控着 数据图

那么,我们怎么理解MVVM呢?

上图中,左侧的View相当于我们的DOM内容,我们所看到的页面视图,右侧的Model相当于我们的数据对象,比如一个对象的信息:

1
2
3
4
{
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.更容易上手,易学