什么是Vue

✅作者简介:CSDN一位小博主,正在学习前端,欢迎大家一起来交流学习🏆
📃个人主页:白月光777的CSDN博客
🔥系列专栏:Vue从入门到进阶
💬个人格言:但行好事,莫问前程

在这里插入图片描述

什么是Vue

  • Vue.js简介
  • Vue.js的发展历程
  • 主要应用场景
  • Vue.js的优点
  • Vue.js的核心思想
  • Vue与React、Angular比较
  • MVVM框架概述

Vue.js简介

Vue.js(简称Vue)是一套用于构建用户界面的渐进式框架
构建用户界面:即指用于前端开发
渐进式框架:通俗地说就是没必要弄懂Vue的每一个部件和功能就能够使用Vue。只需要从核心功能开始学习,逐渐扩展,掌握多少用多少,也可以把Vue很方便地和其他已有项目或框架相结合。

Vue.js的发展历程

Vue已成为全世界有较大影响的一个开源框架,作者是尤雨溪,曾就职于Google,由于工作中大量接触开源的Java项目而走上开源之路。Vue.js的发展历程如下:
◾2013年12月8日在GitHub上发布了0.6版本
◾2015年10月正式发布了1.0版本
◾2016年10月正式发布了2.0版本
◾2019年12月14日发布了Vue2.6.11版
每个版本的更新日志见GitHub官网

主要应用场景

