首页 > 其他分享 >Blazor与Vue标签代码的可维护性对比

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

时间:2023-01-07 23:11:07浏览次数:37  
标签:Vue 标签 代码 可维护性 scope Blazor data

通过一个简单示例来进行对比,
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非常优秀,值得学习、使用,你们觉得呢?

标签:Vue,标签,代码,可维护性,scope,Blazor,data
From: https://www.cnblogs.com/s0611163/p/17033550.html

相关文章

  • 【vue】Vue-router
    Vue-router安装npminstallvue-router--save-devvue-cli中已经选择安装了vue-router,那这里不需要重复安装了解读route路径```src/router/index.js``import......
  • Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
     一、 provide和inject1:在父级组件中提供数据     语法:provide('提供给子组件的变量名',提供给子组件的数据)   2:在子级组件中获取收据  ......
  • vue-router的使用
    vue-router是vue基础工具的重要组成部分。通过简单的配置路由组件映射关系,可以实现vue页面轻松跳转。 什么是前端路由它是URL地址与组件之间的对应关系,通常使用Hash地......
  • Vue中使用flv.js播放flv格式视频流
    Vue中使用flv.js播放flv格式视频流1.安装依赖npminstallflv.js--save--legacy-peer-deps2.具体代码Html部分<template> <div><videoautoplaycontrol......
  • 适合编程初学者的开源项目:小游戏2048(Vue版)
    目标为编程初学者打造入门学习项目,使用各种主流编程语言来实现。2048游戏规则一共16个单元格,初始时由2或者4构成。1、手指向一个方向滑动,所有格子会向那个方向运动。2、相......
  • 成功解决node、node-sass和sass-loader版本冲突问题、不需要降低node版本。如何在vue
    文章目录​​1、报错信息​​​​2、需要引入scss​​​​3、引入后、继续报错​​​​4、安装​​​​4.1安装node-sass​​​​4.2安装sass-loader​​​​4.3在项目中......
  • Blazor实现菜单动画
    想到动画,你可能会去安装Blazor的动画组件BlazorAnimate,然后使用它。本人初学,暂时我也不知道原理,先不用组件,自己实现吧。虽然项目中我用了AntDesignBlazor,但是我忘了使用它......
  • VUE3.0+Vite 多页面应用配置
    目录VUE3.0+Vite多页面应用配置核心原理多页面应用模式(核心)Vue路由配置(示例)vite.config.js(示例)多页面跳转构建流程代码结构构建流程源码链接VUE3.0+Vite多页面应用配置......
  • vue2,vue3同时监听多个数据变化
    我是使用vue计算属性(computed)将需要监听的数据拼接在一起,再通过watch进行监听1.vue普通写法<template><divid="app"><el-inputv-model.number="valu......
  • 基于vue+Element Table封装(纯前端解决方案,附源码)
    (文章目录)前言这个项目是拿来练手的项目,基于VUE+ElementUI,并没有做后端,所以用的是纯前端的解决方案(有更好的办法欢迎提出),主要实现的是对列表数据的查询,筛选,修改这些常......