Vue3v-model和侦听器以及特殊情况取到dom的方法

一、v-model双向绑定表单元素（绑定的元素需要是响应式的）

<template>
    <div>
<input type="text" placeholder="请输入代办事件" v-model="name" @keyup.enter="keyinput">
<input type="button" value="新建" @click="addToDoList">
<div v-for="val in listVal ">{{val}}</div>
    </div>
</template>
<script setup>
    import {ref} from 'vue';
    let listVal=ref([]);
    let name=ref('');
 function addToDoList(){
    listVal.value.push(name.value); 
    name.value='';
}
function keyinput(){
    let todo=name.value.trim();
    if(todo){
        addToDoList();
    }else{
        alert('输入代办事件错误');
    }


}
</script>

二、侦听器watch

侦听器watch通过监听对应属性的变化进行相应的操作

1.监听某个属性值的变化进行操作（name为第一个参数是我需要监听的属性，后边是一个箭头函数，其中第一个参数是新值，第二个参数是旧值）

<template>
    <div>
{{fullname}}
    </div>
</template>
<script setup>
import { reactive, ref, watch } from 'vue';
let name=reactive({
    firstname:'梨',
    lastname:'化'
});
let fullname=ref('李华');
watch(name,(newdata,lastdata)=>{
fullname.value=newdata.firstname+newdata.lastname;
});
watch
</script>

还可以监听表达式和监听数组元素；

三、特殊情况获取dom方法

vue3中并不推荐我们使用dom，但是一些情况下我们需要获取dom元素我们可以通过两种方法进行获取dom元素

1.通过ref属性，需要我们给dom元素ref属性绑定值，绑定的值是我们在下边定义的响应式变量，并且赋值为null，不能用reactive进行响应式数据绑定，因为reactive是赋值一个对象，null不是对象；

在下边通过input.value取到输入框

<template>
    <div>
        this is ref
        <input type="text" ref="input">
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';

let input=ref(null);
onMounted(()=>{
    console.log(input.value);
  input.value.focus();
});
</script>

2.通过组件实例来获取dom，前提还是给dom元素赋值ref属性，不同的是，这一种方法是通过取组件实例中的refs属性来取到dom元素，如下边代码

<template>
    <div>
        this is ref
        <input type="text" ref="input">
    </div>
</template>
<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue';

let input=ref(null);
onMounted(()=>{
    let com=getCurrentInstance();
    console.log(com.refs.input);
   
 
});
</script>