百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

HTML+JS框架下开发与VUE框架下开发最基础的区别

liuian 2024-12-12 13:28 21 浏览

今天我来谈谈我对传统HTML与VUE的区别理解(不谈太深的区别，查了一下网上那些说的都一样，我只谈很多人最关心的不一样的，说不对请理解,对不太了解或想了解VUE的人)。

1、 什么是vue

官网介绍：vue是一套构建用户界面的渐进式框架。它与其他重量级框架不同的是，vue采用自下而上增量开发的设计。Vue的核心库只关注视图层，非常容易学习，非常容易与其他库或已有项目整合。

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图层组件。


2、什么是HTML(HTML5)

HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。

总结：它们相同的地方就一句话:用途和结果都是一样的，不管是VUE还是HTML，最终都是将数据使用各种UI及方式展现给用户，也就是都是视图层页面的。

有人会说使用HTML和VUE开发有什么区别呢？许多人觉得结果都是视图层表达，而且VUE打包发布后不还是HTML+一堆JS文件，而且还要引入导入编译感觉特麻烦，感觉VUE好难，为什么要学VUE？

1、开发和部署

VUE 开发过程确实挺麻烦的，要安装依赖，要npm一堆包(还经常失败)。而HTML就简单多了，直接就拿来主意，下载下来，改改就用。

部署的话都差不多，都是在任何服务上都可以直接使用，而且都没有什么依赖。

但是我觉得VUE的开发类似于开发一个APP，所以他的打包结果是比纯HTML+JS更安全的，相当于做过混淆，因而他发布后的体积更小。

2、数据通讯

HTML+JS 数据POST,GET 等基本访问方式，但是如果直接在HTML中使用数据判断，或数据循环输出必须借助js,jquery等通过前端处理然后对id进行赋值操作，所以一般只能借助动态语言如php,java,.net等语言环境进行转化，但这样使得web对动态语言环境依赖性过强，造成后端迁移时太过于复杂，而且这样的Web一般要求前端和后端部署在一起。

VUE则不依赖于动态语言输出环境，只要是双方约定了数据传输接口，服务器放在哪里，不管使用什么后台语言都没关系，因而他的灵活性更强。

3、安全性

有些产品有些公司对语言是有选择的，主要是不想让代码暴露太多，而HTML+JS的方式往往是达不到要求的，因而现在许多企业还是在使用桌面软件的形式，又或者是要你使用对方的云服务，而私有云部署则要贵的很多，而且比较贵的软件还要安装秘钥软件，加密狗等方式，无非就是防止你将软件转移或无限使用或获取他的核心算法（虽然js也是有混淆方法的，但很少有人会这么做，我也没试过但是很影响效率）。

以前我在一个公司就是加班写了一个WEB程序里边有一个算法是分析公司产品结构的（那时VUE还不盛行），正好呢又遇到一个懂点的老板(居然会用F12)，结果看到核心代码了，当时就否定了，改用了WinForm 重写，那个辛苦你懂的。

VUE的打包的话，其实就是根据在页面中所使用到的组件然后根据你的逻辑关系等进行混淆打包，然后在用户加载时按需进行加载解析，从某种意义上来说做WEB是一种保护。我觉得这与桌面程序及APP打包效果是一样的(软件和APP也是可以反编译嘛，反编译后的结果就是混淆)，当然不说加密混淆了。

现在国内出现了像DCloud、APICloud（虽然这二家经常打架，毕竟相似度很高，我不做评论，但不可否认对一个只会写HTML+JS的人转写APP是一个不错的选择）这些由HTML5开始的跨平台软件也开始支持VUE了。

最后附上VUE打包后的调试预览图，纯HTML的就不多说了，自己F12吧。


相关推荐

软件测试/测试开发丨Pytest 自动化测试框架(五)

公众号搜索：TestingStudio霍格沃兹测试开发的干货都很硬核测试报告在项目中是至关重要的角色，一个好的测试报告：可以体现测试人员的工作量；开发人员可以从测试报告中了解缺陷的情况；测试经理可以...

python爬虫实战之Headers信息校验-Cookie

一、什么是cookie上期我们了解了User-Agent，这期我们来看下如何利用Cookie进行用户模拟登录从而进行网站数据的爬取。首先让我们来了解下什么是Cookie：Cookie指某些网站为了辨别...

