vue 第五天 事件详解

1、简单事件绑定v-on

<button v-on:click="handleClick">点击</button>

methods: {
    handleClick: function(){
        alert('你点击了按钮');
    }
}

2、内联方式，可以用来传递参数

<button v-on:click="handleClick('孙悟空', '猪八戒')">点击</button>

methods: {
    handleClick: function(arg1, arg2){
        alert(arg1 + ', ' + arg2);
    }
}

 

还可以传递原生event对象，可使用特殊参数$event，参数位置随意

<button v-on:click="handleClick($event, '孙悟空', '猪八戒')">点击</button>

handleClick: function(event, arg1, arg2){
    // alert(arg1 + ', ' + arg2);
    alert(event.target.innerHTML)
}

3、事件修饰符

• stop 阻止事件继续传播
• prevent 阻止标签的默认时间，如表单的提交、重置等 
• capture 使用事件的捕获模式，先触发当前标签的事件，再按原有顺序执行事件（默认顺序从内部元素往外部元素触发）
• self 只有事件的target为当前标签时才触发
• once 只触发一次
• passive 允许默认事件触发。默认事件本身就是允许的，但是浏览器每次触发默认事件前都需要查阅是否有preventDefault函数来阻止默认事件的触发，这样就会导致频繁触发的事件容易造成卡顿，如滚动条的滚动，手机的滑动等，如果设置了passive就相当于告诉浏览器，别去查阅了，直接触发吧，这样就会更加的流畅。