修飾子のイベントVueのコマンド

イベント修飾子：

+ .Stopストップバブリング

+ .Preventデフォルトのイベントを防ぎます

+を使用するイベントのキャプチャモードは、イベントリスナーを追加し.capture

イベントは、要素自体に発生した場合+ .Selfのみコールバックをトリガー（例えば、ない子要素）

+ .Onceイベントが発生し、一度だけ

 

バブリングを停止.stop

    <！ - STOPはバブリングを停止する   - > 
    <！ - divHandlerイベントの実装では、最初のbtnHandleイベントが実行されますが、ボタンのイベントをクリックする- > 
    < divのクラス= "ボックス" @click = "divHandler" > 
        < ！ - <タイプのINPUTは=「ボタン」値= @ click.stop =「btnHandler」「彼突く」>イベントのバブリングを停止- > 
        < INPUT タイプの=「ボタン」値=「彼を突く」@click = " btnHandler " > 
    </ divの> 


    < スクリプトSRC =" ./ libに/ VUE-2.4.0.js " > </ スクリプト> 
    <スクリプト> 
    
        のvar VM = 新しいですVUE（{ 
            EL：' ■は' 、
            データ：{ 

            }、
            メソッド：{ 
                divHandler（）{ 
                    アラート（' トリガイベントdivHandler ' ）; 
                }、
                btnHandler（）{ 
                    アラート（' トリガイベントbtnHandler ' ）; 
                } 
            } 
        }）;

 

 

デフォルトの動作を妨げる.prevent

 <！ - .Preventは、デフォルトの動作を妨げる- > 
    <！ - あなたは百度に問題をクリックすると、トリガーあるlinkHandlerイベントが、また、直接のBaiduへ- > 
    <！ - <のhref =「HTTP： //www.baidu.com「click.prevent = 'あるlinkHandler' @は > Baiduのに問題を抱えています！</a>のBaiduの行動を開くために停止- > 
    < divのクラス= "ボックス" @click = "divHandlerは" > 
        < INPUT タイプのは= "ボタン" 値= "彼を突く" @click = "btnHandler" > 
        < HREF = "http://www.baidu.com" click.prevent @ = 'あるlinkHandler' > Baiduのに問題を抱えています！<
     
    
    スクリプトSRC = "./ libに/ VUE-2.4.0.js"  > </ スクリプト> 
    < スクリプト> 
    
        VAR VM = 新しい新しいヴュー（{ 
            EL：' ■は' 、
            データ：{ 

            }、
            メソッド：{ 
                divHandler（）{ 
                    アラート（' トリガーイベントdivHandler ' ）; 
                }、
                btnHandler（）{ 
                    アラート（' トリガイベントbtnHandler ' ）; 
                }、
                あるlinkHandler（）{
                    アラート（"あるlinkHandlerは、イベントをトリガしました" ）; 
                } 

            } 
        }）。

 

イベントをトリガ捕捉機構を達成.Capture

　　

 <！ - .Captureイベントをトリガ捕捉機構を実現する- > 
    <！ - クリックBTNボタン上btnHandlerイベントをトリガし、divHandlerイベントをトリガ、外部から内部へのキャプチャ・イベントを使用して達成- > 
    <！ - <DIV click.capture = @クラス= "ボックス" "divHandler"> btnHandlerの最初のdivHandlerを実現> - 
         < divのクラス= "ボックス" click.capture @ = "divHandler" > 

        < INPUT タイプのは= "ボタン" 値=「彼を突きます" @click =" btnHandler " > 
        < HREF =" http://www.baidu.com " @click = 'あるlinkHandler' >百度への質問で！<
     
    
    < スクリプトSRC = "./ libに/ VUE-2.4.0.js"  > </ スクリプト> 
    < スクリプト> 
    
        VAR VM = 新しい新しいヴュー（{ 
            EL：' ■は' 、
            データ：{ 

            }、
            メソッド：{ 
                divHandler（） { 
                    アラート（' トリガイベントdivHandler ' ）; 
                }、
                btnHandler（）{ 
                    アラート（' トリガイベントbtnHandler ' ）; 
                }
                あるlinkHandler（）{ 
                    アラート（" トリガーあるlinkHandlerイベント" ）; 
                } 

            } 
        }）; 
    </ スクリプト>

 

 

.selfは、現在の要素の時間のみをクリックし、それはイベント・ハンドラをトリガします達成しました

.selfは本当に泡立ちの振る舞いを防ぐことはできません、トリガー自身の気泡の挙動を防ぎます

　　

< DIV クラス= "外側" @click = "div2Handler" > 
      < DIV クラス= "内側" @ click.self = "div1Handler" > 
        < 入力タイプ= "ボタン" 値= "戳他" @click = "btnHandler" > 
      </ DIV > 
    </ DIV >  

< スクリプト> 
    // 创建Vueの实例、得到ViewModelに
    VAR VM =  新しいヴュー（{ 
      エル：' #app ' 、
      データ：{}、 
      メソッド：{
        div1Handler（）{
          console.log（' これは、内側のdivトリガークリックイベントである' ）
        }、
        btnHandler（）{ 
          にconsole.log（' これは、ボタンクリックイベントBTNトリガされる' ）
        }、
        linkClick（）{ 
          にconsole.log（' トリガクリックイベントの接続' ）
        }、
        div2Handler（）{ 
          にconsole.log（' 外側のdivクリックイベントをトリガされる' ）
        } 
      } 
    }）; 
  </ スクリプト>

 .onceはイベント・ハンドラをトリガ

　　

< HREF = "http://www.baidu.com" @ click.prevent.once = "linkClick" >問題は、行くBaiduの</ A > < スクリプト> // のViewModel与えることを、Vueのインスタンスを作成するvar VMを= 新しい新しいヴュー（{ 
      EL：' #app ' 、
      データ：{}、
      メソッド：{ 
        div1Handler（）{ 
          はconsole.log（' これは、内側のdivトリガクリックイベントである' ）
        }、
        btnHandler（）{ 
          はconsole.log（" これは、トリガーボタンのクリックイベントのBTNです"）



    
     
        }、
        LinkClick（）{ 
          にconsole.log（' 接続クリックイベントトリガ' ）
        }、
        div2Handler（）{ 
          にconsole.log（' このトリガーされ、外側のdivクリックイベントを' ）
        } 
      } 
    }）。