序文
ここではBlazorの基本的な構文と簡単なコンポーネント化について説明します。
基本的な文法
ルーティング
@ページ
ルーティングの場所
@page "/fetchdata"
ページ要素の条件付き生成
@if / else
@if (forecasts == null)
{
<p><em>Loading...</em></p>
}
else
{
<table class="table">
<thead>
<tr>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
</table>
}
@ために
@for(var i = 0;i< 10; i++)
{
<text>我是text @i</text>
}
@foreach
@foreach (var forecast in forecasts)
{
<tr>
<td>@forecast.Date.ToShortDateString()</td>
<td>@forecast.TemperatureC</td>
<td>@forecast.TemperatureF</td>
<td>@forecast.Summary</td>
</tr>
}
縛る
パラメータバインディング（代入、一方向）
<input title="@Title" value="@Value" />
@code {
[Parameter]
public string Title{ get; set; }
[Parameter]
public string Value { get; set; }
}
パラメータバインディング(双方向)
<input @bind="Title" />
@code {
public string Title{ get; set; }
}
イベントバインディング
<button @onclick="ShowTest"/>
@code {
public void ShowTest()
{
Console.WriteLine("我被按钮点击了");
}
}
辞書バインディング @attributes
コントロールのプロパティ バインディングを簡素化する
<input @attributes="InputList" />
//等价于 <input title="我的标题" value = "10" />
@code {
public Dictionary<string, object> InputList {
get; set; } = new Dictionary<string, object>()
{
{
"title","我的标题"},
{
"value","10"}
};
}
コンポーネント化
- コンポーネント化できるのはカミソリだけです
- Razor ファイル名の最初の文字は大文字にする必要があります
- 注入は必要なく、コンポーネントを直接使用できます。したがって、ファイル名の競合を避けるために、名前付けを標準化する必要があります。
使い方
@Parameter パラメータのインジェクション
パラメータインジェクションは複数のパラメータをサポートします
- 一般的なデータ型
- リストタイプ
- アクションの委任
@code {
[Parameter]
public string Title{
get; set; }
[Parameter]
public string Value {
get; set; }
[Parameter]
public List<string> TestList {
get; set; } = new List<string>();
}
使用
<Test Title="我是测试的标题" Value="数值" TestList="@strList"/>
@code{
public List<string> strList = new List<string>()
{
};
protected override Task OnInitializedAsync()
{
for(var i = 0;i < 10; i++)
{
strList.Add("我是标题" + i);
}
return base.OnInitializedAsync();
}
}
折り返し電話
コンポーネント宣言コールバック
内部テスト.カミソリ
[Parameter]
public EventCallback<string> OnClick{
get; set; }
//string是回调的返回参数
コンポーネントインジェクションコールバック
参照コンポーネント
<Test OnClick="TestBtn"/>
@code{
//注意，注入的函数的参数和回调的参数要保持一致
public void TestBtn(string msg)
{
Console.WriteLine("我接收到了回调"+msg);
}
}
コンポーネントがコールバックを起動する
テストかみそり
<button @onclick="ShowTest"/>
@code {
[Parameter]
public EventCallback<string> OnClick{
get; set; }
//通过按钮事件触发回调，这样引用的页面就会触发回调函数
public void ShowTest()
{
OnClick.InvokeAsync("点击回调函数");
}
}
直接制御 @ref
@ref を使用してコンポーネント要素を直接制御する
テストは私たちが定義したコンポーネントです
//通过@ref直接使用组件
<Test @ref="myTest" OnClick="TestBtn"/>
@code{
//先声明组件
private Test myTest {
get; set; }
//通过某种方式调用组件，我这里是用按钮点击
public void TestBtn(string msg)
{
myTest.Title = "我直接操控修改了Title";
myTest.TestBtn();
Console.WriteLine("我接收到了回调"+msg);
}
}
ライフサイクル
アプリの初期段階:
このフェーズでは、Blazor アプリケーションが初期化され、必要なリソースが読み込まれます。
- OnInitializeAsync：
- アプリケーションの初期化時に呼び出され、通常はいくつかの初期化操作を実行します。
コンポーネント レンダリング フェーズ: このフェーズでは、コンポーネントがレンダリングされ、ユーザー インターフェイスに表示されます。
- アプリケーションの初期化時に呼び出され、通常はいくつかの初期化操作を実行します。
- OnParametersSet：
- コンポーネントが新しいパラメーター値を受け取った後に呼び出され、このメソッドでパラメーター関連の操作を実行できます。
OnAfterRender: コンポーネントが画面にレンダリングされた後に呼び出され、DOM 操作に関連する操作をこのメソッドで実行できます。
- コンポーネントが新しいパラメーター値を受け取った後に呼び出され、このメソッドでパラメーター関連の操作を実行できます。
ライフサイクルフックフェーズ:
この段階で、Blazor は、特定の操作を実行するために使用できる特定のライフサイクル フック メソッドをいくつか提供します。
- 初期化時：
- コンポーネントの初期化が完了した後に呼び出され、このメソッドでいくつかの初期化ロジックを実行できます。
- OnAfterRenderAsync：
- コンポーネントが画面にレンダリングされた後に呼び出され、このメソッドで非同期操作を実行できます。
- OnParametersSetAsync：
- コンポーネントが新しいパラメーター値を受け取った後に呼び出され、このメソッドで非同期操作を実行できます。
アプリの終了フェーズ:
この段階で、Blazor アプリケーションは終了し、クリーンアップされます。
- 私たちは以下のものを処分します：
- コンポーネントが DOM から削除されるときに呼び出され、このメソッドでいくつかのクリーンアップ ロジックを実行できます。
デバッグ
ホットリセット
コンソール出力
JS の代わりに C# が使用されるためです。そのため、JS の console.log メソッドを直接使用することはできません。ただし、C# の Console.WriteLine() を使用することはできます。
実行中のコンソールに印刷されます
