V-上の基本的な使い方

バインドイベントリスナー。イベントタイプは、パラメータで指定されています。もし修飾子が省略できない場合、式は、メソッドの名前またはインライン文にすることができます。

通常の要素で使用された場合、それだけで監視できるネイティブDOMイベントをカスタム要素のアセンブリで使用する場合、あなたはまた、サブアセンブリによってトリガカスタムイベントを聞くことができます。

例:

<! - プロセッサ- > 
< ボタンV-ON:クリック= "doThis" > </ ボタン> 

<! - ダイナミックイベント(2.6.0+)- > 
< ボタンV-ON:[イベント] = "doThis" > </ ボタン> 

<! - 頭文字- > 
< ボタン@click = "doThis" > </ ボタン> 

<! - ダイナミックイベントの略語(2.6.0+)- > 
< ボタン@ [イベント] = "doThis" > </ ボタン>

 

V-上のパス値

ケース1:メソッドの方法は、値によってパラメータを持っています

< ボタン@click = "MSG( 'LHS')" >传值</ ボタン> 

方法:{ 
    MSG(イベント){ 
        にconsole.log(イベント); //输出的LHS 
    } 
}

注: @ =アポストロフィでクリックし、「MSG( 『LHSは』)」内のデータパラメータなしで渡す、値によって渡す必要があります

ケース2:メソッドのパラメータはメソッドですが、ない伝統的な価値観

< ボタン@click = "MSG" >伝統的な値</ ボタン> 

方法:{ 
    MSG(イベント){ 
        にconsole.log(イベント); //イベントを出力
    } 
}

それが返される(イベントのイベントが発生するなどのイベントを表すステータスイベントオブジェクト状態の要素の位置、キーボードの状態、マウス、マウスボタン

ケース3:メソッドメソッドは、パラメータを持っているだけでなく、値イベントによって

< ボタン@click = "MSG( 'LHS'、$イベント)" >传值</ ボタン> 

メソッド:{ 
    MSG(名前、イベント){ 
        はconsole.log(naem); // LHS 
        にconsole.log(イベント)。 //イベント
    } 
}

 

V-上のイベント修飾子

(1)停止:停止バブリング

< DIV @click = "upthis" > 
    AAA 
    <! - 阻止事件冒泡- > 
    < V-上:click.stop = "doThis" > </ A > </ DIV >

(2)予防:デフォルトの動作を妨げます

< フォームアクション= 'Baiduの' > 
    <! - ページをジャンプしない)事件がページをリロードしません提出する- > 
    < INPUT @ click.prevent = "dothat" > 
</ フォーム>

(3)捕捉

<! - 使用イベントリスナーイベントキャプチャモードを追加- > 
<! - それは内部処理要素に引き渡さ前に、そのイベントが、このプロセスの最初の内部素子をトリガ- > 
< divのV-ON:]をクリックします。キャプチャ= "doThis" > ... </ DIV >

(4)一度:のみトリガー回

<! - イベントをクリックしますのみ、重複送信を防ぐために一度トリガ- > 
< V-ON:click.once = "doThis" > </ A >

(5)は、キーボードのキーキャップを監視します

<! - キー修飾キーのエイリアス- > 
< INPUT @ keyup.enter = "フォーカス取得時" > 

<! - キーモディファイア、キーコード- > 
< INPUT @ keyup.13 = "フォーカス取得時" >

(6)は、直列改質に接続することができます。

<! - シリーズで修飾- > 
< A V-ON:click.stop.prevent = "dothat" > </ A >

おすすめ

転載: www.cnblogs.com/bushui/p/12207926.html