イベント処理
-
イベントを監視します
あなたはできる v-on
DOMイベントコマンドをリッスンし、トリガされたとき、一部のJavaScriptコードを実行します。
<DIV ID = " BOX1 " > <ボタンVオン:クリック= " カウンタ+ = 1 " >追加1 </ボタン> <P>のボタンがクリックされた上記の{{カウンタ}}回</ P>。 < / DIV>
< スクリプト> のvar practice1 = 新しいヴュー({ EL:' #1 BOX1 ' 、 データ:{ カウンタ:0 } }) </ スクリプト>
-
イベントハンドラメソッド
しかし、多くのイベント処理ロジックが複雑であるため、内のJavaScriptコードに直接書き込む v-on
命令することは現実的ではありません。そう v-on
とも呼ばれる必要があるメソッドの名前を受け取ることができます。
< 本部ID = "BOX2" > <! - `Greet`は、メソッド名に以下に定義される- > < ボタンV-ON:クリック= "挨拶" >グリート</ ボタン> </ DIV >
例2新しい新しいヴュー= VAR({
EL: '#の例2'、
データ:{
名: 'Vue.js'
}、
//オブジェクト`methods`で定義されたメソッド
のメソッド:{
挨拶は:機能(イベント){
//このときの過程で`this`ポイントVueの
アラート( 'こんにちは' this.name + + '!')
//` event`ネイティブDOMイベント
(イベント){IF
アラート(event.target.tagName)
}
}
}
} )
JavaScriptのメソッドの中で直接呼び出すことができます//
example2.greet()// => 'こんにちは Vue.js!'