在本课程中，您将为Blazor开发设置计算机，并构建您的第一个Blazor应用程序。
安装
要开始使用blazor , 请按照 ASP.NET Core Blazor 入门 说明进行操作.
-
若要创建 Blazor Server 应用，请安装带有 ASP.NET 和 Web 开发工作负载的 Visual Studio 2019 的最新版本 。
若要创建 Blazor Server 应用和 Blazor WebAssembly 应用，请安装带有 ASP.NET 和 Web 开发工作负载的 Visual Studio 2019 的最新预览版 。
有关 Blazor WebAssembly 和 Blazor Server 这两个 Blazor 托管模型的信息，请参阅 ASP.NET Core Blazor 托管模型 。
-
通过运行以下命令来安装 Blazor WebAssembly 预览版模板：
.NET Core CLI
dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-rc1.20223.4 -
创建新项目。
-
选择“Blazor 应用” 。 选择“下一步” 。
-
在“项目名称”字段提供项目名称，或接受默认项目名称 。 确认“位置” 条目正确无误或为项目提供位置。 选择“创建” 。
-
若要获得 Blazor WebAssembly 体验（Visual Studio 16.6 预览版 2 或更高版本），请选择“Blazor WebAssembly 应用”模板 。 若要获得 Blazor Server 体验（Visual Studio 16.4 或更高版本），请选择“Blazor Server 应用”模板 。 选择“创建” 。
-
按 Ctrl+F5 运行应用
侧栏中的选项卡提供多个页面：
-
Home
-
计数器
-
提取数据
在“计数器”页上，选择“单击我” 按钮，在不刷新页面的情况下增加计数器值。 递增网页的计数器值通常需要编写 JavaScript，但借助 Blazor，可使用 C#。
Pages/Counter.razor：
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code { private int currentCount = 0;
private void IncrementCount() { currentCount++; }}
浏览器中针对 /counter 的请求（由顶部的 @page 指令指定）会导致 Counter 组件呈现其内容。 组件呈现为呈现树的内存中表现形式，之后可使用它灵活高效地更新 UI。
每次选择“单击我”按钮时会出现以下情况 ：
-
触发
onclick事件。 -
调用
IncrementCount方法。 -
递增
currentCount的值。 -
再次呈现组件。
运行时将新内容与之前内容进行比较，且仅将已更改内容应用于文档对象模型 (DOM)。
使用 HTML 语法将组件添加到另一个组件。 例如，通过将 <Counter /> 元素添加到 Index 组件，可将 Counter 组件添加到应用的主页。
Pages/Index.razor：
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
运行应用。 主页拥有其自己的计数器，该计数器由 Counter 组件提供。
组件参数使用特性或子内容指定，允许在子组件上设置属性。 若要将参数添加到 Counter 组件，请更新组件的 @code 块：
-
使用
[Parameter]特性为IncrementAmount添加公共属性。 -
增加
currentCount的值时，更改IncrementCount方法以使用IncrementAmount。
Pages/Counter.razor：
@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
[Parameter]
public int IncrementAmount { get; set; } = 1;
private void IncrementCount()
{
currentCount += IncrementAmount;
}
}
使用特性在 Index 组件的 <Counter> 元素中指定 IncrementAmount。
Pages/Index.razor：
@page "/"
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />运行应用。 Index 组件拥有其自己的计数器，每次选择“单击我”按钮时，计数器值递增 10 。 /counter 处 Counter 组件 (Counter.razor) 的值继续递增 1。
构建第一个Blazor应用程序
一旦运行了第一个Blazor应用程序， 请尝试 构建你的第一个 Blazor 应用程序. https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/build-your-first-blazor-app?view=aspnetcore-3.1
