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

不言

リリース： 2018-07-27 13:21:00

オリジナル

3411 人が閲覧しました

この記事では、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>

ログイン後にコピー

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