0

0

什么是Vue.js框架?

小云云

小云云

发布时间:2018-01-15 13:08:39

|

6585人浏览过

|

来源于php中文网

原创

前文我们和大家分享的是vue.js简易安装和快速入门,本文我们主要和大家分享vue.js框架是什么,为什么要选择它?这篇文章为大家介绍目前前端技术使用的趋势,以及vue.js的优点和适用场景等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

什么是Vue.js框架?

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

那么“大白话,讲编程”系列又回来了,这个系列我们一起学习的是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端,视图切换我们会用标签进行页面的跳转,但如果在移动端,那就歇菜了,你会遇到这样的画面:

(等到花儿都谢了)

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

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

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

3 什么是MVVM

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

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

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


{ 

name:"张三", 
age:21,

}

而中间的监控者就负责监控两侧的数据,并相对应地通知另一侧进行修改。比如:你在Model层中修改了name的值为:“李四”,那么View视图层显示的“张三”也会自动变成了“李四”,而这个过程就是有ViewModel来操作的,不需要你手动地去写代码去实现(你不用再手动操作DOM了)。

如果你写过复杂的DOM操作,你就可以感受到它带来的便利。

jpshop开源微商城小程序系统
jpshop开源微商城小程序系统

jpshop开源微商城小程序系统可以作为常规微商城,也可以作为社区团购系统,开启团长功能,就是社区团购,关闭就是常规微商城。系统采用电商专用Yii2框架+php7.2,后台采用element+vue.js开发,前后端分离。

下载

这就是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框架,其两大核心:数据驱动和组件化。

相关推荐:

Vue.js框架实现火车票查询系统

vue.js实例对象和组件树实例详解

Vue.js组件通信实例分享

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

151

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

312

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

396

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

504

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

187

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

120

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

176

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

40

2026.01.13

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

54

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4.4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.6万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号