事件处理 | iGmaBlog

事件的定义和使用

知识点

为按钮绑定单击事件可以使用：v-on 指令。
v-on 语法：v-on:click = 方法名
v-on:click 可以简写成 @click
方法的实现需写到 Vue 实例的 methods 中。
使用 v-on:xx 或 @xxx 绑定事件，其中 xxx 是事件类型，比如单击事件 click。
事件的回调需要配置在 methods 对象中，最终会在 vm 上。
methods 中配置的函数，不要使用箭头函数，否则 this 的指向是 Window 对象，而不是 vm。
methods 中配置的函数，都是被 Vue 所管理的函数，this的指向是 vm 或组件实例对象。
@click="demo" 和 @click="demo($event)" 效果一致。

案例

代码

html

<body>
    <div id="root">
        <h2>Hello，{{ name }}</h2>
        <button v-on:click="showInfo">点我弹出弹窗</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            },
            methods: {
                showInfo() {
                    alert(`Hello, ${this.name}`);
                }
            }
        })
    </script>
</body>

运行结果

事件传参

html

<body>
    <div id="root">
        <h2>Hello，{{ name }}</h2>
        <button @click="printParameter(name)">点我弹出弹窗</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            },
            methods: {
                printParameter(name) {
                    console.log(name);
                }
            }
        })
    </script>
</body>

事件传参 $even

html

<body>
    <div id="root">
        <h2>Hello，{{ name }}</h2>
        <button @click="printParameter($event,name)">点我弹出弹窗</button>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                name: 'iGma'
            },
            methods: {
                printParameter(event,name) {
                    console.log(name);
                    console.log(event);
                }
            }
        })
    </script>
</body>

事件修饰符

阻止默认事件

在 a 标签上绑定单击事件，当用户点击 a 标签的时候让浏览器弹出弹窗，而不跳转页面(改变 a 标签的默认行为)
修饰符：prevent

代码

html

<body>
    <div id="root">
        <a :href="url" @click.prevent="showAlert">{{title}}</a>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                url: 'https://blog.igma.ink',
                title: 'iGma\'blog'
            },
            methods: {
                showAlert() {
                    alert("你点击了 a 标签")
                }
            }
        })
    </script>
</body>

阻止冒泡

分别给嵌套盒子的父元素和子元素绑定事件，点击子元素让其只执行子元素点击事件的内容，不冒泡到父元素上。
修饰符：stop

代码

html

<body>
    <div id="root">
        <div @click="click0">
            <div @click.stop="click1"></div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                url: 'https://blog.igma.ink',
                title: 'iGma\'blog'
            },
            methods: {
                click0() {
                    alert("你点击了父元素")
                },
                click1() {
                    alert("你点击了子元素")
                }
            }
        })
    </script>
</body>

事件只执行一次

给 H1 标签绑定单击事件，且只有第一次点击时执行方法体。
修饰符：once

代码

html

<body>
    <div id="root">
        <h1 @click.once="click0">我的点击事件只执行一次</h1>
    </div>
    <script>
        new Vue({
            el: '#root',
            methods: {
                click0() {
                    console.log("H1 的点击事件");
                }
            }
        })
    </script>
</body>

键盘事件

分类和语法

键盘事件分为两类
- 键盘按下：@keydown
- 键盘抬起：@keyup

语法

html

<input type="text" placeholder="键盘事件" @keydown="showInfo" >

按键别名

常用的按键：回车(enter)，删除(delete)，退出(esc)，空格(space)，换行(tab)，上(up)，下(down)，左(left)，右(right)

用法

需求：按下回车后，输出输入框内的内容。

代码

html

<body>
    <div id="root">
        <input type="text" placeholder="键盘事件" @keydown.enter="showInfo" >
    </div>
    <script>
        new Vue({
            el: '#root',
            methods: {
                showInfo(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>

注意第三行代码，按下回车事件可以直接使用 @keydown.enter = '事件名' 即可。如果是按下 esc 键执行程序，把 .enter 换成 .esc 即可。

特殊按键

特殊事件有哪些？
- ctrl，shift，alt，Win 键：触发 @keyup 键时这四个键需要配合键盘上其他键一起使用。按下这4个系统修饰键同时按下键盘其他键，随后松开其他键后事件才会被触发。例如：按下 ctrl 键，按下 y 键，松开 y 键后事件才会被触发。
- tab 键：tab 键需要配合 @keydown 事件一起使用，因为 tab 键本身具有转移焦点功能，如果绑定 @keyup 没有任何效果。

ctrl，shift，alt，Win 键事件绑定方法

需求：按下 ctrl + y 键后，控制台输出一句话。
代码

html

<body>
    <div id="root">
        <input type="text" placeholder="键盘事件" @keyup.ctrl="showInfo" >
    </div>
    <script>
        new Vue({
            el: '#root',
            methods: {
                showInfo(e) {
                    console.log(e.target.value);
                }
            }
        })
    </script>
</body>

事件的定义和使用 ​

知识点 ​

案例 ​

事件传参 ​

事件传参 $even ​

事件修饰符 ​

阻止默认事件 ​

阻止冒泡 ​

事件只执行一次 ​

键盘事件 ​

分类和语法 ​

按键别名 ​

特殊按键 ​

事件的定义和使用

知识点

案例

事件传参

事件传参 $even

事件修饰符

阻止默认事件

阻止冒泡

事件只执行一次

键盘事件

分类和语法

按键别名

特殊按键