Vue如何处理事件

v-on指令用法

<div><button v-on:click='number++'>按钮</button></div>

v-on简写形式

<div><button @click='number++'>按钮</button></div>

事件函数的调用方式

直接绑定函数名称

<div><button @click='handler'>按钮</button></div>

直接调用函数

<div><button @click='handler()'>按钮</button></div>

函数参数参数传递

普通参数和事件对象

<div><button @click='sayHi("hi",$event)'>Hi</button></div>

var vm = new Vue({
      
      
    el: '#app',
    data: {
      
      
        number: 0,
    },
    methods: {
      
      
        sayHi: function(p, event) {
      
      
            console.log(p);
            console.log(event.target.innerHTML);
            this.number++;
        },
    }
});

事件绑定-参数传递总结

如果事件直接绑定函数名称，那么默认会传递事件对象($event)作为事件函数的第一个参数
如果事件绑定函数调用，那么事件对象($event)必须作为最后一个参数传递，并且事件对象的名称必须是$event

事件修饰符

.stop阻止冒泡

<div @click="f0">
    <button @click='f1'>按钮</button>
</div>

var vm = new Vue({
      
      
    el: '#app',
    data: {
      
      
        number: 0,
    },
    methods: {
      
      
        f0: function() {
      
      
            console.log(event.target.innerHTML);
        },
        f1: function() {
      
      

        },
    }
});

当点击按钮时，便会触发调用f1和f0函数，事件冒泡到f0了，若想阻止冒泡，添加事件修饰符.stop即可

<button @click.stop='f1'>按钮</button>

.prevent阻止默认行为
```
<div>
    <a href="http://www.baidu.com">百度</a>
</div>
```
点击a标签之后，页面将会跳转到百度页面，如果想要阻止这个行为，添加.prevent事件修饰符即可
```
<a href="http://www.baidu.com" @click.prevent="handler1">百度</a>
```

按键修饰符

.enter 回车键

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-model='username'>
            </div>
            <div>
                密 码：
                <input type="text" v-on:keyup.enter="submitHandle" v-model='password'>
            </div>
            <div>
                <input type="button" v-on:click="submitHandle" value="提交">
            </div>
        </form>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script>
        var vm = new Vue({
       
       
            el: '#app',
            data: {
       
       
                username: '',
                password: '',
            },
            methods: {
       
       
                // 提交函数
                submitHandle: function() {
       
       
                    console.log(this.username, this.password);
                },
            }
        });
    </script>
</body>

</html>

上述代码为提交按钮定义了一个提交函数(submitHandle)，当按钮被点击之后就会触发这个函数。同时给密码框加上.enter回车键修饰符，当按下回车键之后也会触发submitHandle函数。

.delete 删除键

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键修饰符</title>
</head>

<body>
    <div id="app">
        <form action="">
            <div>
                用户名：
                <input type="text" v-on:keyup.delete="clearContent" v-model='username'>
            </div>
            <div>
                密 码：
                <input type="text" v-on:keyup.enter="submitHandle" v-model='password'>
            </div>
            <div>
                <input type="button" v-on:click="submitHandle" value="提交">
            </div>
        </form>
    </div>
    <script src="js/vue-2.5.16.js"></script>
    <script>
        var vm = new Vue({
       
       
            el: '#app',
            data: {
       
       
                username: '',
                password: '',
            },
            methods: {
       
       
                // 提交函数
                submitHandle: function() {
       
       
                    console.log(this.username, this.password);
                },
                clearContent: function() {
       
       
                    // 按delete键的时候清空用户名
                    this.username = '';
                }
            }
        });
    </script>
</body>

</html>

上述代码为用户框用加上了.delete 按键修饰符和绑定clearContent函数，当用户点击Delete按键之后将会清空用户名。

自定义按键修饰符

方式1——通过ASCILL定义

<div>
	<input type="text" v-on:keyup.65="showASCILL">
</div>

var vm = new Vue({
      
      
    el: '#app',
    data: {
      
      

    },
    methods: {
      
      
        showASCILL: function(event) {
      
      
            console.log(event.keyCode);
        }
    }
});

方式2——通过全局config.keyCodes对象定义

<div>
    <input type="text" v-on:keyup.x="showASCILL">
</div>

Vue.config.keyCodes.x = 66;
var vm = new Vue({
      
      
    el: '#app',
    data: {
      
      

    },
    methods: {
      
      
        showASCILL: function(event) {
      
      
            console.log(event.keyCode);
        }
    }
});

Vue框架——事件绑定

事件绑定