@click Vue, the event modifier @ click.stop and @ click.prevent, modifier keys @ keyup.enter

1, binding listen @click:

(Click to listen, for example, others such as keyup, similar usage) v-ON: click = "Fun"
  @ click = "Fun"
  @ click = "Fun (parameters)"

  <Button @ the Click = " test1 " > test1 </ Button> 
  <Button @ the Click = " test2 ( 'ABC') " > test2 </ Button> 
  <Button @ the Click = " Test3 ( 'ABCD', $ Event) " > Test3 </ Button> 
 
  Methods: { 
      test1 (Eve) { // test1 has no parameters, the default delivery Event $ 
        Alert (eve.target.innerHTML)   // test1 
      }, 
      test2 (MSG) { // test1 function has parameters passed this parameter 
        Alert (MSG)   // ABC 
      }, 
      Test3 (MSG,Event ) { // There are parameters, if you want to get to enevt, you need to write a function in $ event
        alert(msg+'---'+event.target.textContent)  // abcd---test3
      }
   }

 

2, @ click.stop with @ click.prevent

@ Click.stop prevent the event from bubbling

< Div the above mentioned id = "App" > 
        < div v-ON: the Click = "Dodo" > 
            < the Button v-ON: the Click = "doThis" > stop the click event continues to spread </ the Button > 
        </ div > 
</ div > 

    < Script > 
        var App =  new new Vue ({ 
            EL: " #app " , 
            Data: { 
                name: " Vue.js " 
            }, 
            Methods:{
                doThis: function () { 
                    Alert ( " noclick " ); 
                }, 
                Dodo: function () { 
                    Alert ( " Dodo " ); 
                } 
            } 
        }); 
    </ Script > 
// will first pop up "noclick", then pop-up "dodo" .

< Div the above mentioned id = "App" > 
        < div v-ON: the Click = "Dodo" > 
            < the Button v-ON: click.stop = "doThis" > stop the click event continues to spread </ the Button > 
        </ div > 
    </ div > 

    < Script > 
        var App =  new new Vue ({ 
            EL: " #app " , 
            Data: { 
                name: " Vue.js " 
            },  
            Methods:{
                the doThis:function() { 
                    Alert ( " noclick " ); 
                }, 
                Dodo: function () { 
                    Alert ( " Dodo " ); 
                } 
            } 
        }); 
    </ Script > 
// only pop "noclick"

 

@ Click.prevent prevent the default behavior of the event,

< A href = "http://www.baidu.com" @ click.prevent = "Test4" > Baidu, </ a >    // prevent a tag jump is performed only function Test4 

< form   Action = "/ xxx"    submit.prevent @ = "test5" >    // prevent form submission, only to perform functions test5 

         < the INPUT of the type = "the submit" value = "registered" > 
</ form >

 

3, modifier keys

@keyup.enter

//按下enter时，执行方法test7

<input type="text" @keyup.enter="test7">

methods: {

      test7 (event) {
        console.log(event.keyCode)
        alert(event.target.value)
      }

}