一次学俩Vue&Blazor:1.2基础-组件结构
一、Vue和Blazor的组件结构示例
1、Vue,以下案例文件名为Index.vue
//(1)视图层-HTML
<template>
<h1>{{ sayHi }}</h1>
</template>
//(2)逻辑层-JS
//以下代码使用组合式API(Composition API)的setup语法糖
<script setup>
import { ref } from 'vue'
const sayHi = ref('你好!')
</script>
//(3)样式层-CSS
//scoped实现样式隔离,防止组件之间样式名称的污染
//在样式隔离情况下,如果希望样式传递给子组件,可以使用样式穿透(深绑定),如【:deep(.MyClassName){...}】
<style scoped>
h1 {
font-weight: bold;
}
</style>
2、Blazor,以下案例文件名为Index.razor
//组件类定义
@page "/index"
......
//(1)视图层-HTML
<div>
<h1>@SayHi</h1>
</div>
//(2)逻辑层-C#
@code{
privite string SayHi { get; set; } = "你好";
private void UpdateTitle()
{
Title = "Hello, Blazor!";
}
}
//(3)样式层-CSS
//如果要实现样式隔离,可以新建同名CSS样式文件。如组件为Index.razor,则新建Index.razor.css
//在样式隔离情况下,如果希望样式传递给子组件,可以使用深绑定,如【::deep .MyClassName{...}】
<style>
h1 {
font-weight: bold;
}
</style>
二、Vue和Blazor的组件结构对比
1、相同点
- 组件遵循单文件结构,即HTML(视图)、JS/C#(逻辑)、CSS(样式),写在一个文件里,文件结构非常相似。
2、异同点
- 视图层:
- Vue:根标签必须使用template,有且只有一个根标签。可以使用HTML原生元素、第三方组件或自定义组件。在视图层中,可以使用Vue提供的模板语法和指令,实现数据绑定等功能。
- Blazor:对根标签无任何要求。可以使用HTML原生元素、第三方组件或自定义组件。在视图层中,使用Blazor提供的Razor语法,实现数据绑定等功能,Razor语法比Vue的模板语法更加灵活,接近于React的JSX。
- 逻辑层:
- Vue:使用JS或TS,代码逻辑写在标签中,有选项式API和组合式API两者写法,本系列均使用组件式API及setup语法糖。
- Blazor:使用C#,代码逻辑写在@code{}代码块中,本质上是一个部分类。
- 样式层:
- Vue:在标签中写CSS样式,使用方式与CSS3基本一致。
- Blazor:也在标签中写CSS样式,使用方式也与CSS3基本一致。
3、关于组件本质(以下分析非常重要)
- Vue的组件本质是一个对象(通过选项式API来看Vue组件本质):
- 视图层是属性template的值。
- date()方法返回响应式数据。
- methods属性中,定义方法。
- computed属性中,定义计算属性(本质是方法)。
- 同时还提供了生命周期函数等方法或属性。
- 在视图层中调用定义好的组件时,如
<MyCommpont />
,实质是以组件对象为模板创建这个对象的实例。 - 组合式API可以视为是选项式API的语法糖,使我们可以更加流畅的进行组件开发。
- Blazor的组件本质是一个类:
- 组件头部以@符号开头的指令,如@page、@implements等,定义类的特性、继承、实现、泛型、依赖注入等行为。
- 视图层是类的一个特殊方法,在方法内部,C#和标签元素可以混写,也可以访问类的其它成员,类似于React/JSX。
- 在@code{}中,定义类的其它成员,可以是字段、属性或者方法。
- 在视图层中调用定义好的组件时,如
<MyCommpont />
,实质是创建这个类的实例。
4、关于文件分离(仅适用于Blazor)
- Blazor可以实现视图层、代码层和样式层三者的分离。如在相同文件夹下,创建Index.razor、Index.razor.cs、Index.razor.css,即可实现组件的文件分离。在Visual Studio的项目管理中,这三个文件会自动组织排列在一起。
- Index.razor.cs,需要创建为部分类
- Index.razor.css,分离出来后,即实现了样式隔离
- Index.razor.js,如有与js的互操作,还可以创建组件作用域的js文件
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!