Vue3.0学习（9）-双向数据绑定

双向数据绑定是啥？为什么使用？
what：实现双向数据绑定，即 js - html ；html -js
why：比如 html 中的 input 输入框，我们可以从服务器获取相应数据显示到html中，如果 input 中的数据发生了变化我们也需要相应的把数据发送到服务器保存起来。

单向数据绑定-显示数据

数据从 js 中传到 html 中（只是能显示出来数据，如果js中的数据发生了变化，html中的数据是不会变的）。

1、代码：

 <input :value="age" type="text"></input>            
 <button @click="onClick1">年龄</button>

const age =18

function onClick1(){
    
    
     console.log(age)
     alert(age)
 }

2、效果：更改输入框数据后，弹出数据未变。

在这里插入图片描述

3、双向数据绑定实现方式

如果想实现当输入框内数据变化后，变量的数据同时发生变化，需要使用以下方式：
1）docment.getelm…
2）event (类似小程序)
3）使用vue3.0 v-model 指令 + 响应式对象方式实现

双向数据绑定

使用上述第三种方式实现。

1、代码：

  <input v-model="age" type="text"></input>            
  <button @click="onClick1">年龄</button>

--引入ref 方法
const {
    
    createApp,ref,reactive} = Vue

const age =ref(18)

function onClick1(){
    
    
    console.log(age)
    alert(age.value)
}

2、代码解读：

1）ref ：使用 ref 会把变量包装成一个响应式对象，与普通的对象不同，普通对象与使用console.log打印出包装的对象：

普通对象
const profie{
    
    
	age：18
}
包装对象
const age=ref(18)

在这里插入图片描述
2）html 中不需要使用 ref 封装对象的 .value 进行数据绑定，vue内部已经处理了，直接使用：age 。 js中需要使用 age.value。

3）v-model 不是实现双向数据绑定的根本，v-model只是一个工具。数据是响应式对象才是根本。如果数据不是 ref 包装的，那么也无法实现双向数据绑定。

4）除了ref之外也可以使用 reactive 。ref一般包装变量，reactive一般包装对象。例，用法与ref相同。

const profie = reactive {
    
     
age :18
}

3、效果：更改数据后：数据发生变化。

在这里插入图片描述

单向数据绑定-真正单向

数据从 js 中传到 html 中（不仅能显示出来数据，如果js中的数据发生了变化，html中的数据是会同时变化）。

1、代码

<div>{
    
    {
    
    number}}</div>
<button @click="onincrement">+1</button>

--let number =1  必须是响应式对象才行
let number =ref(1)
function onincrement(){
    
    
    number.value++;
    console.log(number.value)
}

2、效果

点击按钮 +1 日志中记录出变量在变， html中数据也在相应变化。
在这里插入图片描述