软件测试 | 结合Allure生成测试报告

简介测试报告在项目至关重要，测试人员可以在测试报告中体现自己的工作量，开发人员可以从测试报告中了解缺陷的情况，测试经理可以从测试报告中看到测试人员的执行情况及测试用例的覆盖率，项目负责人可以通过测...

使用FUSE挖掘文件上传漏洞（文件上传漏洞工具）

关于FUSEFUSE是一款功能强大的渗透测试安全工具，可以帮助广大研究人员在最短的时间内迅速寻找出目标软件系统中存在的文件上传漏洞。FUSE本质上是一个渗透测试系统，主要功能就是识别无限制可执行文件上...

第42天，我终于意识到，爬虫这条路，真的好艰难

昨天说到学爬虫的最初四行代码，第四行中的print(res.text)，我没太懂。为啥最后的输出的结果，不是显示百度网页全部的源代码呢？这个世界上永远不缺好心人。评论区的大神告诉我：因为只包含静态h...

详解Pytest单元测试框架，轻松搞定自动化测试实战

pytest是目前企业里面使用最多、最流行的Python的单元测试框架，那我们今天就使用这个框架来完成一个网易163邮箱登录的自动化实战案例。下面我们先把我们案例需要的工具进行相关的介绍:01pyt...

干货|Python大佬手把手带你破解哔哩哔哩网滑动验证(上篇)

/1前言/有爬虫经验的各位小伙伴都知道，正常我们需要登录才能获取信息的网站，是比较难爬的。原因就是在于，现在各大网站为了反爬，与爬虫机制斗智斗勇，一般的都加入了图片验证码、滑动验证码之类的干扰，让...

Python 爬虫-如何抓取需要登录的网页

本文是Python爬虫系列第四篇，前三篇快速入口：Python爬虫-开启数据世界的钥匙Python爬虫-HTTP协议和网页基础Python爬虫-使用requests和B...

使用Selenium实现微博爬虫:预登录、展开全文、翻页

前言想实现爬微博的自由吗？这里可以实现了！本文可以解决微博预登录、识别“展开全文”并爬取完整数据、翻页设置等问题。一、区分动态爬虫和静态爬虫1、静态网页静态网页是纯粹的HTML，没有后台数据库，不含程...

从零开始学Python——使用Selenium抓取动态网页数据

1.selenium抓取动态网页数据基础介绍1.1什么是AJAX　　AJAX（AsynchronouseJavaScriptAndXML：异步JavaScript和XML）通过在后台与服务器进...

PHP自动测试框架Top 10（php单元测试工具）

对于很多PHP开发新手来说，测试自己编写的代码是一个非常棘手的问题。如果出现问题，他们将不知道下一步该怎么做。花费很长的时间调试PHP代码是一个非常不明智的选择，最好的方法就是在编写应用程序代码之前就...

10款最佳PHP自动化测试框架（php 自动化测试）

为什么测试如此重要？PHP开发新手往往不会测试自己编写的代码，我们中的大多数通过不断测试我们刚刚所编写浏览器窗口的新特性和功能来进行检测，但是当事情出现错误的时候我们往往不知道应该做些什么。为我们的代...

自动化运维:Selenium 测试（seleniumbase搭建自动化测试平台）

本文将以Buddy中的Selenium测试流水线示例，来看看自动化测试就是如此简单易用！Selenium是一套用于浏览器测试自动化的工具。使用Buddy专有服务，您可以直接在Buddy中运行Selen...

Selenium自动化测试（selenium自动化测试工具）

Selenium是一系列基于web的自动化测试工具。它提供了一系列测试函数，用于支持Web自动化测试。这些函数非常灵活，它们能够通过多种方式定位界面元素，并可以将预期结果与系统实际表现进行比较。作为一...

技术分享 | Web自动化之Selenium安装

本文节选自霍格沃兹测试开发学社内部教材Web应用程序的验收测试常常涉及一些手工任务，例如打开一个浏览器，并执行一个测试用例中所描述的操作。但是手工执行的任务容易出现人为的错误，也比较费时间。因此，将...

一周热门
最近发表
标签列表