什么是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 相关文章推荐
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
js上传图片预览的实现方法
May 09 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
Sep 02 Javascript
详细分析vue响应式原理
Jun 22 Javascript
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
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 面向对象 final类与final方法
2010/05/05 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
JavaScript 比较时间大小的代码
2010/04/24 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
js精美的幻灯片画集特效代码分享
2015/08/29 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
angular 动态组件类型详解(四种组件类型)
2017/02/22 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
Vue 监听元素前后变化值实例
2020/07/29 Javascript
vue实现公共方法抽离
2020/07/31 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
使用python实现rsa算法代码
2016/02/17 Python
python 时间戳与格式化时间的转化实现代码
2016/03/23 Python
自学python的建议和周期预算
2019/01/30 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
巧用CSS3的calc()宽度计算做响应模式布局的方法
2018/03/22 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
货代行业个人求职简历的自我评价
2013/10/22 职场文书
小学生演讲稿
2014/01/12 职场文书
入党自我评价优缺点
2014/01/25 职场文书
门面房租房协议书
2014/08/20 职场文书
组工干部演讲稿
2014/09/02 职场文书