この記事では、vuejs のイベント処理について紹介します。
Vuejs は、v:on
というディレクティブを提供します。これは、dom
イベントを登録してリッスンするのに役立ちます。これにより、イベントがトリガーされるたびに、メソッドがイベントに渡されたものが呼び出されます。
<strong>v:on</strong>
ディレクティブの構文
<!-- v:on:eventname="methodname" --> <button v:on:click="handleClick">Click</button>
上記のコードでは、## をリッスンします。 button #click イベントを使用して、ユーザーがボタンをクリックするたびに
handleClick メソッドを呼び出します。
<template> <div> <h1>{{num}}</h1> <button v-on:click="increment">Increment</button> </div> </template> <script> export default{ data:function(){ return{ num:0 } }, methods:{ increment:function(){ this.num=this.num+1 } } } </script>
イベント ハンドラーにパラメーターを渡す方法
イベント ハンドラー メソッドがパラメーターを受け入れることもできる場合があります。<template> <div> <h1>{{num}}</h1> <!-- 参数10被传递给increment方法--> <button v-on:click="increment(10)">Increment By 10</button> </div> </template> <script> export default{ data:function(){ return{ num:0 } }, methods:{ //参数`value` increment:function(value){ this.num =this.num+value } } } </script>
increment メソッドを作成し、パラメータを
increment(10) メソッドに渡します。
デフォルトのイベント オブジェクトにアクセスする方法は?
メソッド vuejs でデフォルトのイベント オブジェクトにアクセスするには、$event という名前の変数を指定する必要があります。<template> <!-- 我们正在传递一个$event变量 --> <input placeholder="name" v-on:onchange="handleChange($event)" /> </template> <script> export default{ methods:{ handleChange:function($event){ console.log($event.target.value) } } } </script>
<template> <!-- 我们传递参数加上$event变量 --> <button v-on:click="hitMe('You hitted me',$event)"> Hit me Hard </button> </template> <script> export default{ methods:{ handleChange:function(message,$event){ $event.preventDefault() console.log(message) } } } </script>
短縮構文
vuejs は、dom イベントをリッスンするための短縮構文も提供します。
<!--简写语法@eventname="method"--> <button @click="handleClick"></button> <!-- 长语法 --> <button v-on:click="handleClick"></button>
以上がVue.JS イベント処理のチュートリアルとコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。