vue事件监听v-on及修饰符

167 阅读1分钟

事件监听v-on语法糖为@用于监听事件

例子:

<body> 

   <div id="app">

     <h2>{{counter}}</h2> 

     <button v-on:click="btn1">+</button>    //v-on写法

     <button @click="btn2">-</button>       //语法糖写法

     <button @click="btn3('123',$event)">-</button>

   </div> 

   <script> 

          const app =new Vue({ 

             el:'#app', 

              data:{ 

                     counter:0, 

                     message:'aaa', 

              }, 

            methods:{ 

                btn1(){ this.counter++ }, 

                 btn2(abc){ this.counter--, console.log('+++++',event)

                 btn3(abc,event){ this.counter--, console.log('+++++',event)

                } 

        }) 

 </script>

当methods的方法被v-on调用时候,如果方法没有参数,调用时候()可以省略如上btn1

如果方法含有参数,但是调用时候也没带()默认会把原生事件event参数传递进去如btn2

当需要event对象又需要有其他参数,在调用时用$event获取如btn3


v-on的修饰符

<button @click.stop="btn2">-</button>   //.stop用于停止冒泡(冒泡事件)

<button @click.prevent="btn2">-</button> //.prevent阻止默认行为

<button @click.enter="btn2">-</button>   //.keyCode当事件是从特定的键位触发才回调如此为当enter点击时候触发事件

<button @click.once="btn2">-</button> //once为只触发一次回调