这章我们来学习，现代前端框架中最精彩的一部分，双向绑定。除了掌握原生HTML标签的双向绑定使用，我们还要在一个自定义的组件上，手撸实现双向绑定。双向绑定，是前两章知识点的一个综合运用（父传子、子传父），但因为又多了一层抽象，有一点小难度，需要一点时间和练习来熟悉套路，但必须要越过去。此后，基础部分就是一马平川了。此章我们分为以下几个部分来一起学习：
一、补充：HTML标签和组件
在学习双向绑定前，我们需要进一步理解组件的本质，可以从下面两个角度：
角度1、我们定义一个组件，相当于定义一个类。在模板中使用一个组件时，比如这样<MyComponent></MyComponent>，相当于new一个实例对象，并通过标签属性进行数据赋值，实列化了，组件就具有了视图、状态、生命周期等特征。
角度2、无论Vue，还是Blazor。组件的视图模板，均由HTML和其它组件构成。其中组件成分还可以继续拆，拆到底，都是HTML。HTML是组件的根零件，到它就不可以再拆了，你只能使用它，无法窥探它的内部结构。你可以认为，组件在视图这个层面上，就是HTML的再组合。同时，组件还包括了数据和逻辑，通过绑定技术实现视图与数据的交互，再通过虚拟DOM技术实现了差量更新，提升了交互的性能。
理解了HTML标签和组件，将有助于我们学习后面的知识点。
二、HTML标签的双向绑定
我们之前使用{{}}或者@时，都只是实现了逻辑层>视图层的单向绑定，即逻辑层的数据改变时，视图层自动更新，这是不够的。比如输入框input，当我们在视图层输入值时，逻辑层的数据也应该响应新输入的值，实现自动更新，实现视图层>逻辑层的自动更新。
比如input(type为text)，我们将value属性与逻辑层绑定，实现逻辑层到视图层的单向绑定。而视图层到逻辑层，则需要借助DOM事件的event对象，前面我们说过，DOM事件的回调里，会自动导入e对象。我们在回调里，直接通过e对象获得新输入的value值，然后赋值给逻辑层数据。这个过程很简单，因为不需要涉及跨组件通讯。
//Vue=====================================//通过属性绑定和事件回调，实现双向绑定，不需要在父子组件之间传值<template> <h1>逻辑层数据：{{inputValue}}</h1> <input :value = "inputValue" @input="(e)=>{inputValue = e.target.value}"></template><script setup>import { ref } from 'vue'const inputValue = ref('输入框初始值')</script>//v-model可以认为是以上方式的语法糖<input type="text" v-model="inputValue"/> //Blazor===================================//通过属性绑定和事件回调，实现双向绑定，不需要在父子组件之间传值。获取event对象，需要指定类型，获取value值也和Vue不太一样，同时注意类型转换<h1>逻辑层数据：@inputValue</h1><input value = "@inputValue" @oninput = "(ChangeEventArgs e)=>{inputValue = Convert.ToString(e.Value);}" />@code { private string inputValue = "输入框初始值";}//@bind可以认为是以上方式的语法糖//bind指令有三个属性，culture、format和event，其中enent用来指定更新时机，默认为onchang失去焦点时发生，此例修改为oninput输入时发生<input @bind = "inputValue" @bind:event = "oninput" />
三、自定义组件的双向绑定
如前所述HTML标签和组件的区别。在HTML标签中，我们可以使用原生的属性、事件及事件对象event，实现双向绑定。而组件，是一个再组合的东西，并没有原生的属性、事件及事件对象，都需要我们自己来实现。参照HTML标签的双向绑定，我们来尝试一下，思路和HTML标签是一样的，只是我们需要掰开组件，到内层去操作，所以需要进行数据的父传子和子传父。
下面的案例，我们在子组件里定义一个HTML标签：input文本框，实现子组件和父组件的逻辑数据实现双向绑定。双向绑定可以定义多个
//Vue=====================================//1、父组件<template> <div class="Parent"> <h1>灰色框是父组件</h1> <h1>父组件逻辑数据值：{{parentValue}}</h1> <Child :inputValue = "parentValue" @update:inputValue = "(newValue)=>{parentValue = newValue}"> </Child></div></template><script setup>import Child from './components/Child.vue'import { ref } from 'vue'const parentValue = ref('父组件初始值')</script>//2、子组件<template> <div class="Child"> <h1>红色框是子组件</h1> <input :value = "inputValue" @input="childEmit"/> </div></template><script setup>import {ref} from 'vue'const props = defineProps(['inputValue'])const emits = defineEmits(['update:inputValue'])const childEmit = (e)=>{ emits('update:inputValue',e.target.value)}</script>//3、下面来分析一下这个过程：//从案例中，我们可以看到，<Child>这个组件，实际上仅是起到搬运工的作用，①派出属性，将父组件的数据状态parentValue交给子组件内部的input消费；②拍出事件，将子组件内部的input新值，传递给父组件的数据状态parentValue消费。//除去Child这个外壳，实际上还是逻辑层的数据状态，在和HTML标签做交互，只是因为逻辑层数据和视图层HTML标签在不同的位置，所以需要<Child>这个桥梁！//4、自定义组件的双向绑定，可以使用v-model语法糖吗？//可以的，但是要遵守属性和事件的命名约定，如下：//属性名：任意名称。但如果使用【v-model="parentValue】的格式，就必须命名为modelValue//事件名：update:属性名。但如果使用【v-model="parentValue"】的格式，就必须命名为update:modelValue//上面的案例，我们可以使用v-model来简化一下，但只能简化父组件哦，子组件保持不变【注意如果使用v-model的最简形式，案例中子组件的属性和事件名称改一下】<Child v-model = "parentValue"></Child>
<Child v-model:firstValue = "parentValue1" v-model:secondValue = "parentValue2"></Child>
//Blazor====================================//1、父组件<div class = "Parent"> <h1>灰色框里是父组件</h1> <h1>父组件逻辑数据值：@parentValue</h1> <Child InputValue="@parentValue" InputValueChanged="@((newValue)=>{parentValue = newValue;})"></Child></div>@code { private string parentValue = "输入框初始值";}//2、子组件<div class="Child"> <h1>红色框里是子组件</h1> <input value = "@InputValue" @oninput = "ChildEmit" /></div>@code { [Parameter] public EventCallback<string> InputValueChanged { get; set; } [Parameter] public string? InputValue{ get; set; } private async Task ChildEmit(ChangeEventArgs e) { await InputValueChanged.InvokeAsync(Convert.ToString(e.Value)); }}//3、分析：双向绑定的实现逻辑，和Vue基本是一样的。通过属性参数，将父组件的逻辑层数据parentValue交给子组件的input，通过EventCallback事件，将子组件input的新值，交给父组件的parentValue。本质上，还是逻辑层数据和HTML原生标签的交互，自定义组件只是玩个了寂寞。//4、可以使用@bind的语法糖吗？肯定是可以的//一样要遵守属性和事件的命名约定，如下：//属性名称：任意名称//EventCallback事件名称：属性名称Changed//上面案例子组件不做改动，父组件可以简写为：<Child @bind-InputValue="parentValue"></Child>
四、再次认识指令属性/修饰符
虽然是再次认识，但仍旧不打算深入，对于Blazor的指令属性，或Vue的事件修饰符，我认为即使已经开始进行生产应用的开发，都仅需要掌握用法即可，不需要深入内部的实现甚或自己来实现一个。所以，下面仅是一个使用方法的汇总
1、Vue的修饰符，常用的主要有v-on类修饰符和v-model类修改符
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
（1）v-on类修饰符
①prevent：阻止默认行为。HTML标签a的默认行为“打开链接”，被阻止执行
<a href=”http://www.hiwork.xyz” @click.prevent=”show”>
②stop：阻止事件冒泡。如果没有stop，点击div2时，div1也会被执行。
<div id = "div1"@click = "show1">
<div id= "div2" @click.stop = "show2"></div>
</div>
③capture：事件从外层开始执行。事件正常从内层开始执行（即冒泡），show2>show1。在外层使用capture后，从外层开始执行，show1>show2
<div @click.capture = "show1">
<div @click = "show2"></div>
</div>
④once：事件只触发一次。无论点击按钮多少次，show1都只在第一次点击时执行。
<button @click = "show1"></button>
⑤self：只有事件target是自己时才触发事件。点击div2时，按冒泡顺序，show1在show2之后执行，但因为div1使用了self，所以点击div2时，show1不会执行。
<div id="div1" @click.self = "show1" >
<div id="div2" @click = "show2" ></div>
</div>
⑥⑦passive/native：这两个极少用，但文档吧
（2）v-model类修饰符，如<input v-model.number = "count" />
①number：将输入值转为数值
②trim：去除输入值首尾空格
③lazy：输入框失去焦点时再更新
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2、Blazor的指令/事件属性，即少又难用，不知道未来是否会改进。主要有DOM事件的属性，Bind指令属性。另外，指令属性的使用也比较奇葩，需要重复申请，见案例
（1）DOM事件属性
①preventDefault，阻止HTML标签的默认行为，同Vue的prevent
<a href = "http://www.hiwork.xyz" @onclick = "Show1" @onclick:preventDefault></a>
②stopPropagation，组止冒泡，同Vue的stop
<div id = "div1" @onclick = "show1">
<div id= "div2" @onclick = "show2" @onclick:stopPropagation></div>
</div>
（2）Bind指令属性
①event，指定双向绑定视图更新逻辑的时机，是失去焦点时更新onchange（默认），还是实时更新oninput
<input @bind ="parentValue" @bind:event="oninput"/>
②format，指定双向绑定的日期格式
<input @bind="StartDate" @bind:format="yyyy-MM-dd" />
③culture，指定语言，没有用过，查文档吧
