Vue 事件处理

  1. 绑定监听:
    v-on:xxx="fun"
    @xxx="fun"
    @xxx="fun(参数)"
    默认事件形参: event
    隐含属性对象: $event
  2. 事件修饰符:
    .prevent : 阻止事件的默认行为 event.preventDefault()
    .stop : 停止事件冒泡 event.stopPropagation()
  3. 按键修饰符
    .keycode : 操作的是某个keycode值的健
    .enter : 操作的是enter键
HTML:

1. 绑定监听

2. 事件修饰符

去百度

3. 按键修饰符

new Vue({
        el: '#example',
        data: {
            test1(){
                alert('test1');
            },
            test2(msg){
                alert(msg);
            },
            test3(event){
                alert(event.target.innerHTML);
            },
            test4(number, event){
                alert(number + '---' + event.target.innerHTML);
            },
            test5(){
                alert('out');
            },
            test6(){
                alert('inner');
            },
            test7(){
                alert('点击了');
            },
            test8(event){
                // if(event.keyCode === 13){
                    alert(event.target.value + ',' + event.keyCode);
                // }
            }
        }
    })

你可能感兴趣的:(Vue 事件处理)