一、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>