Event Vue command of the modifier

Event modifier:

+ .Stop stop bubbling

+ .Prevent prevent the default event

+ Use event capture mode .capture add event listeners

+ .Self only trigger a callback when the event occurs in the element itself (for example, not a child element)

+ .Once event fires only once

 

.stop stop bubbling

    <-! STOP to stop bubbling   -> 
    <! - When you click the button event is executed first btnHandle event, in the implementation of divHandler event -> 
    < div class = "Box" @click = "divHandler" > 
        < ! - <the INPUT of the type = "the Button" value = "poke him" @ click.stop = "btnHandler"> stop the event bubbling -> 
        < the INPUT of the type = "the Button" value = "poke him" @click = " btnHandler " > 
    </ div > 


    < Script the src =" ./ lib / VUE-2.4.0.js " > </ Script > 
    <script>
    
        var vm=newVUE ({ 
            EL: ' .box ' , 
            Data: { 

            }, 
            Methods: { 
                divHandler () { 
                    Alert ( ' triggered event divHandler ' ); 
                }, 
                btnHandler () { 
                    Alert ( ' triggered event btnHandler ' ); 
                } 
            } 
        });

 

 

.prevent prevent the default behavior

 <-! .Prevent prevent the default behavior -> 
    <! - When you click a problem to Baidu, when triggered linkHandler event, but also directly to the Baidu -> 
    <! - <A href = "HTTP: //www.baidu.com "@ click.prevent = 'linkHandler' > have a problem to Baidu! </a> stop to open Baidu behavior -> 
    < div class = "Box" @click = "divHandler" > 
        < the INPUT of the type = "the Button" value = "poke him" @click = "btnHandler" > 
        < A href = "http://www.baidu.com" @ click.prevent = 'linkHandler' > have a problem to Baidu! <
     
    
    Script the src = "./ lib / VUE-2.4.0.js"  > </ Script > 
    < Script > 
    
        var VM = new new Vue ({ 
            EL: ' .box ' , 
            Data: { 

            }, 
            Methods: { 
                divHandler () { 
                    Alert ( ' triggered event divHandler ' ); 
                }, 
                btnHandler () { 
                    Alert ( ' triggered event btnHandler ' ); 
                }, 
                the linkHandler () {
                    Alert ( "LinkHandler triggered events " ); 
                } 

            } 
        });

 

.Capture achieve capture mechanism triggering event

　　

 <-! .Capture achieve capture mechanism triggering event -> 
    <! - click on the btn button triggers btnHandler event, triggering divHandler event, achieved using the capture events from outside to inside -> 
    <! - <div class = "box" @ click.capture = "divHandler"> achieve first divHandler in btnHandler -> 
         < div class = "Box" @ click.capture = "divHandler" > 

        < the INPUT of the type = "the Button" value = "poke him " @click =" btnHandler " > 
        < A the href =" http://www.baidu.com " @click = 'the linkHandler' > in question to Baidu! <
     
    
    < Script the src = "./ lib / VUE-2.4.0.js"  > </ Script > 
    < Script > 
    
        var VM = new new Vue ({ 
            EL: ' .box ' , 
            Data: { 

            }, 
            Methods: { 
                divHandler () { 
                    Alert ( ' triggered event divHandler ' ); 
                }, 
                btnHandler () { 
                    Alert ( ' triggered event btnHandler ' ); 
                },
                linkHandler () { 
                    Alert (" Triggered linkHandler event " ); 
                } 

            } 
        }); 
    </ Script >

 

 

.self achieved only click on the current element time, it will trigger an event handler

.self only prevents the trigger himself bubble behavior, not really prevent bubbling behavior

　　

<div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> 

<script>
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler () { 
          console.log ( ' This is the inner div trigger a click event ' ) 
        }, 
        btnHandler () { 
          console.log ( ' This is triggered btn button click event ' ) 
        }, 
        linkClick () { 
          Console. log ( ' triggered connected click event ' ) 
        }, 
        div2Handler () { 
          the console.log ( ' which is triggered outer div click event ' ) 
        } 
      } 
    }); 
  </ Script >

 .once only trigger an event handler

　　

< A the href = "http://www.baidu.com" @ click.prevent.once = "linkClick" > problem, go Baidu </ A > 


< Script > 
    // Create Vue instance, to give the ViewModel 
    var VM =  new new Vue ({ 
      EL: ' #app ' , 
      the Data: {}, 
      Methods: { 
        div1Handler () { 
          console.log ( ' this is the inner div trigger a click event ' ) 
        }, 
        btnHandler () { 
          console.log ( ' this is the trigger button click event btn ')
        }, 
        LinkClick () { 
          console.log ( ' triggered the click event connected ' ) 
        }, 
        div2Handler () { 
          console.log ( ' This is triggered outer div click event ' ) 
        } 
      } 
    });