Vue での v-on ディレクティブの単純なイベント バインディングの分析 (コード付き)

この記事では、Vue での v-on 命令の単純なイベント バインディングの分析を紹介します (コード付き)。これは非常に参考になるので、困っている友人の助けになれば幸いです。

前書き

JavaScript では、すべての DOM 要素に独自のイベント オブジェクトがあり、イベント オブジェクトは、イベントが発生した要素、キーボードのキーのステータス、マウスの位置などのイベントのステータスを表します。 、およびマウスボタンの待機状態。イベントは、イベントが発生するまで実行されない関数と組み合わせて使用​​されることがよくあります。 JavaScript の一般的なイベント ハンドラー (イベント ハンドラー) には主に以下が含まれます:

属性名	説明(イベントの発生時期に対応)
onabort	画像の読み込みが中断されました
onchange	の内容ドメインの変更でした
ondblclick	ユーザーがオブジェクトをダブルクリックしたときに呼び出されるイベントハンドラー
onfocus	要素がフォーカスを取得します
onkeypress	キーボードのキーが押されて、リリースされました
onload	ページまたは画像がロードされました
onmousemove	マウスが移動されました
onmouseover	マウスが要素の上に移動しました
onreset	リセットボタンクリックされました
onselect	テキストが選択されました
onunload	ユーザーがページを終了します
onblur	要素はフォーカスを失います
onclick	ユーザーがクリックしたときに呼び出されるイベントハンドラーオブジェクト上で
onerror	ドキュメントまたは画像のロード中にエラーが発生しました
onkeydown	キーボードのキーが押されました
onkeyup	キーボードのキーが離されました
onmo使い捨て	マウスボタンが押されました
onmouseout	を押しました 要素からマウスを移動しました
onmouseup	マウスボタンが放されました
onsubmit	送信ボタンがクリックされました
サイズ変更時	ウィンドウまたはフレームのサイズ変更

v-on 命令

機能: DOM イベントをリッスンし、トリガーされたときに JavaScript コードを実行します。

使用法: v-on によってバインドされるイベント関数は通常、メソッド オブジェクトに記述されます。使用手順は次のとおりです: 1. イベント バインディング、2. イベント実装、3. イベント トリガー。

パラメーターなしの v-on 命令のクリック イベント バインディング:

完全なコードは次のとおりです:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  v-on:click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
    export default {
        name: &#39;v-on&#39;,
      data() {
          return {
            msg: &#39;点击我&#39;,
            title: &#39;v-on指令学习&#39;
          }
      },
      methods:{
        clickme:function(){
          alert("hello");
    }
      }
    }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

短縮コードは次のとおりです:

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(){
        alert("hello");
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

結果の例は次のとおりです

v-on 命令には、クリック イベント バインディング形式のパラメーターがあります。実際の状況に応じてパラメーターの数と形式を渡すことができます。簡単なコード例は次のとおりです。

<template>
  <div>
    <p class="title1">{{title}}</p>
    <div class="div1">
      <button  @click="clickme(&#39;我是中文参数&#39;,&#39;woshiyingwencanshu&#39;,$event)" >{{msg}}</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: &#39;v-on&#39;,
    data() {
      return {
        msg: &#39;点击我&#39;,
        title: &#39;v-on指令学习&#39;
      }
    },
    methods:{
      clickme(msg1,msg2,event){
       console.log(msg1);
       console.log(msg2);
       console.log(event);
      }
    }
  }
</script>

<style scoped>
  .title1 {
    text-align: left;
  }
  .div1{
    float: left;
  }
</style>

結果の例は次のとおりです

。

概要: v-on は多くの JavaScript イベントをバインドできます。この記事では、クリックのみを使用します。例としてクリック イベントを取り上げます。

関連する推奨事項:

Vue での条件付きレンダリングの分析 (コード付き)

Vue での v-model ディレクティブの分析 (コード付き)

以上がVue での v-on ディレクティブの単純なイベント バインディングの分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。