Vue内置指令——v-on（事件处理）

最新推荐文章于 2023-06-27 21:39:36 发布

沐小侠

最新推荐文章于 2023-06-27 21:39:36 发布

阅读量650

点赞数 1

分类专栏： Vue.js 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_41092938/article/details/125514956

版权

Vue.js 专栏收录该内容

26 篇文章 7 订阅

订阅专栏

Vue.js提供了事件处理机制，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常情况下需要编写监听事件、事件处理方法、内联事件处理。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>购物车数量（事件处理）</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            数量：
            <!-- 通过v-on来给元素绑定事件 -->
            <!-- <input type="button" value="+" @click="num--"/>  
num--能将num值改变，但是不推荐这么写-->
            <!-- 开发中许多事件处理逻辑会更为复杂，所以直接把JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称 -->
            <input type="button" value="-" v-on:click="del" />  
  
            <!-- 如果需要传递参数，就需要内联 JavaScript 语句,这种方式称为内联事件处理器，在内联事件处理器中的方法中可以使用特殊的变量$event把它传入方法，以此来访问原生的DOM事件。必须作为最后一个参数显示传递，并且事件对象的名称必须是$event-->
            <input type="text" v-model:value="num" v-on:focusout ="change(num,$event)" size="1">
            <!-- v-on可以用@代替 -->
            <input type="button" value="+" @click="add" />
        </div>
        <script>
            var v3 = new Vue({ 
                el: '#app',
                data: {
                    num:1
                },
                methods: {
                    /* 例如当单击按钮时，数量减一，但是数量不可以小于等于0，所用我们就要写一些逻辑处理的代码。 */
                    del: function() {
                        // this在方法里指向当前 Vue 实例
                        if (this.num > 1) {
                            this.num--;
                        } else {
                            alert("数量不能小于1");
                        }
                    },
                    add:function(){
                        this.num++;
                    },
                    change: function(num,event) {
                        if (num < 1) {
                            this.num = 1;
                        }
                        console.log(event.target)//target 事件属性可返回事件的目标节点（触发该事件的节点）
                    }
                }
            })
        </script>
    </body>
</html>

事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。
修饰符是由点开头的指令后缀来表示的。

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
按键修饰符
在监听键盘事件的时候，我们常常需要检测一些常用的键值（keyCode）。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
自定义按键修饰符别名
在Vue中可以通过config.keyCodes自定义按键修饰符别名。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>动态绑定属性</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 -->
        <input type="text" v-on:keydown.f5="prompt()">
    </div>
    
    <script>
        
        Vue.config.keyCodes.f5 = 116;
    
        let app = new Vue({
            el: '#app',
            methods: {
                prompt: function() {
                    alert('我是 F5！');
                }
            }
        });
    </script>
</body>
</html>