v-on元素绑定事件

v-on

为元素绑定事件，@简写，绑定的方法在methods属性中

• 参数传递问题

  1、如果函数需要参数，但是没有传入dolt()，函数的形参为undefined;

  @click='dolt()
  methods:{dolt(num){
      console.log(num)}//undefined

  2、如果函数需要参数，但省略了()，写为dolt，Vue会默认将浏览器生成的event事件(鼠标事件的数据)作为参数传入到方法

@click='dolt'
methods:{dolt(num){
    console.log(num)}
//MouseEvent {isTrusted: true, screenX: 810, screenY: 187, clientX: 60, clientY: 57, …}  //鼠标event事件

3、如果函数需要多个参数，同时需要获取event对象，dolt(123，$event)，加$符号

@click='dolt(123,$event)
 methods:{dolt(num,event){
    console.log(num,event);}
//123 
//MouseEvent {isTrusted: true, screenX: 768, screenY: 188, clientX: 56, clientY: 56, …}

• 修饰符的使用

  1、.stop阻止冒泡

   <div @click="dolt1">111111
      <button @click.stop='dolt'> 按钮</button>  //阻止冒泡
   </div>
  methods:{ dolt1(){ console.log("XXX")},
            dolt(){console.log("123");}  //点击按钮：123 //无stop 点击按钮：XXX 123

  2、.prevent阻止默认事件

  <input type="submit" @click.prevent='submitclick'>//阻止点击后默认提交表单

  3、监听某个键盘键帽的点击

  <input type="text" @keyup.enter='keyup'>  //监听enter键

  4、.once

  <button @click.once='dolt'> 按钮</button>    //点击一次后失效,不再执行