Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)

合集 - Java登陆(70)

59.Java登陆第三十八天——VUE3双向绑定，监听器(侦听器)2024-04-05

60.Java登陆第三十八天——VUE3生命周期、钩子函数、组件拼接、组件传参(组件通信)2024-04-05 61.Java登陆第三十九天——Router路由入门2024-04-06 62.Java登陆第三十九天——Router编程式路由，路由传参2024-04-06 63.Java登陆第四十天——Router路由守卫2024-04-07 64.Java登陆第四十天——Router路由守卫练习2024-04-07 65.Java登陆第四十一天——Promise、async关键字、await关键字2024-04-08 66.Java登陆第四十一天——Axios2024-04-09 67.Java登陆第四十二天——Axios拦截器2024-04-10 68.Java登陆第四十二天——跨域2024-04-14 69.Java登陆第四十三天——Pinia2024-04-17 70.Java登陆第四十四天——跟写微头条遇到的问题2024-04-25

单向绑定

之前学习的栗子，都是单向绑定。

单向绑定: 响应式数据对象的变化会更新dom树，用户的某些操作造成的数据更新，不会同步更新到响应式数据对象。

栗子

App.vue

<script setup>
import {ref, reactive} from 'vue';
let msg = ref("hello");
</script>

<template>
  <input v-bind:value="msg" type="text"><br>
  {{ msg }}
</template>

<style scoped>
</style>

效果展示

可以看到，尽管更改了输入框的值，但该响应式数据对象还是未更新。

双向绑定

双向绑定，也叫表单输入绑定。

双向绑定: 响应式数据的变化会更新dom树，用户的某些操作造成的数据更新，也会同步更新到响应式数据对象。

提供了一种双向绑定命令：v-model

语法格式如下：

<标签 v-model=" 数据源 "></标签>

双向绑定的特点：

常用表单中。
可以加修饰符。.lazy：input标签触发change事件后才更新数据。

栗子

App.vue

<script setup>
import {ref, reactive} from 'vue';
let msg = ref("hello");
</script>

<template>
  <input v-model="msg"  type="text"><br>
  {{ msg }}
</template>

<style scoped>
</style>

效果展示

单向绑定和双向绑定

监听器(侦听器)

监听器类似于JavaWeb中的Listener。当某对象发生改变时会触发特定的函数。

提供了两种监听器函数：watch和watchEffect

语法格式如下：

watch(监听对象，function (newValue, oldValue) {
//要执行的函数方法体，该function一般写成箭头函数
})

watchEffect(执行的函数)

监听器的特点：(下面所说的对象，大部分对象都是响应式数据对象)

因为是函数，所以需要从vue引入。
watch函数的监听对象，可以是对象的某个属性，也可以是某个对象。
watchEffect监听所有对象，所以只需要写执行的函数即可。

watch栗子

App.vue

<script setup>
import {ref, reactive, watch, watchEffect} from 'vue';

let msg = ref("hello")

watch(msg, function (newValue, oldValue) {

  console.log(oldValue + "变为->" + newValue);
})
</script>

<template>
  <input v-model="msg" type="text">
  <h3 v-text="msg"></h3>
</template>

<style scoped>
</style>

效果展示

在监听对象是ref函数生成的响应式数据对象时，会默认指向监听对象.value。

此时的newValue和OldValue都是监听对象.value。如果再写成

watch(msg, function (newValue, oldValue) {
  console.log(oldValue.value + "变为->" + newValue.value);
})

控制台就会输出undefind。

watchEffect栗子

App.vue

<script setup>
import {ref, reactive, watch, watchEffect} from 'vue';

let msg = ref("hello")
watchEffect(function () {
  console.log(msg.value+"变为->"+msg.value)
})

</script>

<template>
  <input v-model="msg" type="text">
  <h3 v-text="msg"></h3>
</template>

<style scoped>
</style>