(それでも011)Vueのイベント処理

 

 test011.html

<!DOCTYPE HTML> 
<HTML LANG = "EN">
<HEAD>
<METAのcharset = "UTF-8">
<タイトル>イベント</ TITLE>
</ HEAD>
<BODY>
<divの上記のid = "例"以上>
< 。</ H2>結合H2> 1つのリスニング
<クリックしてボタンを@ = "TEST1"> test1の</ button>の
<ボタン@ =クリックして"TEST2( 'eightone')"> TEST2 </ボタン>
<! -ボタン与えることテキスト- >
<! -イベントオブジェクトの$イベント代わっパラメータを渡すことはありません、実際のアップロードイベント- >
<ボタン=「Test3は」をクリックしてください@> Test3は</ボタン>
<! -自分の指定したパラメータ- - >
<ボタン@ =をクリックして"TEST4(123、$イベント)"> TEST4 </ボタン>

<H2>イベント修飾子2 </ H2>。
<! -ネストされた2つのdivが問題、というイベントバブリングされます場合は(ある、ボックスの内側とボックスの外側トリガーを持つことになりますボックスの上部をクリックしてそのコンテンツポップアップ表示) - >
<divのスタイル=「幅:200pxの;高さ:200pxの;背景:赤TEST5「> "をクリックして= @"
< -クリックして@!.stop停止イベントバブリング- >
<divのスタイル= "幅:100ピクセル、高さ100ピクセル;背景色:ブルー" @ click.stop = "TEST6"> </ div>
</ div>

< -デフォルトのイベント!行動- >
<! -クリック@ .prevent停止イベントにデフォルトの動作を- >
<a href="http://www.baidu.com" @click.prevent="test7"> Baiduの</a>にします

<H2> 3修飾キー</ H2>。
<! -プレストリガーボタンを持ち上げたときに、プロンプトが表示され入力します- >
<! - @ keyup.enter、プレスはキーがトリガーを入力し、いないすべてのキーは、名前を直接書き込むことができることに注意してください- >
種類の<INPUT = "テキスト" @keyup 0.13 = "TEST8">
種類の<INPUT = "テキスト" @keyup .enter = "TEST8">

</ div>

<スクリプトタイプ=「テキスト/ javascriptの」
ます。<script type =" text / javascriptの">
新しいヴュー({
エル: '#の例'
データ:{
TEST1(){
アラート( 'TEST1')
}、
TEST2(MSG){
アラート(MSG)
}
//パラメータが指定されていない、自動的に送信するイベント
Test3は(イベント){
アラート(event.target.innerHTML)
} 、
//指定されたパラメータ123
TEST4(番号、イベント){

アラート(番号+ '---' + event.target.innerHTML)
}、
TEST5(){
アラート( 'OUT')
}
//ストップイベントに必要バブリング
TEST6 (){
//そのするevent.stopPropagation()の前に書かれた
アラート( 'インナー')
}、
//私は過去のイベントのデフォルト動作を防ぐためにしたくない
TEST7(){
// event.preventDefaultを書き込む前に()
アラート( 'クリック!')
}、
TEST8(イベント){
/ * IF(event.keyCode 13 === ){
//のkeyCodeにキーボード相当上の各キー
アラート(event.target.value + '' + event.keyCode)
} * /
アラート(event.target.value + '' + event.keyCode)
}
}
})
< /スクリプト>
</ BODY>
</ HTML>

おすすめ

転載: www.cnblogs.com/curedfisher/p/12018197.html