v-on之事件监听

2020-07-08 本文已影响0人瑟闻风倾

常用事件有：点击、拖拽和键盘事件等

v-on:click(@click) ——>注册点击事件

v-on:keydown(@keydown) ——>注册键盘事件

v-on:keyup(@keyup) ——>注册键盘事件

v-on:mousedown(@mousedown) ——>注册鼠标事件

v-on:mouseover(@mouseover) ——>注册鼠标事件

v-on:submit(@submit) ——>注册表单事件

(1) v-on 的基本使用及语法糖

eg1：v-on注册点击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="vue1026.js"></script>
</head>
<body>
    <div id="app">
        {{name}}
        <button v-on:click="change">点击改变视图显示</button>
        <button @click="change">语法糖—简写</button>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name:"liy"
        },
        methods:{
            change:function(){
                this.name += "-yang"
            }
        }
    });
</script>
</html>

eg2：v-on注册鼠标键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
    <div id="app">
        <button v-on:click="submit">提交</button>
        <div>
            <span>v-on:click可简化为@click，其他事件同理将前缀v-on:简化为@</span>
            <button @click="submit">提交</button>
        </div>
        
        <input type="text" placeholder="v-on:keydown" v-on:keydown="kd">
        <input type="text" placeholder=" @keydown" @keydown="kd">
        <input type="text" placeholder=" @keyup" @keyup="kp">
        <input type="text" placeholder=" @mousedown" @mousedown="md">
        <input type="text" placeholder=" @mouseover" @mouseover="mo">

    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            submit:function(){
                alert("触发了click事件：点击了提交按钮");
            },
            kd:function(){
                alert("触发了keydown事件：点击了键盘按键");
            },
            kp:function(){
                alert("触发了keyup事件：点击了键盘按键");
            },
            md:function(){
                alert("触发了mousedown事件：鼠标按下");
            },
            mo:function(){
                alert("触发了mouseover事件：鼠标经过");
            }
        }
    });
</script>
</html>

(2) v-on 之参数传递

methods定义的方法供@click调用时：

若无需参数，方法后的()可以省略；
若需传参数，同时需要event（浏览器生成的event事件对象）时，可通过$event 传入事件。
如果方法本身有一个参数，默认会将原生事件event参数传递进去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1. 事件调用的方法无参数 -->
        <button @click="btn1Click()">按钮1</button>
        <button @click="btn1Click">按钮1</button>
        <!-- 2. 事件定义时，事件调用方法时省略来小括号，但是方法定义时需要一个参数时：Vue会默认将浏览器生成的event事件对象作为参数传入到方法 -->
        <button @click="btn2Click">按钮2</button>
        <!-- 3. 方法定义时，我们需要event对象，同时又需要其他参数时：调用时通过$event来手动获取到浏览器参数的event对象 -->
        <button @click="btn3Click('liy',$event)">按钮3</button>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            
        },
        methods:{
            btn1Click(){
                console.log('无参');
            },
            btn2Click(event){
                console.log(event);
            },
            btn3Click(name,event){
                console.log(name);
                console.log(event);
            },
        }
    });
</script>
</html>

(3) v-on 之事件修饰符

prevent(阻止默认行为) 和 stop(阻止冒泡)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="vue1026.js"></script>
</head>
<body>
    <div id="app">
        <!-- type="submit"的按钮，点击时会自动提交表单，在表单上加@submit事件并用事件修饰符prevent来阻止表单默认提交事件 -->
        <form @submit.prevent action="http://www.baidu.com" method="get">
            <input type="text" id="username" v-model="user.uname">
            <input type="password" id="pwd" v-model="user.upwd">
            <input type="submit" @click="formSubmit" value="表单提交">
        </form>

        <!-- 多个div中都注册了事件，则可能导致冒泡，可使用事件修饰符stop(v-on:**.stop或@**.stop)来避免冒泡，如：@click.stop -->
        <div @click="father">
            <span>通过事件修饰符stop来阻止冒泡事件</span>
            <br/>
            <button  @click.stop="child">点击按钮</button>
        </div>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            user:{
                uname:"",
                upwd:""
            }

        },
        methods:{
            formSubmit:function(){
                alert("自定义表单提交事件：" + "username=" + this.user.uname + "," + "password=" + this.user.upwd);
            },
            father:function(){
                console.log("触发父节点的点击事件");
            },
            child:function(){
                console.log("触发子节点的点击事件");
            }
        }
    });
</script>
</html>

keycode|keyAlias（键盘事件修饰符）

当事件从特定键触发时才触发回调。参考：Vue-按键修饰符(默认按键修饰符和自定义按键修饰符).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <input @keyup.13="keyup()">
        <input @keyup.enter="keyup()">
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            
        },
        methods:{
            keyup(){
                console.log('键盘事件');
            }
        }
    });
</script>
</html>

once（只触发一次回调）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script type="text/javascript" src="../first/vue1026.js"></script>
</head>
<body>
    <div id="app">
        <button @click.once="btnClick()">按钮</button>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            
        },
        methods:{
            btnClick(){
                console.log('点击');
            }
        }
    });
</script>
</html>

native（监听组件根元素的原生事件）

自定义组件时使用

v-on之事件监听

猜你喜欢

热点阅读