One Way Binding

單向繫結可以將@code區塊內的field或property的值，透過@符號將值綁定到html中，如下面程式碼中，text1是filed而text2是property，透過@都可以綁定到h1內。

@page "/"

<h1>@text1</h1>

<h1>@text2</h1>

@code{

    private string text1 = "Hello Blazor!";

    public string text2 { get; set; } = "Hello Blazor!";
}

Two Way Binding

雙向繫結方式，可以將user輸入的值與@code區塊中對應的欄位/屬性繫結在一起，在Blazor中，可以用@bind來做繫結，看看下面的例子：

@page "/"

<input @bind="@myvalue" type="text" class="form-control" />

<h2>@myvalue</h2>

@code{
    public string myvalue { get; set; }
}

• 第一次繫結，將input的輸入值，繫結到@code區塊的myvalue
• 第二次繫結，將myvalue值繫結到html的h2

• 另外需注意@bind是有區分大小寫的，@Bind或@BIND都不可使用。

Event Binding

除了上面的one way、two way binding，還有一個event binding，用來繫結一些事件，而事件繫結的語法是這樣：

@bind:event="事件名"

例如要綁onchange事件，可以寫@bind:event="onchange"。
如果有執行上面two way binding的sample code，會發現只有在input lose focus的情況下，h2才會顯示myvalue的值，如果要邊輸入邊顯示的話，需要再繫結一個oninput事件：

@page "/"

<input @bind="@myvalue" @bind:event="oninput" type="text" class="form-control" />

<h2>@myvalue</h2>

@code{
    public string myvalue { get; set; }
}