Vue 事件处理

2022-04-21
javascript vue2.0

在vue当中，还提供了一个v-on指令来监听DOM事件，并使用一些鼠标、键盘方法来运行一些js code，其中我们在上面几章已经讲述了v-on指令的缩写为@，本文我们将不会重复上述关于v-on指令的信息。

鼠标左击处理（@click \ v-on:click）

<div id="app">
    <button @click="click += 1">增加</button>
    <p>当前增加次数为 {{click}} 次</p>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            click: 0
        }
    })
</script>

方法调用

在上述的code中，如果用于复杂逻辑处理那么会直接写上 js code 是不可行的，所以vue自然而然的为我们提供了调用方法的方式：

<div id="app">
    <button v-on:click="add">Add</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function(event) {
                    alert("当前数据默认被点击次数" + this.counter)
                if (event) {
                    alert("被触发元素为：" + event.target.tagName)
                }
            }
        }
    })
</script>

内链调用处理

在上述我们演示到了方法调用以及鼠标动作处理等操作，其中鼠标左击处理也是通过内链直接调用的，所谓内链就是与html 标签元素写在一起即大多数都被称之为内链。

<div id="app">
    <button @click="echo('Hello,vue!')">Vue!</button>
    <button @click="echo('Hello,hello!')">Hello!</button>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            echo: function(message) {
                alert(message)
            }
        }
    })
</script>

修饰符

在之前我们讲到了vue的基本事件修饰符，本文我们紧接着上述内容进行详细讲解，首先：

v-on

鼠标修饰符

```vue
    <div id="app">
    </div>
    <form v-on:submit.prevent="onSubmit">
        <a v-bind:href="url">Go blog</a>
    </form>
        <script>
            var app =  new Vue({
                el: '#app',
                data: {
                    url: 'http://sif_one.gitee.io/'
                }
            })
        </script>

那么其最后在 v-on指令的笼罩下范围内的<a>标签将会失去原本的作用：

ID	DA	FA
.stop	调用 event.stopPropagation()	停止传播
.prevent	调用 event.preventDefault()	防止默认
.capture	添加事件侦听器时使用capture(捕获) 模式
.self	只当事件从侦听器绑定元素本身触发时才进行回调
```.{keyCode	keyAlias} ```	只当事件从特定键触发时才进行回调
.native	监听组件根本元素的原生事件
.once	只触发一次回调
.left	只当点击鼠标左键时触发
.right	只当鼠标点击右键时触发
.middle	当鼠标中键时触发
.passive	以 { passive: true } 模式添加侦听器

在上述的修饰符中，在事件处理中经常会调用到event.stopPropagation以及event.stopPropagation等方法，但由于其主要处理纯粹的数据逻辑，并不处理BOM事件的写接。

于是，vue为了解决这个问题，官方为其提供了事件的修饰符：

stop
prevent
capture
salf
once
passive

当然vue官方文档还提供了几个修饰符的组合例子：

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

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

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

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

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

在以上的修饰符进行组合的时候，请需要注意顺序，顺序不同可能最后表达的效果可能不一。。

不仅仅这样

众所周知，jq很多方法都需要使用鼠标事件，如鼠标单击事件，而vue 在2.2.0版本中，也增加了一个鼠标按钮修饰符：

ID	DA
.left
.right
.middle

键盘修饰符


```vue
    <div id="app">
        <input v-on:keyup.tab="echo">  
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                echo: function(message) {
                    alert("监听到了 tab 的键盘事件")
                }
            }
        })
    </script>

在上述的code案例中，我们主要使用tab案件码来配合键盘修饰符来监听tab的键盘事件，vue一共所支持的按键修饰符共有9个，分别为：

ID	DA
.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right

系统修饰符

当然，vue的v-on指令还不仅仅以上这些，自然而然的还支持了系统修饰符，我们可以通过按下响应的按键触发监听器：

ID	DA
.ctrl
.alt
.shift
.meta

同样的，系统修饰符也可以进行组合，如官方文档中所提供的例子：

<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>

需要注意的是，修饰符键于常规的不同，当keyup事件一起使用的时候，修饰符键必须处于按下的状态，只有当按住tab的情况下释放其他案件，才能被触发，所以如果需要实现那种行为，可以改为键代码为keyup.17即可。

.exact

2.5.0中所新增的修饰符，可以**精确的控制系统修饰符组合并触发事件**，这里我们提供了vue的官方文档中所写的例子：

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

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

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

从例子中可以看到使用.exact修饰符进行系统修饰符的多种组合变得更加方便（且不用写键代码如keyup.17）

⬅️ Go back