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>