This is the best part of the modern front-end framework. In addition to the two-way binding of the original HTML tags, we have to do the two-way binding on a custom component. The two-way binding is a combination of the knowledge points of the first two chapters (father, son), but because there is an abstract layer, a little bit of difficulty, it takes a little time and practice to get to know the routing, but it has to go over. The base part is a mapinian. This chapter is divided into the following parts: supplementation: the HTML tag and the two-way binding of the HTML component.

This is the best part of the modern front-end framework. In addition to the two-way binding of the original HTML tags, we have to do a two-way binding on a self-defined component. The two-way binding is a combination of the knowledge points of the first two chapters (father, son), but because there is an abstract layer, a slight difficulty, and it takes a little time and practice to get to know the routing, but it has to go further. The foundation is a mapinian. We learn together in the following sections:

Before learning to bind in both directions, we need to further understand the essence of the components from two angles:

An angle 1, we define a component, which is equivalent to a class. When a component is used in the template, for example, it is equivalent to a new example object and is assigned data values through label properties, which are actually presented, and components have the characteristics of view, state, life cycle, etc.

Angular 2, whether Vue, or Blazor. The image template for the components is composed of HTML and other components. The components can still be removed, and they can be removed. HTML is the root parts of the components, so that it cannot be removed, and you can only use it, and you cannot look into its internal structure. You can think that components at this level of the view are the reassemble of HTML.

Understanding the HTML labels and components will help us learn the knowledge points that follow.

我们之前使用{{}}或者@时，都只是实现了逻辑层&gt;视图层的单向绑定，即逻辑层的数据改变时，视图层自动更新，这是不够的。比如输入框input，当我们在视图层输入值时，逻辑层的数据也应该响应新输入的值，实现自动更新，实现视图层&gt;逻辑层的自动更新。

For example, input (type is text), we bind the properties of the value to the logical layer, so that the logical layer can be tied one-way to the view layer. The view layer to the logical layer requires the use of the DOM event object, which, as we said earlier, will automatically be imported into the e-objects in the return of the DOM event. In our return, we get the new value through the e-object, and then assign the value to the logical layer. This process is simple, because it does not need to involve cross-component communication.

//Vue= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   =

// By properties binding and event echoing to achieve two-way binding without having to pass values between parent and child components

/v-model can be considered to be the syntax sugar in the above mode

//Blazor= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =              = =

//Bide binding through attribute binding and event echo, without having to pass values between parent and child components. To get an object, you need to specify the type, and the value value is different from that of Vee, while paying attention to type conversion.

@oninput = "(ChangeEventArgs e)=&gt;{inputValue = Convert.ToString(e.Value);}" /&gt;

<a href="https://github.com/code">@code</a> {  
    private string inputValue = "输入框初始值";  
}

//@bind可以认为是以上方式的语法糖  
//bind指令有三个属性，culture、format和event，其中enent用来指定更新时机，默认为onchang失去焦点时发生，此例修改为oninput输入时发生  
@bind = "inputValue" <a href="https://github.com/bind">@bind</a>:event = "oninput" /&gt;

The difference between HTML labels and components, as mentioned above. In HTML tags, we can use the original properties, events and event objects, to bind in both directions. And components, which are a reassemble, without the original properties, events and event objects, need to be done by ourselves. By reference to the two-way binding of HTML tags, let's try the same thinking as HTML tags, except that we need to open components to operate on the inner layers, so that we need to have a parent and a child of the data.

In the following cases, we define a HTML label in the subcomponent: input text box to achieve a two-way binding of the logical data of the sub-assembly and parent components.

//Vue= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = parent component = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = / = = = = = = = = = = = = = = = = = = / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

//3. Here's the analysis of the process: // From the case, we see that this component actually acts only as a porter, 1 sending attributes and handing the parent's data state to input consumption inside the sub-assembly; 2 taking an event to capture the input new value inside the sub-assembly and passing the data to the parent-assembly state of ParentValue consumption. //Except for Child, it is actually the logical level of the data state that interacts with the HTML label, just because the logical layer data and the view layer's HTML label are located in different places and therefore the bridge is needed!

//4、自定义组件的双向绑定，可以使用v-model语法糖吗？  
//可以的，但是要遵守属性和事件的命名约定，如下：  
//属性名：任意名称。但如果使用【v-model="parentValue】的格式，就必须命名为modelValue  
//事件名：update:属性名。但如果使用【v-model="parentValue"】的格式，就必须命名为update:modelValue  
//上面的案例，我们可以使用v-model来简化一下，但只能简化父组件哦，子组件保持不变【注意如果使用v-model的最简形式，案例中子组件的属性和事件名称改一下】

//Blazor= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =   = = = =     = = = = = =

Parent Component Logic Data Value: @parentValue

<a href="https://github.com/code">@code</a> {  
    private string parentValue = "输入框初始值";  
}

<a href="https://github.com/code">@code</a> {

/3, Analysis: The two-way binding logic of realization is basically the same as that of Vue. By attribute parameters, the logical layer data of the parent component is given to the input of the sub-assemblies, the new value of the sub-assemblies is given to the parentValue of the parent components through the EventCallback event. In essence, it is also the interaction of the logic layer data and the HTML original labels that define the components by self-defining components in isolation.

//4、可以使用@bind的语法糖吗？肯定是可以的  
//一样要遵守属性和事件的命名约定，如下：  
//属性名称：任意名称  
//EventCallback事件名称：属性名称Changed  
//上面案例子组件不做改动，父组件可以简写为：  
@bind-InputValue="parentValue"&gt;

IV. Retrospection of command attributes/modifiers

It's a rediscovery, but it's still not intended to go further. For Blazor's command properties, or the Vee event modifier, I think that even if we've already started to develop a production application, we need to know how to use it, and we don't need to do it in-house or even by ourselves. So, the following is just a summary of the methods used.

1. Vue modifiers, most commonly used with v-on class modifiers and v-model class modification

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1prevent: Block default. The default HTML labela "open link " is blocked

2stop: Stops the event from blistering. If you don't stop, click div2 and div1 will be executed.

③capture：事件从外层开始执行。事件正常从内层开始执行（即冒泡），show2&gt;show1。在外层使用capture后，从外层开始执行，show1&gt;show2

4once: The event only triggers once. No matter how many buttons you click, show1 will only be performed on the first click.

<a href="”http://www.hiwork.xyz”&nbsp;@click.prevent=”show”"></a><a href="”http://www.hiwork.xyz”&nbsp;@click.prevent=”show”">@click</a> = "show1"&gt;

5self: An event only triggers an event when the event target is its own. Click on div2, in the bubble order, show1 after show2, but since div1 uses self, click on div2 and show1 does not.

67passive/native: These two are of little use, but file

2trim: Remove input value starting and ending spaces

3lazy: Update the input box when it loses focus

Blazor’s command/event properties, which are rare and difficult to use, don't know if they will be improved in the future.

1 PreventDefault, prevent default behaviour of HTML tags, with Vue prevent

<a href="http://www.hiwork.xyz">@onclick</a> = "Show1" <a href="https://github.com/onclick">@onclick</a>:preventDefault&gt;

2 stop Propagation, set up to stop bubbles, and vue stop

1event, specify whether the time to update the logic of the two-way binding view is to update the conhange (default) when the focus is lost or to update the oninput in real time

@bind="StartDate" <a href="https://github.com/bind">@bind</a>:format="yyyy-MM-dd" /&gt;

Blazor and Vue comparative learning (base 1.5): two-way binding