Blazor和Vue对比学习(基础1.1):组件结构

vue

难度:★

简单说一说:

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):组件结构 的全部内容, 来源链接: utcz.com/z/380520.html

回到顶部