Blazor与Vue标签代码的可维护性对比

通过一个简单示例来进行对比,
Vue的ElementUI组件的行内编辑:

Blazor的AntDesginBlazor组件的行内编辑:

区别:

  1. el-table-column的label属性相当于Column的Title属性,这个是没有区别的
  2. 多了一个scope="scope",在ElementUI里,会有scope="scope"和slot-scope="scope"这种属性,具体要看文档才知道是干什么用的,这一点上,Blazor没有这个,不需要看文档
  3. :prop="'tableData.' + scope.$index + '.name'"相当于editCache[data.Id],很显然editCache[data.Id]简捷的多,而前者,双引号字符串里套单引号字符串,'tableData.' + scope.$index + '.name'是一个表达式,但是,它也是一个字符串,字符串是最难维护的!
  4. <span>{{ scope.row.name }}</span>对比@data.Name,@data.Name也可以写成<span>@data.Name<span>,这个也是差不多的
  5. v-model相当于@bind-Value,都有代码提示,差不多的
  6. scope.row.name对比editCache[data.Id].data.Name,.row相当于[data.Id],这个是差不多的
  7. v-model="scope.row.name"对比@bind-Value="editCache[data.Id].data.Name",代码提示方面,前者name和后者Name都可以点的出来,这个提示都是有的,但鼠标移到Name上有数据类型、所属实体类以及注释提示,前者是没有这么丰富的提示的,不知道TypeScript的提示怎么样,估计应该有类型提示,不知道有没有注释提示
  8. :rules="rules.name",这里的rules要在data里定义

    而Blazor是不需要这一行的,AntDesignBlazor的验证在实体类的属性上定义一个标签就可以了,剩下的数据校验工作由组件自动完成
    这方面也是差不多的
[Required(ErrorMessage = "必填")]
public string Name { get; set; }
  1. placeholder属性也是一样的,Input标签也有这个属性
  2. ElementUI的标签代码是由标签、属性和字符串组成,AntDesignBlazor的标签代码,除了标签、属性外,混合了@if这种Blazor语法,是可以写C#代码的,而前者有两种实现方式,一种是双大括号里可以写js,一种就是第3点提到的字符串表达式。这一点上,个人认为Blazor的代码看起来是更清爽的,不知道react能否达到这样的效果
  3. 前者8行代码后者有大括号独占一行是10行代码,Blazor的代码行数要多一点

综上,ElementUI难以维护的地方体现在第2、3、7、10这几点,它的标签代码字符数更多,引号更多,比如我写过的:

里面有三种引号!这个语法,不百度,不抄文档,不知道会vue的小伙伴能否手写出来,学会了长时间不用会不会生疏?而Blazor一般是这样写的:

Style=@(),这个括号里就可以写C#表达式了,它还可以写方法:


你们觉得这个C#的方法里,能不能查询数据库?我猜可以!
Vue的模板标签代码,除了维护标签和属性,你维护的是字符串,这个字符串好不好维护,取决于你安装的插件,比如VSCode安装Vetur插件,Blazor的标签代码,除了维护标签和属性,你维护的是C#,不知道Vue+TypeScript比C#如何?
在用AntDesginBlazor时,组件的用法,组件有哪些属性,需要看文档示例和文档中的API说明,Blazor本身的语法不多,C#语法.net程序员一般都会。
在使用ElementUI时,组件的用法,组件有哪些属性,需要看文档示例和文档中的API说明,Vue的语法需要掌握,js的语法一般前端都会。
Blazor只需要一个工程。Vue前后端分离需要两个工程、两种开发工具、前端语言和后端语言。
TypeScript+Vue或TypeScript+React,是不是会比js+Vue或js+React好维护一点?
我觉得Blazor非常优秀,值得学习、使用,如果熟练掌握,以及有一套完备优秀的开源组件比如AntDesginBlazor,再加上自己积累的使用Blazor的项目代码,一定会有很高的工作效率,和优秀的代码可维护性,你们觉得呢?这里只讲了Vue和Blazor的标签代码对比一个方面,Blazor其它的优点这篇博客就不讲了。

