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