Vue.js-事件处理器

最新推荐文章于 2024-09-25 18:15:20 发布

weixin_33850890

最新推荐文章于 2024-09-25 18:15:20 发布

阅读量85

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2612473/blog/1524732

版权

2019独角兽企业重金招聘Python工程师标准>>>

监听事件

<body class="">
<div id="example-1">
    <div>{{counter}}</div>
    <button v-on:click="counter+=1">增加</button>
</div>
    <script src="js/vue.js"></script>
    <script>
    
    var app7 = new Vue({
        el: '#example-1',
        data: {
            counter:0
        },
       
    })
    </script>
</body>

方法事件处理器
许多事件处理的逻辑都很复杂，所以直接把JavaScript代码写在v-on指令中是不可行的，因此v-on可以接收一个定义的方法来调用

<body class="">
    <div id="example-1">
        <button v-on:click="greenting">欢迎</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        data: { message: "good" },
        methods: {
            greenting: function(event) {
                alert("hello" + this.message + "!");
                if (event) {
                    alert(event.target.tagName);
                }
            }
        }
    })
    </script>
</body>

内联处理器方法
处理直接绑定到一个方法，也可以用内联JavaScript语句，调用时把不同的参数传递给方法

<body class="">
    <div id="example-1">
        <button v-on:click='say("hi")'>say hi</button>
        <button v-on:click='say("hello")'>say hello</button>
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        methods: {
            say: function(element) {
                alert("this is "+ element)
            }
        }
    })
    </script>
</body>

有时候也需要在内联语句处理器中访问原生DOM事件，可以用特殊变量$event把它传入方法

<body class="">
    <div id="example-1">
        <button v-on:click="warn('warning',$event)">submit</button>
       
    </div>
    <script src="js/vue.js"></script>
    <script>
    var app = new Vue({
        el: "#example-1",
        methods: {
            warn: function(message,event) {
                //现在我们可以访问原生事件
                if(event) event.preventDefault()
                alert("this is "+ message)
            }
        }
    })
    </script>
</body>

事件修饰符

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

//防止事件冒泡
<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></from>
//添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis"></div>
//只有事件在该元素本身（比如不是子元素）触发时触发回调
<div v-on:click.self="doThat"></div>

//使用修饰符时，顺序很重要，响应的代码会以同样的顺序产生，因此用
@click.prevent.self会阻止所有的点击，，而@click.self.prevent只会阻止本元素上的点击

键值修饰符
在监听键盘事件时，我们经常需要监听常见的键值， Vue 允许为v-on在监听键盘事件时添加关键修饰符

<input v-on:keyup.13="submit">
记住所有的keyCode比较困难，所有Vue为常用的按键提供了别名
<input v-on:keyup.enter="submit"> 缩写语法<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete(捕获删除和退格键）
.esc
.space
.up
.down
.left
.right
可以通过全局cinfig.keyCodes对象自定义键值修饰符别名
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112