难度:★

简单说一说:

1、Vue和Blazor都遵循单文件结果,即HTML(视图模板)、CSS(样式)、JS/C#(代码逻辑)写在一个文件里,Vue的文件后缀为.vue,Blazor的文件后缀为.razor

2、三个部分的区别:

1)视图HTML部分,区别在于模板语法,主要是标签内容和标签属性的数据绑定。另外,Vue需要使用顶级标签<template>,Blazor不需要,上来就可以直接撸HTML。

2)样式CSS部分,基本一样,可能高级功能有一些差异,这部分目前关注的比较少,估计Vue会更灵活一些,必竟早走很多路

3)逻辑JS/C#部分,这是两者最大的区别,首先是编程语言上,Vue用JS或TS,Blazor用C#。Vue,本质上是一个组件实例,其上是一个根实例,再上就是原型,JS也是面向对象,但实现思路是原型(这方面还不是特别理解,还要深入学习);Blazor本质上是一个部分类,组件就是一个类的实例,这个反而容易理解,和WPF的XML思路基本一样。

3、重点说一说逻辑部分(也是简单说一下):

1)Vue:使用<script></script>构建,有选项式API和组合式API两种,继承了JS的自由(变量+函数),其中组合式API更有行云流水的感觉,也是官方更推荐的方式,所以之后学习都以组合式为主。3.0刚推出的时候,没有setup语法糖,那个时候虽然性能提升很大,但和Vue2相比,使用上反而给人感觉有些繁索退步,但3.2版本推出setup语法糖后,有了一个飞跃式的进步,写起代码,有爽的感觉了。

2)Blazor:使用@code{}构建,本质上就是一个类,所以里面的字段、属性、方法、事件等,包括高级点的依赖注入等,和C#用起来是一样一样的,即爽,又有规范的安全感。最重要的是,.NET的API都可以使用。当然,Vue也要大把API可以使用,包括JS和Vue本身的。

4、补充说一下代码隔离:

1)Blazor的HTML、CSS和C#三部分都可以实现隔离,如一个Blazor的组件名称为SayHello.razor,C#隔离出来有两个方法,首先都是新建一个SayHello.razor.cs的文件,方法一是使用部分类,方法二是让组件继承这个新类,方法一简单点。CSS隔离的话,超简单,同文件夹下新建一个css文件,命名为SayHello.razor.css即可。

2)Vue还不清楚怎么隔离,但学习Vue的小程序倒是天生隔离成三个文件

3)话说回来,既然都单文件了,为啥还要去隔离。用IDE直接隔离编辑不就可以了吗?VSCode都已经实现这个功能了。

//Vue的组件结构

//视图模板-HTML
<template>
<h1>{{ sayHi }}</h1>
</template> //代码逻辑-JavaScript,使用组合式API(Composition API),直接使用3.2的setup语法糖
<script setup>
import { ref } from 'vue'
const sayHi = ref('你好!')
</script> //样式-CSS
<style scoped>
h1 {
font-weight: bold;
}
</style>
//Blazor的组件结构

//视图模板-HTML
<div>
<h1>@SayHi</h1>
</div> //代码逻辑-C#
@code{
privite string SayHi { get; set; } = "你好"; private void UpdateTitle()
{
Title = "Hello, Blazor!";
}
} //样式部分-CSS
<style scoped>
h1 {
font-weight: bold;
}

主要参考文献:

1、Vue.js官方文档:https://vuejs.org/guide/introduction.html

2、Blazor官方文档:https://docs.microsoft.com/zh-CN/aspnet/core/blazor/?view=aspnetcore-6.0

3、Blazor的非官方学习文档:https://blazor-university.com

4、Blazor的ezzylearning学习文档:https://www.ezzylearning.net/tutorials/blazor

5、4的中文译文:https://www.cnblogs.com/ittranslator/tag/Blazor/

