# 鴻蒙Harmony-雙向數據綁定MVVM以及$$語法糖介紹

## 1.1 雙向數據綁定概念

在鴻蒙（HarmonyOS）應用開發中，雙向數據改變（或雙向數據綁定）是一種讓數據·模型和UI組件之間保持同步的機制，當數據發生變化時，UI自動更新;反之，當用于通過UI代碼操作修改數據時，數據模型也會同步更新，這種機制簡化了開發，減少了手動DOM或UI組件的代碼量，舉個簡單的例子，比如輸入框和變量的綁定，用戶輸入變量更新，變量在其他地方修改時輸入框的內容也發生變化

## 1.2雙向數據綁定步驟

1. @State裝飾器修飾數據
2. 通過@onchange事件去收集改變的值，并將新值賦值給原來變量，達到數據改變


## 1.3案例演示

* 代碼演示

```ts
@Entry
@Component
struct Test1 {
@State userName: string = '小程神'

build() {
Column({ space: 20 }) {
Text('通過onChange收集inputValue')
TextInput()
.border({
color: Color.Black,
width: 1
})
.onChange((value) => {
this.userName = value

})
Text('展示inputvalue')
TextInput({ text: this.userName })
.border({
width: 1,
color: Color.Black
})
}.height('100%')
.width('100%')
.padding(20)
}
}
```

* 效果展示


* 總結
1. 數據發生變化 綁定text的值 –>視圖產生更新
2. 視圖產生事件 onChange事件 –>數據發生變化

## 1.4MVVM：$$語法糖

> 通過上述的onChange事件改變數據，其實還有更為簡便的一種方式可以實現雙向數據綁定

官方文檔上提供了以下組件實現雙向數據綁定的快捷方法


### 1.4.1案例演示

1. textInput演示

* 代碼展示

```ts
@Entry
@Component
struct Test2 {
@State message: string = 'Hello World';

build() {
Column({ space: 10 }) {
Text(this.message)
TextInput({ text: $$this.message })
Button('改變數據')
.onClick(() => {
this.message = '我的小貓暴脾氣'
})

}.width('100%')
.height('100%')
.padding(20)
}
}
```

* 效果展示


2. checkBox展示

* 代碼展示

```ts
Text(this.ischecked+'')
Checkbox()
.select($$this.ischecked)
```

* 效果展示


3. Toggle展示

* 代碼展示

```
Text(this.isOn + '')
Toggle({
type: ToggleType.Switch,
isOn: $$this.isOn
})
```

* 案例演示


4. 時間選擇器展示

* 代碼展示

```ts
Text(this.date.toDateString())
DatePicker({
selected:$$this.date
})
```

* 效果演示


5.Select展示

* 代碼展示

```ts
Text('mySelect' + this.select)
Select([
{ value: 'vip' },
{ value: '綠鉆' },
{ value: '黃鉆' }
])
.value($$this.select)

```

審核編輯 黃宇