更新记录
注意：非教程。纯笔记，日常查询用的。需要教程的小伙伴找几本书看看即可哈哈，有Vue基础的话非常快，概念都是通的。非工作需要不建议深入学习Blazor，深入Vue吧，用的多，哈哈。完整目录地址：https://www.cnblogs.com/cqpanda/p/17596348.html
点击查看
2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。
Intro
In Blazor, directives are powerful features that enable you to add additional behavior to a Razor Component on your website. With Blazor's built-in directives, you can manage various aspects of user interactions. These directives can be grouped into three types:
- Compiling.
- DOM interaction.
- Utilities.
Compiling directives
Blazor provides compiling directives that manipulate how a Razor Component is compiled. These directives include:
@inherits Specify the base class for a component
@namespace Specify the namespace for a component
@implements Specify the interface for a component
@preservewhitespace Remove all redundant white spaces from an element
@typeparam Specify a generic class for a component
@layout Specify the layout for a component
DOM interaction directives
@attributes Attach a dictionary of attributes to the element
@on<event> Attach the event handlers to the element's event
@bind-<attribute>:<event> Create a 2-ways binding to an element attribute
@key Set a unique identifier for an element
@ref Refer the element to an C# instance
@code Add C# code that defines the component's logic, state, and behavior
@attributes
@attributes directive attaches a dictionary of attributes to an element, as demonstrated in the code.
<div @attributes="Attributes">Inspect me to see my attributes.</div>
@code {
Dictionary<string, object> Attributes { get; set; } = new()
{
{ "example-string", "Blazor School" },
{ "example-int", 10 },
{ "example-object", new
{
date = DateTime.Now
}
}
};
}
Blazor will render the HTML tag with the specified attributes:
<div example-string="Blazor School" example-int="10" example-object="{ date = 2/21/2022 8:34:57 PM }">Inspect me to see my attributes.</div>
Utilities directives
Directive identifier Description Type
@<C#-keyword>, @{<C# Code>},@(<C# Code>) Inject C# code to HTML template Utilities
@inject Inject an instance into a component Utilities
@page Specify the route and parameter to a component Utilities
@section Define a section, not available for Razor Component. Not commonly used in Blazor. N/A
@functions Deprecated, use @code instead N/A