01-vue的核心和传统开发的区别

news2024/11/18 9:25:38

前端行业历史发展

🍕🍕🍕最早的网页是没有数据库的,可以理解为在网络上一张

报纸,直到CGI技术的出现,运行一小段代码与数据库或文件

系统进行交互,如98年的 Google

Asp,JSP的出现,05年左右,取代了CGI,增强了WEB与服务器的交互的安全,其实就是java + HTML
ajax技术手段的爆发,99年已出现。


Jquery的出现,SPA的雏形,AngularJS前端框架的出现,但此

时的SPA的路并不好走,很多不足没有很好的处理。但是相比

之前的已经节约了大量的开发者精力,降低了开发者和开发过

程的门槛。

近几年的发展,Web技术的变化之大与迅速,每一种新的技术

的出现都是一些特定场景的解决方案,Vue又是为了解决什么

呢?

一、pandas是什么?

示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。

二、vue是什么

最早发布于2014年2月
是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。

Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互

三、Vue核心特性

数据驱动(MVVM)

MVVM表示的是 Model-View-ViewModel

  • Model:模型层,负责处理业务逻辑以及和服务器端进行交互
  • View:视图层:负责将数据模型转化为UI展示出来,可以简单的理解为HTML页面
  • ViewModel:视图模型层,用来连接Model和View,是Model和View之间的通信桥梁

组件化

1.就是把图形、非图形的各种逻辑均抽象为一个统一的概念(组件)来实现开发的模式,在Vue中每一个.vue文件都可以视为一个组件
2. 优势

  • 降低整个系统的耦合度
  • 调试方便
  • 提高可维护性,由于每个组件的职责单一,并且组件在系统中是被复用的,所以对代码进行优化可获得系统的整体升级

指令系统

1.指令 (Directives) 是带有 v- 前缀的特殊属性作用
2.当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

  • 条件渲染指令 v-if
  • 列表渲染指令v-for
  • 属性绑定指令v-bind
  • 事件绑定指令v-on
  • 双向数据绑定指令v-model

四、Vue跟传统开发的区别

没有落地使用场景的革命不是好革命,注册账号场景
在这里插入图片描述
传统实现方式,选择流程dom对象,点击按钮隐藏当前活动流程dom对象,显示下一流程dom对象

vue实现,双向绑定使dom节点跟视图绑定后,通过修改变量的值控制dom节点的各类属性。所以其实现思路为:视图层使用一变量控制dom节点显示与否,点击按钮则改变该变量

  • Vue所有的界面事件,都是只去操作数据的,Jquery操作DOM
  • Vue所有界面的变动,都是根据数据自动绑定出来的,Jquery操作DOM

五、Vue和React对比

相同点:

  • 都有组件化思想
  • 都支持服务器端渲染
  • 都有Virtual DOM(虚拟dom)
  • 数据驱动视图
  • 都有支持native的方案:Vue的weex、React的React native
  • 都有自己的构建工具:Vue的vue-cli、React的Create React App

区别:

  • 数据流向的不同。react从诞生开始就推崇单向数据流,而Vue是双向数据流
  • 数据变化的实现原理不同。react使用的是不可变数据,而Vue使用的是可变的数据
  • 组件化通信的不同。react中我们通过使用回调函数来进行通信的,而Vue中子组件向父组件传递消息有两种方式:事件和回调函数
  • diff算法不同。react主要使用diff队列保存需要更新哪些DOM,得到patch树,再统一操作批量更新DOM。Vue 使用双向指针,边对比,边更新DOM

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vscode编写stm32代码

vscode编辑keil项目,无需复杂步骤 keil开发是挺难用的,vscode又是编辑神器,keil调试vscode编辑代码可以大幅度提高效率,因此可以借用vscode来编辑代码。 1安装c插件 安装c与extension pack插件 2配置c_cpp_properties.json文…

OSI参考模型通信处理例子【图解TCP/IP(笔记四)】