Blazor和Vue对比学习(基础1.1):组件结构的更多相关文章

  1. Blazor和Vue对比学习(基础1.2):模板语法和Razor语法

    Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...

  2. Blazor和Vue对比学习(基础1.4):事件和子传父

    Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...

  3. Blazor和Vue对比学习:说在开始前

    1.Vue:现代前端三大框架之一(Vue/React/Angualr),基于HTML.CSS和JavaScript,2014年正式对外发布,目前已发展到3.X版本.值得说道的是,Vue的创始人作者是华 ...

  4. Blazor和Vue对比学习(进阶2.2.4):状态管理之持久化保存(2),Cookie/Session/jwt

    注:本节涉及到前后端,这个系列的对比学习,还是专注在前端Vue和Blazor技术,所以就不撸码了,下面主要学习概念. 我们知道,Http是无状态协议,客户端请求服务端,认证一次后,如果再次请求,又要重 ...

  5. Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  6. Blazor和Vue对比学习(基础1.9):表单输入绑定和验证,VeeValidate和EditFrom

    这是基础部分的最后一章,内容比较简单,算是为基础部分来个HappyEnding.我们分三个部分来学习: 表单输入绑定 Vue的表单验证:VeeValidate Blazor的表单验证:EditForm ...

  7. Blazor和Vue对比学习(基础1.3):属性和父子传值

    组件除了要解决视图层展示.视图层与逻辑层的数据绑定,还需要解决一个重大问题,就是在组件树中实现数据传递,包括了父到子.子到父.祖到孙,以及任意组织之间.而我们上一章讲到的实现双向绑定的两个指令,Vue ...

  8. Blazor和Vue对比学习(基础1.5):双向绑定

    这章我们来学习,现代前端框架中最精彩的一部分,双向绑定.除了掌握原生HTML标签的双向绑定使用,我们还要在一个自定义的组件上,手撸实现双向绑定.双向绑定,是前两章知识点的一个综合运用(父传子.子传父) ...

  9. Blazor和Vue对比学习(基础1.6):祖孙传值,联级和注入

    前面章节,我们实现了父子组件之间的数据传递.大多数时候,我们以组件形式来构建页面的区块,会涉及到组件嵌套的问题,一层套一层.这种情况,很大概率需要将祖先的数据,传递给子孙后代去使用.我们当然可以使用父 ...

随机推荐

  1. 【刷题-LeetCode】221. Maximal Square

    Maximal Square Given a 2D binary matrix filled with 0's and 1's, find the largest square containing ...

  2. 【刷题-PAT】A1119 Pre- and Post-order Traversals (30 分)

    1119 Pre- and Post-order Traversals (30 分) Suppose that all the keys in a binary tree are distinct p ...

  3. unity3d发布安卓出错plese set the package name

    发布时报错 参考https://forum.unity.com/threads/where-is-package-name-setting.318839/ 参考https://answers.unit ...

  4. zookeeper,kafka,redis等分布式框架的主从同步策略

    1 zookeeper选主机制 1.1 LeaderElection选举算法 选举线程由当前Server发起选举的线程担任,他主要的功能对投票结果进行统计,并选出推荐的Server.选举线程首先向所有 ...

  5. gin中如何自定义验证器

    package main import ( "github.com/gin-gonic/gin" "github.com/gin-gonic/gin/binding&qu ...

  6. java接口概述及特点

    1 package face_09; 2 3 4 5 6 abstract class AbsDemo{ 7 abstract void show1(); 8 abstract void show2( ...

  7. python 小兵(3)字典

    字典 # 存储数据 字典的查找快一些# 不可哈希的,就是可变的数据 可变的数据不能哈希 不可变的数据能哈希# python3.6 版本以上 字典默认是有序的, 咱们怎么写的就怎么打印出来# 但是 出去 ...

  8. Linux下的5种I/O模型与3组I/O复用

    引言 上一篇文章中介绍了一些无缓冲文件I/O函数,但应该什么时机调用这些函数,调用这些I/O函数时进程和内核的行为如何,如何高效率地实现I/O?这篇文章就来谈一谈Linux下的5种I/O模型,以及高性 ...

  9. windows10使用wireshark抓取本机请求包

    1.管理员运行cmd 右键左下角windows图标,管理员运行Windows PowerShell 2.输入ipconfg查看本机ip和网关ip 3.执行命令 route add 本机ip mask ...

  10. 部分文件的MIMEType

    类型 文件拓展名 MIMEType 图片 png image/png bmp\dib image/bmp jpe\jpeg\jpg image/jpeg gif image/gif 多媒体 mp3 a ...