Vue3 は、インタラクティブな Web アプリケーションを構築するための人気のある JavaScript フレームワークです。Vue3 では、v-onとはv-modelVue アプリケーションに対話性と応答性を追加できる 2 つの非常に重要なディレクティブです。

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 インスタンス間の双方向バインディングを実装するために使用されます。これら 2 つのディレクティブを使用すると、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>

Vue3イベントバインディング

v-on ディレクティブ

v-model ディレクティブ

例

おすすめ