Vue学习笔记——4.事件处理

最新推荐文章于 2022-07-04 08:55:50 发布

原来是肖某人

最新推荐文章于 2022-07-04 08:55:50 发布

阅读量201

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/qq_33905217/article/details/107670867

版权

前端专栏收录该内容

19 篇文章 1 订阅

订阅专栏

内联处理器中的方法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
        Submit
    </button>
</div>
<script>
    var vue = new Vue({
        el:'#app',
        methods: {
            warn: function (message, event) {
                // 现在我们可以访问原生事件对象
                if (event) {
                    event.preventDefault()
                    console.log(event.target.innerHTML)
                }
                alert(message)
            }
        }
    });
</script>
</body>
</html>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 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></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

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