06月23, 2019

VUE--VUE基础--事件处理

事件处理

一、事件绑定(事件监听)

使用v-on:事件名称 = '事件处理函数'的形式来监听事件,事件处理函数要写在methods后面的对象中

1、简单事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo2-事件处理</title>
</head>
<body>
    <div id="app">
        <button v-on:click="show">点击</button>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        message:'Hello Vue!'
    },
    methods: {
        show(){
            alert(this.message);
        }
    },
});
</script>
</html>

效果: event

2、事件名简写

由于,v-on:事件名很常用,所以,事件也常常可以简写为@事件名,比如:v-on:click简写为@click

3、事件传递参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo2-事件处理</title>
</head>
<body>
    <div id="app">
        <button v-on:click="show">点击</button>
        <button v-on:click="showEvent">点击 event</button>
        <button v-on:click="showParam('Mr.Yan',$event)">点击 传参</button>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        message:'Hello Vue!'
    },
    methods: {
        show(){
            alert(this.message);
        },
        showEvent(event){
            console.log(event);
        },
        showParam(msg,event){
            console.log(msg);
            console.log(event);
        }
    },
});
</script>
</html>

效果: event-para

二、事件修饰符

在事件处理程序中调用event.preventDefault()event.stopPropagation()是非常常见的需求。尽管可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理DOM 事件细节。

为了解决这个问题,Vue 为v-on提供了事件修饰符。通过由点.表示的指令后缀来调用修饰符。

常见的事件修饰符如下:

.stop:阻止冒泡。
.prevent:阻止默认事件。
.capture:使用事件捕获模式。
.self:只在当前元素本身触发。
.once:只触发一次。
.passive:默认行为将会立即触发。

1、阻止事件冒泡,.stop修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo2-事件处理</title>
    <style>
        #outter{
            width: 300px;
            height: 300px;
            padding: 20px;
            background-color: #3d78c5;
        }
        #inner{
            width: 150px;
            height: 150px;
            background-color: #55e480;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="outter" v-on:click='outter'>
            <div id="inner" v-on:click.stop='inner'></div>
        </div>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
    el:'#app',
    data:{
        message:'Hello Vue!'
    },
    methods: {
        outter(){
            alert('outter');
        },
        inner(){
            alert('inner');
        }
    },
});
</script>
</html>

效果: event.stop

2、阻止默认行为,.prevent修饰符

    <a href="http://www.yanhongzhi.com" v-on:click.prevent>Mr.Yan的博客</a>

效果: event.prevent

3、事件捕获,.capture修饰符

<div id="outter" v-on:click.capture='outter'>
    <div id="inner" v-on:click='inner'></div>
</div>

效果: event.capture

4、事件源是自身的时候触发,.self修饰符

<div id="outter" v-on:click.self='outter'>
    <div id="inner" v-on:click='inner'></div>
</div>

效果: event.self

5、只触发一次,.once修饰符

<div id="outter" v-on:click='outter'>
    <div id="inner" v-on:click.once='inner'></div>
</div>

效果: event.once

三、按键修饰符

除了事件修饰符以外,在 Vue 中还提供了有鼠标修饰符,键值修饰符,系统修饰符等功能,使用方式大致就和事件修饰符是一样的,例如:

<!-- 鼠标修饰符 -->
.left 左键
.right 右键
.middle 滚轮
<!-- 键值修饰符 -->
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名 -->
.enter 回车
.tab 制表键
.delete(捕获 “删除” 和 “退格” 键)
.esc 返回
.space 空格
.up 上
.down 下
.left 左
.right 右

<!-- 修饰键 -->
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>demo3-按键修饰符</title>
</head>
<body>
    <div id="app">
        <!-- Vue在绑定事件时提供了许多修饰符,写法如下: -->
        <!-- 不同的修饰符有不同的功能,详细参见手册 -->
        <p><a href="http://www.baidu.com" @click.prevent='handle("禁止打开")'>百度一下</a></p>
        <!-- 按下具体某个键时才调用方法 -->
        <!-- 绑定keyup事件,keyCode为65时(a键)才会调用方法 -->
        <p><input type="text"  @keyup.65='handle1'></p>
        <!-- Vue还提供了一些快捷名称,全部的可以参见手册 -->
        <!-- 绑定keyup事件,如果是按的回车键则会触发事件 -->
        <p><input type="text"  @keyup.enter='handle2'></p>
        <!-- 判断用户点击按钮时用的是哪一个键,使用到的修饰符有.right,.middle和.left -->
        <p><button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{mess}}</button></p>
        <!-- 还有一些修饰符是和点击按键配合使用的 -->
        <p @click.alt='handle3'>按住Alt键后点击触发事件</p>
    </div>
</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            mess: '点击'
        },
        methods: {
            handle: function (mess, event) {
                window.alert(mess); // 弹出传递过来的信息
            },
            handle1: function () {
                console.log('this is a test');
            },
            handle2: function () {
                console.log('this is a test2');
            },
            handle3: function () {
                console.log('this is a test3');
            },
            left: function () {
                this.mess = 'left'
            },
            right: function () {
                this.mess = 'right'
            },
            middle: function () {
                this.mess = 'middle'
            },
        }
    });
</script>
</html>

效果: event.key

本文链接:http://www.yanhongzhi.com/post/vue-event.html

-- EOF --

Comments