Vue一般用于开发单页面应用程序(Single Page Application,SPA
单页面应用程序,就是只有一个HTML页面的应用,用户与应用程序交互时,动态更新该页面的Web应用程序,例如手机APP大多数为SPA,由系统的后端管理系统。

Vue.js的优点

易用:只要有HTML、CSS、JavaScript的基础,就可以阅读官网教程开始构建应用
灵活:Vue有不断繁荣的生态系统,可以在一个库和一套完整框架之间自如伸缩。这也是渐进式框架的体现
高效:Vue的运行大小只有28KB,具有超快模拟DOM,以及最省心的优化

Vue.js的核心思想

数据驱动:DOM的渲染、显示、隐藏、等均由数据的状态控制。当我们决定在项目中属于Vue时,需要转变思路,将操作DOM转化为操作数据。因此,写Vue时,尽量不要有操作DOM的代码出现。
组件化:通过扩展HTML元素。封装可重复使用的代码。

Vue与React、Angular比较

Vue、React和Angular都是用于搭建用户界面的JavaScript库
Augular:2009年诞生,起源于个人开发,后来被Google收购,其核心技术为指令和数据技术
React:2013年5月开源,起源于Faceboook的内部项目,其核心技术为组件化和虚拟DOM技术
Vue:吸收了上面两个框架的技术优点,即借鉴了Augular的指令和React的组件化。,可谓后起之秀,其更轻量、更易上手、学习成本低。
Vue不支持IE8及以下版本,因为Vue使用了IE8无法模拟的ECMAScript5特性。

MVVM框架概述

Vue、React、Angular都是MVVM框架,要理解MVVM框架,首先应了解MVC(Model-View-Controller
MVC是一种表现模式。它将软件的UI部分的设计拆分成三个主要部分。分别是Model、View和Controller。MVC的核心是控制器,它负责处理浏览器传送过来的所有请求,并决定要将什么内容响应给浏览器
Model:即模型,用于存储数据的组件。
View:即视图,根据Model数据进行内容展示的组件
Controller:即控制器,接收并处理用户指令,并返回内容。
MVVM(Model-View-ViewModel)本质上就是MVC的改进版,其核心是ViewModel,它提供了对于Model和View的双向数据绑定,通过ViewMode连接View和Model。确保视图与数据的一致性,而这个过程是框架(Vue)自动完成的,无须手动干预。MVVC框架如下图所示。Model即普通的JavaScript对象也就是数据部分。View即前端展示页面,也就是DOM元素。ViewModel即用于双向绑定数据与页面,也就是Vue实例

在这里插入图片描述
MVVC的核心思想:MVVC属于响应式编程模型,当改变View中的数据时,Model中的数据也跟着改变;当改变Model中的数据时,Vue中的数据也随之改变。这样可避免直接操作DOM,降低DOM操作的复杂性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/2460.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【面试题】大厂面试官:你做过什么有亮点的项目吗?

大厂面试题分享 面试题库前后端面试题库 (面试必备) 推荐:★★★★★地址:前端面试题库前言大厂面试中除了问常见的算法网络基础,和一些八股文手写体之外,经常出现的一个问题就是,你做过什么项目…

React--》状态管理工具—Mobx的讲解与使用

目录 Mobx的讲解与使用 Mobx环境配置 Mobx的基本使用 Mobx计算属性的使用 Mobx监听属性的使用 Mobx处理异步的使用 Mobx的模块化 Mobx的讲解与使用 Mobx是一个可以和React良好配合的集中状态管理工具,mobx和react的关系相当于vuex和vue之间的关系&#xff0…

膜拜!阿里自爆十万字Java面试手抄本,脉脉一周狂转50w/次

最近,一篇题为《阿里十万字Java面试手抄本》的文章在社交媒体平台上引起了广泛关注。这篇文章由一位阿里工程师整理了阿里Java面试的经验,并分享给了大家。这篇文章一经发布,就在短时间内获得了数十万的转发量,让许多Java程序员受…

Linux 网络编程学习笔记——四、HTTP 通信

目录 一、HTTP 代理服务器的工作原理 在 HTTP 通信链上,客户端和目标服务器之间通常存在某些中转代 理服务器,它们提供对目标资源的中转访问。一个 HTTP 请求可能被多个代理服务器转发,后面的服务器称为前面服务器的上游服务器。代理服务器…

基于OpenCV的人脸识别

目录 🥩 前言 🍖 环境使用 🍖 模块使用 🍖 模块介绍 🍖 模块安装问题: 🥩 OpenCV 简介 🍖 安装 OpenCV 模块 🥩 OpenCV 基本使用 🍖 读取图片 🍗 【…

技术人的管理学-业务管理

主要内容前言制定计划遇到的问题?过程监控遇到的问题?复盘改进遇到的问题?通过PDCA循环解决业务管理问题总结前言 没有人天生就会管理,优秀的管理者都是在知行合一的过程中成长起来的,他们既需要系统的管理知识&#…

Java基础知识之Map的使用

一、Map介绍 Map是用于保存具有映射关系的数据集合&#xff0c;它具有双列存储的特点&#xff0c;即一次必须添加两个元素&#xff0c;即一组键值对><Key,Value>&#xff0c;其中Key的值不可重复&#xff08;当Key的值重复的时候&#xff0c;后面插入的对象会将之前插…

单片机中按键检测函数详细分析经典

​ 目录 一、如何进行按键检测 1.从裸机的角度分析 2.从OS的角度分析 二、最简单的按键检测程序 三、为什么要了解FIFO 四、什么是FIFO 五、按键FIFO的优点 六、按键 FIFO 的实现 1.定义结构体 2.将键值写入FIFO 3.从FIFO读出键值 4.按键检测程序 5.按键扫描 7.…

简易的html5视频播放倍速代码写法

HTML5视频标签有一个叫做playbackRate的属性&#xff0c;用于设置倍速播放。例如设置播放速度为2倍&#xff0c;可以写成&#xff1a; <video src"video.mp4" autoplay controls playbackRate"2"></video> 同时&#xff0c;可以使用JavaScri…

推荐 5 个好玩的 ChatGPT 开源应用

推荐 5 个基于 ChatGPT 的开源应用&#xff1a;基于强大的 GPT 大模型能力&#xff0c;看能开出什么好玩有趣实用的应用。本期推荐开源项目目录&#xff1a;1. 基于 OpenAI 的翻译应用2. 让 ChatGPT 支持图片3. 你的 AI 助手4. 可以与 ChatGPT 联动的智能音箱5. ChatGPT 快捷键…

【thingsboard】实现设备联动

本实验实现:通过在thingsboard中配置规则链和数据解析脚本,实现智能场景下的设备联动 点赞收藏,评论区获取原文 0.实验结果 描述:节点RAK3272模拟采集温度值,上传thingsboard平台;温度值大于32℃,控制节点LM401的led灯亮(模拟报警功能);温度值低于32℃,控制led灯灭(…

借助CatGPT让turtlesim小乌龟画曲线

注意这里是CatGPT&#xff0c;不等同OpenAI的ChatGPT&#xff0c;但是用起来十分方便&#xff0c;效果也还行。详细说明ROS机器人turtlesim绘制曲线需要注意哪些ROS机器人turtlesim绘制曲线需要注意以下几点&#xff1a;绘制曲线前需要设置好turtlesim的初始位置和方向&#xf…

【JUC进阶】从源码角度万字总结ReentrantLock与AQS

文章目录1. 什么是ReentrantLock2. AQS2.1 CLH队列3. ReentrantLock源码解析3.1 非公平锁 NonfairSync3.2 公平锁 FairSync3.3 解锁1. 什么是ReentrantLock ReentrantLock是一个互斥锁&#xff0c;能够实现共享数据做互斥同步&#xff0c;这样在同一个时刻保证了只有一个线程能…

iOS 紧急通知

一般通知 关于通知的各种配置和开发&#xff0c;可以参考推送通知教程&#xff1a;入门 – Kodeco&#xff0c;具有详细步骤。 紧急通知表现 紧急通知不受免打扰模式和静音模式约束。当紧急通知到达时&#xff0c;会有短暂提示音量和抖动&#xff08;约2s&#xff09;。未锁…

企业增长秘诀丨设立优质的帮助中心,加深用户产品使用深度,促进产品转化

客户的留存问题一直备受企业关注&#xff0c;留存率的高低反应了产品的真实状况&#xff0c;将直接影响企业后期的发展规划。下文将为大家剖析下产品中客户的转化流程&#xff0c;以及如何提高产品的使用深处与复购率。 产品中&#xff0c;从客户生命周期角度&#xff0c;可分…

ChatGPT和百度文心一言写用例,谁更强?

文心一言发布的第一时间&#xff0c;就排队申请了邀请码&#xff0c;昨晚看了下&#xff0c;邀请码已经到手&#xff0c;索性就拿一个例子试了一下&#xff0c;看看哪个能够真正意义上的提高生产力&#xff0c;最简单的录制了个GIF动画如下&#xff1a;问题&#xff1a;你是一个…

Web前端:6种基本的前端编程语言

如果你想在前端web开发方面开始职业生涯&#xff0c;学习JavaScript是必须的。它是最受欢迎的编程语言&#xff0c;它功能广泛&#xff0c;功能强大。但JavaScript并不是你唯一需要知道的语言。HTML和CSS对于前端开发至关重要。他们将帮助你开发用户友好的网站和应用程序。什么…

【Linux】动静态库

认识动静态库静态库&#xff08;.a&#xff09;&#xff1a;程序在编译链接的时候把库的代码链接到可执行文件中。程序运行的时候将不再需要静态库动态库&#xff08;.so&#xff09;&#xff1a;程序在运行的时候才去链接动态库的代码&#xff0c;多个程序共享使用库的代码。一…

MySQL注入秘籍【绕过篇】

MySQL注入秘籍【绕过篇】1.通用方法2.绕过空格3.绕过引号4.绕过逗号,5.绕过等号6.绕过and/or7.绕过注释符8.绕过函数检测1.通用方法 编码 编码无非就是hex、url等等编码&#xff0c;让传到数据库的数据能够解析的即可&#xff0c;比如URL编码一般在传给业务的时候就会自动解码…

【沐风老师】3DMAX交通流插件TrafficFlow使用方法详解

TrafficFlow交通流插件&#xff0c;模拟生成车流、人流动画。 【版本要求】 3dMax 2008及更高版本 【安装方法】 无需安装直接拖动插件脚本文件到3dMax视口中打开。 【快速开始】 1.创建车辆对象和行车路径。 2.打开TrafficFlow插件&#xff0c;先选择“车辆”对象&#xff0…