Vue3是一个流行的JavaScript框架，用于构建交互式Web应用程序。在Vue3中，v-on和v-model是两个非常重要的指令，它们允许您向Vue应用程序添加交互性和响应性。
Vue3是一个流行的JavaScript框架，用于构建交互式Web应用程序。在Vue3中，v-on和v-model是两个非常重要的指令，它们允许您向Vue应用程序添加交互性和响应性。
v-on指令
v-on指令用于监听DOM事件，当事件被触发时，执行指定的方法。该指令可以添加到任何HTML元素上，例如按钮，文本框等。
语法格式如下：
<button v-on:click="methodName">Click me</button>在上面的例子中，v-on指令将监听按钮的点击事件，当按钮被点击时，methodName方法将被调用。
您也可以使用缩写语法来表示v-on指令。例如，您可以使用以下方式替换上面的示例：
<button @click="methodName">Click me</button>在这里，@click等同于v-on:click。
v-model指令
v-model指令用于在表单元素和Vue实例之间双向绑定数据。这意味着当表单元素的值更改时，Vue实例中的数据也会自动更新，反之亦然。 v-model指令可以应用于各种表单元素，如文本框，单选按钮，多选按钮等。
语法格式如下：
<input v-model="propertyName">在上面的例子中，v-model指令将输入框的值与Vue实例中的propertyName属性进行绑定。如果用户更改输入框的值，则Vue实例中的propertyName属性也将自动更新。
需要注意的是，v-model指令只适用于简单的表单元素。对于复杂的表单元素，例如多选框和复选框，您需要使用v-bind指令和v-on指令来手动实现双向绑定。
总之，v-on指令用于监听DOM事件，v-model指令用于实现表单元素和Vue实例之间的双向绑定。使用这两个指令可以大大增强Vue应用程序的交互性和响应性。
实例
<template>
<div>
<p id="dom">{
{msg}}</p>
<!-- v-on:事件名="事件方法" 绑定事件 简写@:事件名="事件方法" -->
<button @click="handClick">Click</button>
<!-- model 双向绑定 -->
<input v-model="useName" placeholder="请输入姓名" type="text">
<!-- <input v-model="useName" placeholder="请输入姓名" type="text"> -->
<textarea placeholder="请输入建议" v-model="useInput" id="" cols="30" rows="10"></textarea>
<p>{
{useName}}----{
{useInput}}</p>
<button @click="submit">submit</button>
<!-- input 输入事件
blur：失去焦点
focus：获取焦点
change：内容更改
-->
<input type="text" @blur="blur" v-model="userPhone">
</div>
</template>
<script>
// @ is an alias to /src
import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue";
export default {
name: 'name',
setup() {
const data = reactive({
msg: '你好',
useName: '',
useInput: '',
userPhone: '',
})
// 数据渲染前
onBeforeMount(() => {
console.log('onBeforeMount', document.querySelector('#dom'));
})
// 数据渲染后
onMounted(() => {
console.log('onMount', document.querySelector('#dom'));
setTimeout(() => {
data.msg = 'xxxxxxx';
}, 2000)
})
// 数据更新前
onBeforeUpdate(() => {
console.log('onBeforeUpdate');
})
// 数据更新后
onUpdated(() => {
console.log('onUpdated');
})
const handClick = () => {
alert("你好");
}
const submit = () => {
alert(`${data.useName}的建议是${data.useInput}`);
}
const blur = () => {
let reg = /^[1][1,4,5,7,8][0-9]{9}$/;
if (data.userPhone === '') alert('手机号不能为空')
else if (!reg.test(data.userPhone)) {
alert('请正确输入手机号');
}
}
return {
...toRefs(data),
handClick,
submit,
blur,
}
},
}
</script>