本文转载于网络 如有侵权请联系删除

相关文章

  • 头条都在用的边下边播功能

    为什么需要边下边播头条官方文档中对自己播放器的特色功能有这几点介绍,其中专门提到了“边下边播”的功能,边下边播的核心目的是:播放器提供视频播放时下载视频的选项,这样重复播放视频时可以直接播放本地视频文件,减少网络流量,增加播放稳定性。播放网络视频的过程就是需要先将视频数据拉取下来,然后解封装,解码,然后渲染出声音和画面,首先需要的就是网络请求的流程,边下边播就是在网络请求过程中将请求下来的数据存储到本地,这样下次看视频的时候,不用重复请求已经拉取到本地的数据了,既节省流量,也能加速播放。下面是阿里云播放器的边下边播介绍:边下边播的3个优势:1.定制优化方便 2.省流量,二次打开快 3.稳定省资源1.定制优化方便正常使用播放器的开发者不一定非常熟悉播放器的流程,他们通常只是想要一个功能比较全面的播放器SDK,但是很多播放器网络层的优化太繁杂了,因为网络请求通常是播放器的一个子模块,这样如果我想优化网络请求的话,需要改动播放器的源码,这样对普通开发者的挑战太大了。例如我使用exoplayer播放器,网络请求都放在DataSource模块这个DataSource模块深深嵌入到exoplaye

  • Survey | 基于图卷积网络的药物发现方法

    本期介绍2019年6月发表在BriefingsinBioinformatics的综述,该综述由康奈尔大学等机构的研究人员撰写,系统总结了GCN及其在药物发现方面的最新进展,重点是与药物相关的应用;在图形卷积原理部分提供图卷积的理论支持和GCN的详细架构及其在药物发现中的应用并讨论了当前方法之外的挑战和可能性。1.简介药物开发是一个昂贵且耗时的过程,其需要测试数千种化合物以找出安全有效的药物。现代药物开发旨在利用药物开发的机器学习工具来加速中间步骤并因此降低成本。化合物分子通过一系列渐进的试验进行过滤,这些试验确定了它们在后期阶段的性质、有效性和毒性。机器学习倾向于越来越多地用于更好地预测早期阶段的分子特性,可以显著减少后期过程失败的负荷,节省大量资源和时间。目前广泛采用QSAR/QSPR模型,机器学习在药物开发中的应用包括但不限于以下:生物活性或物理化学预测、预测药物-蛋白质和药物-药物对的相互作用、从头分子设计产生具有理想药理特性的分子结构、合成可及性预测、预测合成反应的产物。由于传统机器学习方法只能处理固定大小的输入,大多数早期药物发现都使用了特征工程,即生成和使用特定问题的分子描

  • 虚拟化技术概述(一)1. 虚拟化概述2. 虚拟化分类3. 虚拟化的实现

    从虚拟化的分类,实现,和我们ACRN中的实现; 1.虚拟化概述1.0概述区别与直接调度片上资源/使用物理平台,使用虚拟化技术对于资源的调度会更加灵活和高效,而且可以达到硬隔离的目的;我们需要Hypervisor/VMM(VirtualMachineMonitor)来实现虚拟化;虚拟化的目的可以用一句话来概述:虚拟化技术的目的是希望能够截获上层操作系统应用对硬件资源的访问,然后重定向到VMM的资源池中,再由VMM来对片上资源进行管理;“虚拟机可以看作是物理机的一种高效隔离的复制”,有以下三个典型特征:同质,虚拟机的运行环境和物理机的环境本质上相同,但是表现上能够有一些差异;高效,虚拟机中运行的软件需要有接近物理机(native)中运行的性能;资源受控,VMM需要对系统资源有完全控制能力和管理权限,资源的分配/监控/回收;基于这样的需求,我们有了虚拟机方案,比如KVM,Xen,VMware,ACRN等等;1.1内核态(Kernelmode)和用户态(Usermode)x86CPU中的操作有两个特权形态:内核态和用户态内核态:如果CPU处于内核态,执行的程序可以执行任何CPU指令,并且访问内

  • Java面试专题之五:设计模式学习,详细分析工厂方法模式

    昨天学习了单例模式,今天学习一下工厂方法模式。工厂模式主要是为创建对象提供了接口。工厂模式按照《Java与模式》中的提法分为三类: 1.简单工厂模式(SimpleFactory) 2.工厂方法模式(FactoryMethod) 3.抽象工厂模式(AbstractFactory)简单工厂模式(SimpleFactory),比较简单,不再介绍,直接学习工厂方法模式。工厂方法模式简介:定义一个创建对象的接口,让子类决定实例化那个类。工厂方法模式定义了一个创建对象的接口,但由子类决定要实例化的类是哪一个,也就是说工厂方法模式让实例化推迟到子类。工厂方法模式非常符合“开闭原则”,当需要增加一个新的产品时,我们只需要增加一个具体的产品类和与之对应的具体工厂即可,无须修改原有系统。同时在工厂方法模式中用户只需要知道生产产品的具体工厂即可,无须关系产品的创建过程,甚至连具体的产品类名称都不需要知道。虽然他很好地符合了“开闭原则”,但是由于每新增一个新产品时就需要增加两个类,这样势必会导致系统的复杂度增加。其UML结构图:代码实例//抽象产品 abstractclassCar{ privateStrin

  • Win10最常用的快捷键,效率Max提高100%(常用的应该是最全的)

    写在最前面 这是博主爆肝了一晚上给写出来,因为很多博客和资料中仍然使用的xpwin7和win8 的快捷键,我不断地的实验和尝试,总结出以下的快捷键,希望可以帮助到你。 最后,转载请注明出处 Win10窗口快捷键`:Win+←:最大化窗口到左侧的屏幕上(与开始屏幕应用无关)Win+→:最大化窗口到右侧的屏幕上(与开始屏幕应用无关)Win键组合快捷键Win+A:接受所有来电(在microsoftLync中)Win+B:光标移至通知区域Win+D:显示桌面,第二次键击恢复桌面(不恢复开始屏幕应用)Win+E:资源管理器Win+F:反馈(没用)Win+G:XboxGamebar(可以提供游戏相关功能)Win+H:听写功能(没啥用)Win+I:打开`Win10设置Win+K:打开连接设备Win+L:锁屏Win+M:最小化所有窗口Win+P:演示设置Win+Q:搜索功能Win+R:运行Win+S=Win+Q`:搜索功能Win+T:切换任务栏上的程序Win+U:显示`Win10设置Win+V:系统粘贴板 强烈推荐,非常好用Win+W:白板和截图Win+X:相当于右键点击Win标,应该叫移动控制中心通

  • 【猫狗数据集】划分验证集并边训练边验证

    数据集下载地址:链接:https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw 提取码:2xq4创建数据集:https://www.cnblogs.com/xiximayou/p/12398285.html读取数据集:https://www.cnblogs.com/xiximayou/p/12422827.html进行训练:https://www.cnblogs.com/xiximayou/p/12448300.html保存模型并继续进行训练:https://www.cnblogs.com/xiximayou/p/12452624.html加载保存的模型并测试:https://www.cnblogs.com/xiximayou/p/12459499.htmlepoch、batchsize、step之间的关系:https://www.cnblogs.com/xiximayou/p/12405485.html一般来说,数据集都会被划分为三个部分:训练集、验证集和测试集。其中验证集主要是在训练的过程中观察整个网络的训练情况,避免过拟合等等。之前我们有了训

  • 「数据中心」数据中心脊页架构:思科FabricPath Spine和Leaf网络

    思科在2010年引入了FabricPath技术。FabricPath提供了新的功能和设计选项,使网络运营商能够创建以太网结构,从而提高带宽可用性,提供设计灵活性,并简化和降低网络和应用程序部署和操作的成本。典型的FabricPath网络使用脊椎和叶子结构。 FabricPath技术使用了传统第2层和第3层技术的许多最佳特性。它保留了第2层环境的简单配置、即插即用的部署模型。还介绍了一种称为FabricPath中间系统到中间系统(IS-IS)的控制平面协议。此最短路径优先(SPF)路由协议用于确定FabricPath网络中任何给定目的FabricPath交换机的可达性并选择最佳路径。其结果是增加了稳定性和可扩展性,快速收敛,以及使用第3层路由环境中典型的多条并行路径的能力。封装格式和标准符合性FabricPathspineandleaf网络是Cisco的专有网络,但基于TRILL标准。它在MAC帧封装中使用FabricPath-MAC。底层网络FabricPathspine和leaf网络在MAC帧封装中使用第2层FabricPathMAC,在底层网络中使用FabricPathIS-IS作

  • Hadoop之HDFS04【JavaAPI操作】

      前面项目中我们是创建的java项目来演示的,但是hadoop相关的依赖太多了,不方便,本文通过maven项目来演示HDFS的javaAPI操作创建maven项目相关的依赖<dependencies> <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop-hdfs</artifactId> <version>2.5.0</version> </dependency> <dependency> <groupId>org.apache.hadoop</groupId> <artifactId>hadoop-client</artifactId> <version>2.5.1</version> </dependency> <dependency> &l

  • ROS机器人程序设计(原书第2版)补充资料 (肆) 第四章 在ROS下使用传感器和执行器

    ROS机器人程序设计(原书第2版)补充资料(肆)第四章在ROS使用传感器和执行器书中,大部分出现hydro的地方,直接替换为indigo或jade或kinetic,即可在对应版本中使用。 第四章主要介绍外设,之前博客内容中介绍过一些,比如手机,手柄,Arduino,rplidar,xtion,kinetic2等。补充参考:ROS外设:http://wiki.ros.org/Sensors1http://blog.csdn.net/zhangrelay/article/details/500535812 http://blog.csdn.net/zhangrelay/article/details/503722983 http://blog.csdn.net/zhangrelay/article/details/504294784 http://blog.csdn.net/zhangrelay/article/details/504854375 http://blog.csdn.net/zhangrelay/article/details/504982376 http://blog.cs

  • 基于腾讯云CVM自建高可用Redis实践

    一、环境说明:1.需求与目标:在企业实际生产环境中为了能够给业务上层应用提供高可靠、低延迟、低数据损失的Redis缓存服务,本文通过对目前主流的几种redis高可用方案进行对比分析,并基于腾讯云CVM和HAVIP等基础产品进行搭建、配置、测试、总结,供大家参考。2.软件版本:redis用3.2.8版本,keepalived用1.2.19版本。3.基本环境:采用同一网络内的三台主机(可以是物理主机、虚拟机或docker容器),要求三台主机之间都能相互访问。我这里使用腾讯云上3台CVM,每台CVM上开启一个redis-server、redis-sentinel和keepalived服务,redis-server端口为6379,redis-sentinel的端口为26379(我这里用默认端口,生产环境中可以修改默认端口),3台CVM上都安装keepalived服务。roleIPportredis-master1172.16.2.46379redis-master2172.16.2.26379redis-master3172.16.2.156379redis-sentinel1172.16.2

  • GitHub宕机24小时,我们还能干嘛

    Boom,惊天一声雷,全球最大的同性交友网站GitHub,挂了。举天同庆,欢度1024,GitHub真是良苦用心啊~从北京时间早上7点开始,GitHub开始出现大面积瘫痪截止目前北京时间21点整,GitHub仍处于未修复状态,看这架势得在要会时间了。来看看国外的程序员们是怎么看待这件事情的不过我更喜欢下面这幅图,虽然我已经2年不用windows了,但是看到这个图还是很想笑啊,每次windows一个补丁,就能让你半天不用看屏幕了。下图就有意思了,GitHub这艘巨轮撞上了Microsoft这座冰山,边上的GitLab游艇来救人(抢人)了。下图懂的人自然懂……这次的瘫痪要么让Azure背锅?不过话说回来,正经起来还是要的,GitHub之所以瘫了,官方给出的解释是网络和数据库故障。从表征上来看,这次应该不是rm-rf。从技术角度出发,GitHub作为全球性的托管平台,容灾能力不会差,只是造成这种大面积瘫痪的情况一定是棘手的,恢复也需要一定的时间。如果是硬件问题,应该有冗余,但也没有想象的那么简单,并不是切换一下IP地址,指到备份库就完了。硬件问题造成的瘫痪很有可能是一个批次的down,而根据

  • 手把手教你全家桶之React(一)

    前言最近项目用到react,其实前年我就开始接触react,时光匆匆,一直没有时间整理下来(太懒啦)!如今再次用到,称工作间隙,对全家桶做一次总结,项目源码地址。废话不多说,上码。创建一个文件目录并初始化package.jsonmkdirreact-Buckets npminit复制填好相关信息如图安装webpack需要有全局安装哦,不然一会用webpack编译时会报错的关于装依赖加入package.json时,加--save-dev表示开发环境要用的依赖,如果加-save表示生产环境依然要用的依赖。 npminstall--save-devwebpack手动添加webpack配置文件 touchwebpack.dev.config.js配置文件 varpath=require('path');module.exports={//入口文件指向src/index.jsentry:path.join(__dirname,'src/index.js'),//打包后的文件到当前目录下的dist文件夹,名为bundle.jsoutput:{path:pat

  • 手把手丨我们在UCL找到了一个糖尿病数据集,用机器学习预测糖尿病

    大数据文摘作品作者:SusanLi编译:袁雪瑶、吴双、姜范波根据美国疾病控制预防中心的数据,现在美国1/7的成年人患有糖尿病。但是到2050年,这个比例将会快速增长至高达1/3。我们在UCL机器学习数据库里一个糖尿病数据集,希望可以通过这一数据集,了解如何利用机器学习来帮助我们预测糖尿病,让我们开始吧!数据集github链接:https://github.com/susanli2016/Machine-Learning-with-Python/blob/master/diabetes.csv数据糖尿病数据集可从UCI机器学习库中获取并下载。特征(怀孕次数,血糖,血压,皮脂厚度,胰岛素,BMI身体质量指数,糖尿病遗传函数,年龄,结果):糖尿病数据集由768个数据点组成,各有9个特征:“结果”是我们将要预测的特征,0意味着未患糖尿病,1意味着患有糖尿病。在768个数据点中,500个被标记为0,268个标记为1。 KNN算法k-NN算法几乎可以说是机器学习中最简单的算法。建立模型只需存储训练数据集。而为了对新的数据点做出预测,该算法会在训练数据集中找到与其相距最近的数据点——也就是它的“近邻

  • 普华永道:拥抱人工智能和物联网 开启变革新时代

  • 年终知识分享——大型项目架构

    关于这两个page的内容,请看我的博客:https://cloud.tencent.com/developer/article/1019097这个博文参考了很多资料,就不在一一例举了陀螺在田野上转在清风里转在飘着香的鲜花上转在沉默里转在孤独里转在结着冰的湖面上转在欢笑里转在泪水里转在燃烧着的生命里转在洁白里转在血红里转在你已衰老的容颜里转如果我可以停下来我想把眼睛睁开看着你怎么离开可是我不能停下来也无法为你喝彩请你把双手松开在酒杯里转在噩梦里转在不可告人的阴谋里转在欲望里转在挣扎里转在东窗事发里麻木地转在阳光灿烂的一天你用手捂着你的脸对我说你很疲倦你扔下手中的道具开始咒骂这场游戏说你一直想放弃但不能停止转转转转转高高地举起你的鞭转转转转转转转轻轻地闭上我的眼

  • 腾讯云数据万象搜索媒体处理队列媒体处理

    功能描述搜索媒体处理队列。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 请求请求示例GET/queueHTTP/1.1 Host:<BucketName-APPID>.ci.<Region>.myqcloud.com Date:<GMTDate> Authorization:<AuthString> Content-Length:<length> Content-Type:application/xml 复制 说明: Authorization:AuthString(详情请参见请求签名文档)。 通过子账号使用时,需要授予相关的权限,详情请参见授权粒度详情文档。 请求头此接口仅使用公共请求头部,详情请参见公共请求头部文档。 请求体该请求的请求体为空。 请求参数 参数名称(关键字) 描述 类型 是否必选 queueIds 队列ID,以“,”符号分割字符串。 String 否

  • 深入解读Service Mesh的数据面Envoy

    在前面的一篇文章中,详细解读了ServiceMesh中的技术细节,深入解读ServiceMesh背后的技术细节。 但是对于数据面的关键组件Envoy没有详细解读,这篇文章补上。   一、Envoy的工作模式      Envoy的工作模式如图所示,横向是管理平面。   Envoy会暴露admin的API,可以通过API查看Envoy中的路由或者集群的配置。   例如通过curlhttp://127.0.0.1:15000/routes可以查看路由的配置,结果如下图,请记住路由的配置层级,后面在代码中会看到熟悉的数据结构。     routes下面有virtual_hosts,里面有带prefix的route,里面是routeentry,里面是weightcluster,对于不同的cluster不同的路由权重,再里面是cluster的列表,有cluster的名称和权重。   再如通过curlhttp://127.0.0.1:15000/clusters可以得到集群也即cluster的配置,这里面是

  • xcodebuild构建时报错unknown error -1=ffffffffffffffff Command /bin/sh failed with exit code 1

    CI今日构建时报出如下错误: /Users/xxx/Library/Developer/Xcode/DerivedData/Snowball-ebllohyukujrncbaldsfojfjxwep/Build/Intermediates.noindex/ArchiveIntermediates/ProjectName/InstallationBuildProductsLocation/Applications//Project.app/Frameworks/AFHTTPRequestOperationLogger.framework:unknownerror-1=ffffffffffffffff Command/bin/shfailedwithexitcode1复制 思来想去,也没找到原因所在,因为公司三个业务app全部都是同样的报错信息。   可能的原因: 昨天xcod9进行了小版本更新所致 电脑里存在缓存,ded可以清除缓存   解决灵感: https://stackoverflow.com/questions/41451502/xcodebuild-er

  • SpringBoot+SpringDataJPA项目中使用EntityManager执行自定义复杂SQL的方法

    importjavax.annotation.Resource; importjavax.persistence.EntityManager; @Resource privateEntityManagerentityManager;复制 笔记参考。 宋兴柱(Sindrol):转载内容,请标明出处,谢谢!源文来自宝贝云知识分享:https://www.dearcloud.cn

  • PS切图教程记录

    大概步骤就是:打开长图如500*15000的图片-选择切片工具----切片选项---水平切图---切的个数(选择个数可以超过1000)(或者指定高度,不超过1000)---文件----存储为web----仅图像.jpg 下面是操作图: 1.选择切片工具   2.点击打开的图片右键选择切片选项 3.水平切图   4.文件-存储web ===================================================== 电商必要的切图技巧还是需要掌握的! 以后要多记录一些有用的东西~ 2020年5月1号在家中~

  • 删除当前文件夹不是.vue文件,电脑命令符

    ::-----------------------------------------@echooffsetlocalEnableDelayedExpansionset_thisFilePath=%0:loopfor/r%%iin(*.*)do(REM文件全路径set_filePath=%%iREM不删除批处理本身ifnot"!_filePath!"==%_thisFilePath%(REM截取文件后缀setsuffix=!_filePath:~-4!REM不删除".vue"后缀的文件ifnot"!suffix!"==".vue"(del/q"%%i")))pause::---------------------------------------------------------- 如果真的不知道将来要做什么,索性就先做好眼前的事情。只要今天比昨天过得好,就是进步。长此以往,时间自然会还你一个意想不到的未来。 生活像一个杯子。一开始,里面是空的,之后,要看你怎么对待它。如果你只往不如意的方面想,那么你最终辉得到一杯苦水。如果你往好的方面想,那么你最终会得到一杯清泉。 版权声

相关推荐

推荐阅读