六.vue基础-事件处理

文章目录

六.vue基础-事件处理

一.监听事件
二.事件处理方法
三.内联处理器中的方法
四.事件修饰符
五.按键修饰符
六.系统修饰键
七.鼠标按钮修饰符

六.vue基础-事件处理

一.监听事件

可以用v-on指令监听DOM事件, 并在触发时运行一些JavaScript代码.

<div id="example_1">
    <button v-on:click="counter += 1">
        Add 1
    </button>
    <p>
        The button above has been clicked {{counter}} times.
    </p>
</div>

var example = new Vue({
    el: "#example_1",
    data: {
        counter:0
    }
})

每次点击按钮,counter数字增加1

二.事件处理方法

很多事件处理逻辑会更为复杂, 所以直接把JavaScript代码写在v-on指令中是不可行的. 因此v-on 还可以接收一个需要调用的方法名称.

<div id="example_2">
    <!-- "greet" 是在下面定义的方法名-->
    <button v-on:click="greet">
        Greet
    </button>
</div>

var example2 = new Vue({
    el: '#example_2',
    data: {
        name: 'Vue.js'
    },
    //在methods对象中定义方法 methods:方法
    methods:{
        greet: function(event){
            //this在方法里指向当前Vue实例
            alert('Hello' + this.name + "!");
            if(event){
                //event.target是当前元素自身触发处理函数
                alert(event.target.tagName);
            }
        }
    }
})

//也可以用 JavaScript 直接调用方法
example2.greet() // "Hello Vue.js!"

三.内联处理器中的方法

除了直接绑定到一个方法, 也可以在内联JavaScript语句中调用方法:

<div id="example_3">
    <button v-on:click="say('hi')">
        Say hi
    </button>
    <button v-on:click="say('what')">
        Say what
    </button>
</div>

new Vue({
    el:'#example_3',
    methods: {
        say: function(message){
            alert(message);
        }
    }
})

有时也需要在内联语句处理器中访问原始的DOM事件. 可以用特殊变量$event把它传入方法:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
    Submit
</button>

methods: {
    warn: function(message, event){
        //现在我们可以访问原生事件对象 preventDefault:阻止原本作用
        if(event) event.preventDefault()
        alert(message);
    }
}

四.事件修饰符

(1).用来对当前绑定的事件的补充说明. 修饰符是由点开头的指令后缀来表示的.

.stop: 阻止事件冒泡
.prevent: 阻止默认事件
.capture: 阻止事件捕获
.self: 只作用于自身
.once: 只执行一次

.passive: 会执行默认事件

<!-- 1.阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 2.提交事件不再重载页面-->
<form v-on:submint.prevent="onSubmit"></form>

<!-- 3.修饰符可以串联-->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 4.只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 5.添加事件监听时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理, 然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">
    ...
</div>
<!-- 只当在event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">
    ...
</div>

使用修饰符时, 顺序很重要; 相应的代码会以同样的顺序产生. 因此, 用v-on:click.prevent.self会阻止所有的点击,而v-on: click.self.prevent只会阻止对元素自身的点击

(2).once

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

不像其它只能对原生的DOM事件起作用的修饰符, .once修饰符还能被用到自定义的组件事件上.

(3)passive

Boolean, 如果true表示所指定的函数listener将永远不会调用preventDefault(). 如果被动侦听器确实进行了调用preventDefault(), 则用户代理将不执行任何操作, 只生成控制台警告.

<!-- 滚动事件的默认行为(即滚动行为)将会立即触发 -->
<!-- 而不会等待onScroll完成 -->
<!-- 这其中包含event.preventDefault()的情况 -->
<div v-on:scroll.passive="onScroll">
    ...
</div>

这个.passive修饰符尤其能够提升移动端的性能

不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

五.按键修饰符

在监听键盘事件时, 我们经常需要检查常见的键值. Vue允许为v-on在监听键盘事件时按下按键修饰符.
```

<input v-on:keyup.13="submit">
```
记住所有的keyCode比较困难, 所以Vue为最常见的按键提供了别名
- .enter
- .tab
- .delete
- .esc
- .space
- .up
- .down
- .left
- .right

可以通过全局config.keyCodes对象自定义按键修饰符别名.

//keyCode 113 = F2
<input  type="text" @keyup.113 = "事件名">
    
    
//可以使用 `v-on:keyup.f2`, 给113一个别名
Vue.config.keyCodes.f2 = 113;
//在HTML中使用f2
<input type="text" @keyup.f2 = "事件名">

六.系统修饰键

可以用如下修饰符来实现仅在按下相应键时才能触发鼠标或键盘事件的监听器.
- .ctrl
- .alt
- .shift
- .meta: 在Windows系统键盘meta对应Windows徽标键. 在sun操作系统键盘上, meta对应实心宝石键.

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="daSomething">
    Do somethinbg
</div>

注意: 修饰键与常规按键不同, 在和keyup事件一起用时, 事件触发时修饰键必须处于按下状态. 只有在按住ctrl的情况下释放其他按键, 才能出发keyup.ctrl. 而单单释放ctrl也不会触发事件.

.exact修饰符

允许控制由准确的系统修饰符组合触发的事件.

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">
    A
</button>

<!-- 有且只有Ctrl被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">
    A
</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">
    A
</button>