文章目录 OSI参考模型通信处理举例7层通信■ 应用层■ 表示层■ 会话层■ 传输层■ 网络层■ 数据链路层、物理层 OSI参考模型通信处理举例 下面举例说明7层网络模型的功能。假设使用主机(这里所指的主机是指连接到网络上的计算机。按照OSI的惯例,进行通…

C++——this指针

1.什么是this指针? this指针是C中的一个特殊指针,它指向当前对象的地址。在类的成员函数中,this指针可以用来访问当前对象的成员变量和成员函数。this指针的作用是区分同名的成员变量和局部变量,以及在成员函数中访问其他成员函数…

C# PaddleOCR ch_PP-OCRv3 ch_PP-OCRv4测试

效果 未开启Onnx,V3 未开启Onnx,V4 开启Onnx,V3 开启Onnx,V4 项目 VS2022.net 4.8OpenCvSharp4 Sdcb.PaddleInference/2.5.0-preview.1 Sdcb.PaddleOCR/2.6.0.6-preview.1 代码 using OpenCvSharp; using Sdcb.PaddleInference; using Sdcb.PaddleOCR; using Sdcb.Paddle…

Spark—通过Java、Scala API实现WordCount案例的基本操作

实验原理 Spark的核心就是RDD,所有在RDD上的操作会被运行在Cluster上,Driver程序启动很多Workers,Workers在(分布式)文件系统中读取数据后转化为RDD(弹性分布式数据集),然后对RDD在…

Centos7编译安装ffmpeg

1、准备工作,安装必要的环境 yum install autoconf automake bzip2 cmake freetype-devel gcc gcc-c git libtool make mercurial pkgconfig zlib-devel 2、创建目录 ffmpeg_sources 目录是下载软件包的目录 ffmpeg 目录是安装目录 mkdir /usr/local/ffmpeg_sour…

库表实验操作

目录 1、创建数据库Market,在 Market中创建数据表customers。​编辑 2、在Market中创建数据表orders。 3、创建数据库Team,定义数据表player。 1、创建数据库Market,在 Market中创建数据表customers。 (1)mysql>…

CentOS7下安装设置MySQL

CentOS7下安装设置MySQL 1.下载MySQL 1.1下载安装MySQL官方yum源配置 wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 1.2yum下安装MySQL yum -y install mysql57-community-release-el7-11.noarch.rpm 1.3安装MySQL服务器 yum -y install mysq…

一文讲解Linux上部署Web项目(war包)

一文讲解Linux上部署Web项目(war包) 生成war包 ​ 首先,我们要先将Web项目打成war包 ​ 连接Linux服务器 ​ 这里我们通过SSH客户端,连接远程Linux服务器,需要提前知道Linux的IP地址、登录用户名、密码等&#x…

zabbix基础5——screen屏幕展示、主机模板的使用、用户权限设置

文章目录 一、screen1.1 zabbix屏幕展示1.2 screen命令 二、zabbix模板2.1 创建模板2.2 复制模板2.3 模板导出2.4 模板删除2.5 模板导入 三、主机和主机组3.1 添加主机组3.2 导出主机模板3.3 导入主机模板 四、用户和用户组4.1 创建用户组4.2 创建用户4.3 用户权限设置 一、scr…

ETHERNET/IP 转ETHERCAT连接ethercat总线伺服如何控制

远创智控YC-EIP-ECT网关连接到ETHERNET/IP总线中做为从站使用,连接到ETHERCAT总线中做为从站使用,可以同时满足多种工业生产的需求。支持广泛的设备类型,可以和多种不同的设备进行通讯。 技术参数 ETHERNET/IP 技术参数 ● 网关做为 ETHERN…

LeetCode 方法整理(部分更新中)

1、迭代,链表反转 listNode prev null, next, curr head; while (curr ! null) {next curr.next;curr.next prev;curr next;prev curr;curr next; } return prev;2、递归,链表反转 /*// 两个节点时 head.next.next head; head.next…

苹果手机怎么设置日程安排提醒闹钟?简单几步

在忙碌的工作和生活中,我们经常会忘记重要的约会、会议和任务。这时候,一个可靠的日程提醒闹钟就显得尤为重要了。通过在手机上设置日程安排提醒闹钟,让我们不再错过任何重要的事情。 那么苹果手机怎么设置日程安排提醒闹钟? 敬…

硬件电路设计--运算放大器(一)参数和分类

文章目录 前言一、运放分类1.1 功能分类1.2 按单颗IC封装1.3 第一脚的判断 二、运放参数2.1 理想运放2.2 实际运放2.3 数据手册中的重要参数2.3.1 供电电压Vs(power supply)2.3.2 虚短虚断2.3.3 输入偏置电流Ib2.3.4 噪声Vn2.3.5 静态电流IQ2.3.6 输入失…

用户端Web测试方法与技术

目录: WEB 测试概念WEB 测试的价值WEB 测试学习路线WEB 基础知识html讲解javascript讲解css讲解web项目测试流程web测试设计思路web端常见bug解析Litemall购物车功能测试用例设计浏览器开发者工具web兼容测试策略Litemall购物车功能测试执行 1.WEB 测试概念 WEB…

【InnoDB 存储引擎】5.4.5 The Slow Query Log(慢日志实验)

文章目录 1 慢日志实验环境准备2 开始实验2.1 实验 1:超过查询时间相关慢日志并观察2.2 实验 2:不使用索引相关慢日志并观察2.3 实验 3:打印额外的慢日志信息2.4 实验 4:使用 mysqldumpslow 工具分析日志文件2.5 实验 5&#xff1…

《UNUX环境高级编程》(7)进程环境

1、引言 2、main函数 main函数的原型/*argc是命令行参数的数目,argv是指向各个指针所构成的数组*/ int main(int argc,char *argv[]);3、进程终止 有八种方式使进程终止。其中5种是正常,它们是: 从main函数返回调用exit调用_exit或_Exit最后…

看一看LRU与LFU

LRU(Least recently used:最近最少使用)和LFU(Least frequently used:最不经常使用),两个都是以链表结构为基础,一般是作为缓存使用,当然,既然是缓存&#xf…

第六章:L2JMobius学习 – 源码讲解网络数据通信

本章节介绍客户端和服务器端的网络数据通信,使用的技术是Java NIO(也就是套接字Socket)。服务器端和客户端使用Socket通信的原因在于,它是双向的,持久的。也就是说,服务器端可以随时的向客户端发送数据&…

Tomcat7部署war包getshell 漏洞复现

为方便您的阅读,可点击下方蓝色字体,进行跳转↓↓↓ 01 漏洞描述02 验证方式03 利用方式04 修复方案 01 漏洞描述 Tomcat支持在后台部署war文件,可以直接将webshell部署到web目录下。其中,欲访问后台,需要对应用户有相…