什么是Vue.js框架 为什么选择它?


Posted in Javascript onOctober 17, 2017

“大白话,讲编程”系列又回来了,这个系列我们一起学习的是Vue.js基础知识。你没看错,是基础知识。所以,哪怕你入行不久,相信你在的大白话风格下,也能学会。

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

1 学习目标

通过这一节,你会学会:

1.目前前端技术使用的趋势

2.什么是MVVM

3.Vue.js的优点

4.Vue.js的两大核心

5.Vue.js的适用场景

2 诞生背景

近几年来,得益于手机设备的普及和性能的提升,移动端的web需求大量增加,产生了一种叫webapp的东西,也就是移动端的网页应用。

它们功能越来越复杂,交互也越来越酷炫,功能与效果越来越接近于原生的APP。比如下面这些:

什么是Vue.js框架 为什么选择它?

什么是Vue.js框架 为什么选择它?

(效果直逼原生APP)

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

在PC端,视图切换我们会用标签进行页面的跳转,但如果在移动端,那就歇菜了,你会遇到这样的画面:

什么是Vue.js框架 为什么选择它?

(等到花儿都谢了)

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

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

为了解决webapp这些的体验和开发上的不足,我们决定学习并使用一个MVVM框架——Vue.js

3 什么是MVVM

MVVM可以拆分成:View --- ViewModel --- Model三部分 ,看下面的视图:

什么是Vue.js框架 为什么选择它?

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

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

而中间的监控者就负责监控两侧的数据,并相对应地通知另一侧进行修改。比如:你在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框架 为什么选择它?

具体在开发过程中怎样实现一个组件,到底哪些区块可以划分成一个组件,后面的章节我们再一一介绍,这里你只需要知道,在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前端教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解析js原生方法创建表格效率测试
Jul 08 Javascript
JavaScript使用循环和分割来替换和删除元素实例
Oct 13 Javascript
jQuery中prev()方法用法实例
Jan 08 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
Oct 17 Javascript
vue实现简单的星级评分组件源码
Nov 16 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
js实现数据导出为EXCEL(支持大量数据导出)
Mar 31 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
js实现3D旋转效果
Aug 18 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
node使用Koa2搭建web项目的方法
Oct 17 #Javascript
Node 自动化部署的方法
Oct 17 #Javascript
利用JS实现scroll自定义滚动效果详解
Oct 17 #Javascript
jquery实现图片跟随鼠标的实例
Oct 17 #jQuery
vue获取input输入值的问题解决办法
Oct 17 #Javascript
node.js 用socket实现聊天的示例代码
Oct 17 #Javascript
Bootstrap图片轮播效果详解
Oct 17 #Javascript
You might like
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
深入密码加salt原理的分析
2013/06/06 PHP
WordPress中编写自定义存储字段的相关PHP函数解析
2015/12/25 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
jQuery插件开发详细教程
2014/06/06 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
python list使用示例 list中找连续的数字
2014/01/27 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
Python用SSH连接到网络设备
2021/02/18 Python
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
2018/09/10 HTML / CSS
资深地理教师自我评价
2013/09/21 职场文书
架构师岗位职责
2013/11/18 职场文书
平安工地汇报材料
2014/08/19 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
企业战略合作意向书
2015/05/08 职场文书
格列夫游记读书笔记
2015/07/01 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python
Redis中一个String类型引发的惨案
2021/07/25 Redis