Vue语法：事件绑定

最新推荐文章于 2024-04-21 18:51:25 发布

yulu32

最新推荐文章于 2024-04-21 18:51:25 发布

阅读量189

点赞数

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

本文链接：https://blog.csdn.net/yulu32/article/details/104016727

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事件绑定

1.指令v-on

Vue使用v-on指令监听DOM事件，我们可以使用v-on指令绑定到DOM节点上，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令v-on</title>
</head>
<body>
<div id="app">
    <button v-on:click="logInfo()">打印消息（default:Hello World）</button><br>
    <button v-on:click="logInfo('Self Message')">打印消息（'Self Message'）</button><br>
    <button v-on:click="console.log('A Vue app')">打印消息（'A Vue app'）</button><br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{

            }
        },
        methods:{
            logInfo(msg){
                console.log(msg || 'Hello World');
            }
        }
    });
</script>
</body>
</html>

同时v-on也可以简写为@

2.获取事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取事件对象</title>
</head>
<body>
<div id="app">
    <!--1.在事件函数不需要传参市可以这样写-->
    <input type="text" @keyup="handleKeyUp"><br>
    <!--2.手动传入$event对象-->
    <input type="text" @keyup="handleKeyUp($event)">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{

            }
        },
        methods:{
            handleKeyUp(event){
                console.log(event.key,event)
            }
        }
    });
</script>
</body>
</html>

3. 常见的修饰符

名称	可用版本	可用事件	说明
.stop	所有	任意	当时间出发时，阻止事件冒泡
.prevent	所有	任意	当事件触发时，组织元素默认行为
.capture	所有	任意	当事件触发时，阻止事件捕获
.self	所有	任意	限制事件仅用于节点本身
.once	2.1.4以上	任意	事件被触发一次后即解除监听
.passive	2.3.0以上	滚动	移动端，限制事件永不调用preventDefault()方法

4.案件修饰符

别名修饰符	键值修饰符	对应按键
.delete	.8/.46	回格/删除
.tab	.9	制表
.enter	.13	回车
.esc	.27	退格
.space	.32	空格
.left	.37	左
.up	.38.	上
.right	.39	右
.down	.40	下

5.组合修饰符

修饰符	可用版本	对应键
.ctrl	2.1.0以上	Ctrl键
.alt	2.1.0以上	Alt键
.shift	2.1.0以上	Shift键
.meta	2.1.0以上	meta键（Window系统上为田键）

下面的这个案例实现了按住Ctrl再点击鼠标的事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合修饰符</title>
    <style>
        .changeMouse{
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
    <h1 @click.ctrl="logWithCtrl" @click="logSingle" @mouseover="addActive">按住Ctrl点击</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script>
    var vue = new Vue({
        el:'#app',
        data(){
            return{
            }
        },
        methods:{
            addActive(event){
                event.currentTarget.className="changeMouse"
            },
            logSingle(event){
                if (!event.ctrlKey){
                    console.log('------------分割线-----------');
                    console.log('$event.ctrlKey:',event.ctrlKey);
                    console.log('已经点击过了。。。')
                }else {
                    console.log('.......')
                }
            },
            logWithCtrl(event){
                console.log('------------分割线-----------');
                console.log('$event.ctrlKey:',event.ctrlKey);
                console.log('按住Ctrl，点击的。。。')
            }
        }
        });
</script>
</body>
</html>

小白一枚，如有问题，请多多指教😃

yulu32

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue语法：事件绑定

事件绑定1.指令v-onVue使用v-on指令监听DOM事件，我们可以使用v-on指令绑定到DOM节点上，例如：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>指令v-on</title></head&gt...
复制链接

扫一扫

专栏目录