什么是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操作的复杂性。

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

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

相关文章

安卓笔记-加油-奥利给!

1、安卓中的单位 px: 手机屏幕的最小显示单位,与设备的显示屏有关 dp: 它是与设备无关的显示单位,与屏幕尺寸有关 sp: 它是专门设置字体的大小,在系统设置中可以调整字体大小。 2、视图的宽高 通过属性android:layout_width表达宽度&…

Vue全新一代状态管理库 Pinia【一篇通】

文章目录前言1. Pinia 是什么?1.1 为什么取名叫 Pinia?1.2. 为什么要使用 Pinia ?2. 安装 Pinia2.1.创建 Store2.1.1. Option 类型 Store2.1.2 Setup 函数类型 Store2.1.3 模板中使用3. State 的使用事项(Option Store )3.1 读取 State3.2 …

(数据结构)堆

目录一、介绍二、大(小)堆的实现1. 堆的初始化2. 堆的销毁3. 添加元素4. 删除堆顶元素5.取出堆顶元素三、⭐堆排序1.问题2. 思路3. 代码4.🪄 时间复杂度4.1 向下建堆的时间复杂度:4.2 开始排序的时间复杂度:四、&#…

Linux:C语言实现面向接口编程

面向接口编程不是什么新鲜玩意&#xff0c;说得直白点就是函数指针的使用&#xff0c;不过我觉得可以形成一种编程的思想来指导嵌入式程序设计&#xff0c;特别是对于降低代码的耦合还是比较奏效的。 代码&#xff1a; #include <stdio.h> #include <stdlib.h> #…

【Linux】写一个基础的bash

头文件#include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<sys/wait.h> #include<sys/stat.h> #include<string.h> #include<pwd.h> #include<dirent.h>分割输入的命令串字符串或参数内容为空则退出strtok( ,…

文法和语言的基本知识

一、什么形式化的方法用一套带有严格规定的符号体系来描述问题的方法二、什么是非形式化的方法对程序设计语言的描述从语法、语义和语用三个方面因素来考虑所谓语法是对语言结构定义所谓语义是描述了语言的含义所谓语用则是从使用的角度去描述语言三、符号串字母表和符号串字母…

怎样在外网登录访问CRM管理系统?

一、什么是CRM管理系统&#xff1f; Customer Relationship Management&#xff0c;简称CRM&#xff0c;指客户关系管理&#xff0c;是企业利用信息互联网技术&#xff0c;协调企业、顾客和服务上的交互&#xff0c;提升管理服务。为了企业信息安全以及使用方便&#xff0c;企…

【Linux】进程的基础概念 进程的相关操作 进程的状态

进程一、进程的基本知识1、基本概念2、进程的描述 —— PCB3、task_ struct内容分类二、进程的相关操作1、在Linux下查看进程2、通过系统调用在代码中获取进程标示符3、如何创建子进程4、关于fork()的一些深度理解三、进程的状态Linux中的进程的状态四、僵尸进程与孤儿进程僵尸…

【Vue3】利用vite创建vue3项目

&#x1f3c6;今日学习目标&#xff1a;利用vite创建vue3项目 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人格言&#xff1a;生如芥子&#xff0c;心藏须弥 ⏰本期期数&#xff1a;第二期 &#x1f389;专栏系列&#xff1a;Vue3 文章目录前言vite简介利用vite创建vue3项目…

(算法基础)Bellman-ford算法

适用情景Bellman-ford算法一般运用在求最短路的问题当中&#xff0c;适用于求最短路问题的单源最短路的存在负权边的情况。时间复杂度时间复杂度为O(m&#xff0a;n)&#xff0c;n表示有n个点&#xff0c;m表示有m条边。算法解释首先是循环&#xff08;迭代&#xff09;n次&…

vue后台管理系统——添加i18n国际化功能——技能提升

昨天在写后台管理系统时&#xff0c;遇到一个需求就是需要实现国际化功能。 antd和element-ui这两个框架其实都是有国际化的。 具体展示形式就是如下&#xff1a; 点击右上角头部的语言&#xff0c;切换语言&#xff0c;然后整个系统的文字都改变成对应的语言展示。 切换成…

#D. 竞选班长

题目思路1可以发现题目问的是至少有多少人参加了投票并且题目中有一句不能弃权或投给其它的人所以A和B的票数如果从前往后看的话,那么按理来说应该是不递减的(后面一次票数>前面一次的票数)可是比例是已约过分的所以可能不递减那么我们可以不断将A的票数和B的票数一起*i(i不…

GEE:计算1990-2021年的指数最大值和最小值,并根据最大最小值对每一副影像归一化

本文记录了在GEE平台上计算影像集合中所有像素的最大值和最小值。并且根据该最大最小值对所有影像进行最大最小值归一化。以SAVI为例,记录了主要函数的使用方法和代码。 结果如图所示, 文章目录 一、计算每一副影像的最大值或者最小值,并将最值保存在 List 中二、计算 Lis…

微信小程序项目实例——扫雷

今日推荐&#x1f481;‍♂️ 2023许嵩演唱会即将到来&#x1f3a4;&#x1f3a4;&#x1f3a4;大家一起冲冲冲&#x1f3c3;‍♂️&#x1f3c3;‍♂️&#x1f3c3;‍♂️ &#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;&#x1f52e;往期优质项目实例&#x1f52e…

Redis高级

主从复制 好处&#xff1a; 1.读写分离 2.容灾快速恢复 主从配置 主服务器负责写操作&#xff0c;从服务器只能读 从服务器挂掉 从服务器重启后&#xff0c;仍是主服务器&#xff0c;需要执行 salverof 主机ip 端口 变为从服务器 从服务器会将主服务器的数据从头开始…

操作系统之内存

目录 内存的理解 进程的运行原理 指令 指令各个位置的含义 从写程序要程序运行 链接的三种方式 装入的三种方式&#xff08;逻辑地址转换为物理地址&#xff09; 绝对装入 静态重定位 动态重定位 内存管理 内存保护的两种方法 内存空间的扩充 覆盖技术 交换技术…

基础篇:09-Feign远程调用

回顾最初我们为了实现跨服务调用时&#xff0c;在不使用Dubbo这种RPC协议时&#xff0c;我们借助了RestTemplate对象实现跨服务调用&#xff0c;为了解决跨服务调用时调用地址写死的问题我们又引入了注册中心&#xff0c;从而实现根据服务名的调用。但是回过头来查看我们这段调…

C++线程池理解

线程池基本信息 线程池是一种结合池化思想衍生出来的一种线程管理及使用的方案 其主要针对服务器端多线程场景下&#xff0c;服务器频繁接收请求&#xff0c;每个请求都分配一个单独的线程去处理。 使用线程的开销&#xff1a; 创建和销毁线程调度线程 线程池主要解决的核…

《Roller: Fast and Efficient Tensor Compilation for Deep Learning》

《Roller: Fast and Efficient Tensor Compilation for Deep Learning》 用于深度学习 快速高效的张量编译器 作者 微软亚洲研究院以及多伦多大学等多所高校 摘要 当前编译为了产生高效的kernel时&#xff0c;搜索空间大&#xff0c;通常使用机器学习的方法 找到最优的方案…

对象的创建以及数组中常见的属性与方法

&#xff08;一&#xff09;对象创建的三种方法 1、利用对象字面量创建对象 const obj{ name:小开心 } 2、利用new Object创建对象 const obj1new Object({ name:小开心 }) 3、利用构造函数创建对象 构造函数&#xff1a;是一种特殊的函数&#xff0c;主要用来初始化对象&…
最新文章