vue3 事件

1.属性监听

    <div id="vm">
        <button v-on:click="counter += 1">点击</button>
        <p>{{ counter }} times</p>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            }
        }).mount('#vm')
    </script>

2.方法监听

    <div id="vm">
        <button v-on:click="add">点击</button>
        <p>{{ counter }} times</p>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                add(event) {
                    this.counter = this.counter + 1;
                    if (event) {
                        console.log(event.target.tagName)
                    }
                }
            }
        }).mount('#vm')
    </script>

event是原生 DOM event

3.带参数的方法

    <div id="vm">
        <!--传参-->
        <button v-on:click="add(10)">点击</button>
        <p>{{ counter }} times</p>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    counter: 1
                }
            },
            methods: {
                add(i) {
                    this.counter=this.counter*i
                }
            }
        }).mount('#vm')
    </script>

4.原生事件

   <div id="vm">
        <!--传参-->
        <button v-on:click="add(10,$event)">点击</button>
        <p>{{ counter }} times</p>
    </div>
    <script>
        const v = Vue.createApp({
            data() {
                return {
                    counter: 1
                }
            },
            methods: {
                add(i, event) {
                    if (event) {
                        //点击按钮时鼠标x轴的坐标
                        console.log(event.screenX)
                    }
                    this.counter +=1
                }
            }
        }).mount('#vm')
    </script>

5.多个事件

    <div id="vm">
        <button @click="one($event), two($event)">
            Submit
        </button>
    </div>
    <script>
        const v = Vue.createApp({
            methods: {
                one(event) {
                    console.log('one')
                },
                two(event) {
                    console.log('two')
                }
            }
        }).mount('#vm')
    </script>

6.事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

 

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

 

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

7.按键修饰符

    <div id="vm">
  <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
  <input v-on:keyup.enter="submit" >
    </div>
    <script>
        const v = Vue.createApp({
            methods: {
                submit() {
                    alert('按下了回车键')
                }
            }
        }).mount('#vm')
    </script>

或者

<input v-on:keyup.13="submit">

Vue 提供了绝大多数常用的按键码的别名：

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

注意：有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。

8.自定义按键

https://cn.vuejs.org/v2/api/#keyCodes

 

9.系统修饰键

（1）系统修饰键

• .ctrl
• .alt
• .shift
• .meta

如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

    <div id="vm">
        <input @keyup.alt.67="clear">
    </div>
    <script>
        const v = Vue.createApp({
            methods: {
                clear: function () {
                    alert('复制')
                }
            }
        }).mount('#vm')
    </script>

（2）.exact 修饰符

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

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

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

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

（3）鼠标按钮修饰符

• .left
• .right
• .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。