# 鴻蒙Harmony-雙向數(shù)據(jù)綁定MVVM以及$$語(yǔ)法糖介紹

## 1.1 雙向數(shù)據(jù)綁定概念

在鴻蒙（HarmonyOS）應(yīng)用開(kāi)發(fā)中，雙向數(shù)據(jù)改變（或雙向數(shù)據(jù)綁定）是一種讓數(shù)據(jù)·模型和UI組件之間保持同步的機(jī)制，當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，UI自動(dòng)更新;反之，當(dāng)用于通過(guò)UI代碼操作修改數(shù)據(jù)時(shí)，數(shù)據(jù)模型也會(huì)同步更新，這種機(jī)制簡(jiǎn)化了開(kāi)發(fā)，減少了手動(dòng)DOM或UI組件的代碼量，舉個(gè)簡(jiǎn)單的例子，比如輸入框和變量的綁定，用戶(hù)輸入變量更新，變量在其他地方修改時(shí)輸入框的內(nèi)容也發(fā)生變化

## 1.2雙向數(shù)據(jù)綁定步驟

1. @State裝飾器修飾數(shù)據(jù)
2. 通過(guò)@onchange事件去收集改變的值，并將新值賦值給原來(lái)變量，達(dá)到數(shù)據(jù)改變


## 1.3案例演示

* 代碼演示

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

build() {
Column({ space: 20 }) {
Text('通過(guò)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)
}
}
```

* 效果展示


* 總結(jié)
1. 數(shù)據(jù)發(fā)生變化 綁定text的值 –>視圖產(chǎn)生更新
2. 視圖產(chǎn)生事件 onChange事件 –>數(shù)據(jù)發(fā)生變化

## 1.4MVVM：$$語(yǔ)法糖

> 通過(guò)上述的onChange事件改變數(shù)據(jù)，其實(shí)還有更為簡(jiǎn)便的一種方式可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定

官方文檔上提供了以下組件實(shí)現(xiàn)雙向數(shù)據(jù)綁定的快捷方法


### 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('改變數(shù)據(jù)')
.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. 時(shí)間選擇器展示

* 代碼展示

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

* 效果演示


5.Select展示

* 代碼展示

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

```

審核編輯 黃宇