事件监听

时间:2019-10-28
本文章向大家介绍事件监听,主要包括事件监听使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

v-on参数问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--如果没有参数的可以省略括号-->
    <button v-on:click="btn1Func">按钮1</button>
    <button v-on:click="btn1Func()">按钮4</button>
    <!--传参数的时候,如果不加单引号Vue会当做一个变量去解析-->
    <button @click="btn2Func('123')">按钮2</button>
    <!--$event 自己手动拿到浏览器产生的event事件-->
    <button @click="btn3Func('123', $event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            btn1Func(){
                console.log('按钮1被执行');
            },
            btn2Func(event){
                console.log('-------> 按钮2被执行', event)
            },
            btn3Func(index, event){
                console.log('-------> 按钮3被执行', index, event)
            }
        }
    })
</script>
</body>
</html>  

v-on修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app" >
    <div @click="divBtn">
        <!--1. .stop修饰符的使用-->
        <button @click.stop="btn1">按钮</button>
    </div>

        <!--2. .prevent(阻止默认事件)修饰符的使用-->
    <br>
    <br>
    <form action="baidu">
        <input type="submit" value="提交"  @click.prevent="submitBtn">
    </form>
        <!--3. .keyup键盘的键帽修饰符的使用 keydown-->
    <br>
    <input type="text" @keyup.enter="inputBtn">

        <!--4. .native监听组件根元素的原生事件-->
        <!--<cpn @click.native="aaaa"></cpn>-->

        <!--5 .once修饰符只触发一次-->
    <button @click.once="onceClick">按钮2</button>
</div>



<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '你好啊'
        },
        methods: {
            divBtn() {
                console.log('div被触发');
            },
            btn1() {
                console.log('button 按钮被触发');
            },
            submitBtn() {
                console.log('submit按钮被触发');
            },
            inputBtn() {
                console.log('inputBtn键盘键帽上去了');
            },
            onceClick() {
                console.log('onceClick');
            }
        }
    })
</script>
</body>
</html>

  

原文地址:https://www.cnblogs.com/Alexephor/p/11734212.html