一次学俩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文件


posted @   functionMC  阅读(1849)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示