Vue简明实用教程(04)——事件处理

Posted 2021-12-09 谷哥的小弟

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue简明实用教程(04)——事件处理相关的知识，希望对你有一定的参考价值。

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

事件处理概述

在Vue中可非常便利地进行事件处理，例如：点击事件、鼠标悬停事件等。

主要步骤：

1、在Vue实例的methods中定义函数。
2、在html中指定事件类型及其对应的处理函数。

事件处理方式

在此，介绍两种Vue常用的事件处理方式。

方式一

函数定义

在Vue实例的methods中定义函数

函数名:function(){

}

函数调用

在html中通过v-on属性指定事件类型及其对应的处理函数

<标签名 v-on:事件类型="事件处理函数">标签体</标签名>

方式二

函数定义

在Vue实例的methods中定义函数

函数名(){

}

函数调用

在html中通过@事件类型属性指定事件类型及其对应的处理函数

<标签名 @事件类型="事件处理函数">标签体</标签名>

this

Vue实例的methods中定义的函数里可使用this表示当前Vue实例。在开发中，我们可以使用this获取data中的数据或者调用methods中的其它方法。

事件处理示例1

<!DOCTYPE html>
<!-- 引入v-on命名空间-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                // Vue实例中的方法
                methods:{
                    fun1:function (){
                        console.log("hello fun1");
                    },
                    fun2:function (){
                        console.log("hello fun2");
                    },
                    fun3:function (){
                        console.log(this);
                        // 通过this访问data中的属性
                        console.log(this.name);
                        console.log(this.number);
                    },
                    fun4:function (){
                        // 通过this访问data中的属性并修改
                        this.name = this.name+"hi ";
                        this.number = this.number+1;
                        // 通过this调用methods中的方法
                        this.fun3();
                    },
                    fun5:function (str){
                        // 通过this访问data中的属性并修改
                        this.name = this.name+str;
                    },
                    fun6:function (i){
                        // 通过this访问data中的属性并修改
                        this.number = this.number+i;
                    },
                    fun7:function (str,i){
                        // 打印方法被调用时接收到的参数
                        console.log("str="+str);
                        console.log("i="+i);
                    },
                    fun8:function (paramObject){
                        // 打印方法被调用时接收到的对象参数
                        console.log("username="+paramObject.username);
                        console.log("age="+paramObject.age);
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <h3>{{number}}</h3>
        <button v-on:click="fun1">按钮绑定点击事件</button>
        <br/><br/>
        <button v-on:mouseover="fun2">按钮绑定鼠标悬停事件</button>
        <br/><br/>
        <button v-on:click="fun1" v-on:mouseover="fun2">按钮同时绑定点击事件和鼠标悬停事件</button>
        <br/><br/>
        <button v-on:click="fun3">按钮绑定点击事件与this入门</button>
        <br/><br/>
        <button v-on:click="fun4">按钮绑定点击事件与this使用</button>
        <br/><br/>
        <button v-on:click="fun5('bye')">按钮绑定点击事件与方法调用传参1</button>
        <br/><br/>
        <button v-on:click="fun6(2)">按钮绑定点击事件与方法调用传参2</button>
        <br/><br/>
        <button v-on:click="fun7('nice',99)">按钮绑定点击事件与方法调用传参3</button>
        <br/><br/>
        <!-- 以对象形式传递参数 -->
        <button v-on:click="fun8({username:'zxx',age:50})">按钮绑定点击事件与方法调用传参4</button>
        <br/><br/>
    </div>
</body>
</html>

事件处理示例2

<!DOCTYPE html>
<!-- 引入v-on命名空间-->
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                // Vue实例中的方法的简便写法
                methods:{
                    fun1(){
                        console.log("hello fun1");
                    },
                    fun2(str,i){
                        console.log(str);
                        console.log(i);
                        // 通过this访问data中的属性并修改
                        this.name = this.name+str;
                        this.number = this.number + i;
                    },
                    fun3(){
                        console.log("hello mouseover");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>
        <h3>{{number}}</h3>
        <button @click="fun1">利用@click实现按钮绑定点击事件的简便写法1</button>
        <br/><br/>
        <button @click="fun2('nice',7)">利用@click实现按钮绑定点击事件的简便写法2</button>
        <br/><br/>
        <button @mouseover="fun3()">利用@mouseover实现鼠标悬停事件的简便写法</button>
        <br/><br/>
    </div>
</body>
</html>

事件修饰符

事件修饰符常用于对事件进行描述和修饰，它可决定事件触发条件或阻止事件的触发。

在此，介绍Vue中常用的事件修饰符。

.once

.once修饰符表示该事件只触发一次。

.prevent

.prevent修饰符用于阻止标签的默认行为。

.stop

.stop修饰符用于阻止冒泡事件向上传递。

.self

.self修饰表示只监听自身标签触发的事件，忽略冒泡事件。

事件修饰符语法

@事件名.事件修饰符

例如：

@click.self

事件修饰符示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 入口函数
        window.onload = function () {
            new Vue({
                el: "#div1",
                data: {
                    name: "谷哥的小弟",
                    number: 9527
                },
                methods:{
                    fun1(){
                        console.log("hello fun1");
                    },
                    fun2(){
                        console.log("hello fun2");
                    },
                    fun3(){
                        console.log("hello parent");
                    },
                    fun4(){
                        console.log("hello fun4");
                    },
                    fun5(){
                        console.log("hello parent");
                    },
                    fun6(){
                        console.log("hello fun6");
                    },
                    fun7(){
                        console.log("hello fun7");
                    }
                }
            });
        }
    </script>
</head>
<body>
    <h2 style="color: red;">本文作者：谷哥的小弟</h2>
    <h2 style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
    <div id="div1">
        <h3>{{name}}</h3>

        <button @click.once="fun1">利用@click实现按钮绑定点击事件并测试once修饰符</button>
        <br/><br/>

        <a href="http://blog.csdn.net/lfdfhl" @click.prevent="fun2">利用@click实现超链接点击并测试prevent修饰符</a>
        <br/><br/>

        <p>事件传递及冒泡回顾</p>
        <div style="width: 200px;height: 200px;background: red" @click="fun3">
            <div style="width: 100px;height: 100px;background: green" @click="fun4"></div>
        </div>
        <br/><br/>

        <p>利用@click实现div绑定点击事件并测试stop修饰符</p>
        <div style="width: 200px;height: 200px;background: red" @click="fun3">
            <div style="width: 100px;height: 100px;background: green" @click.stop="fun4"></div>
        </div>
        <br/><br/>

        <p>利用@click实现div绑定点击事件并测试self修饰符</p>
        <div style="width: 200px;height: 200px;background: red" @click.self="fun5">
            <input type=Vue简明实用教程(14)——Vue的组件
 Vue简明实用教程(14)——Vue的组件
 Vue简明实用教程(01)——Vue框架入门
 Vue简明实用教程(01)——Vue框架入门
 Vue简明实用教程(15)——Vue的路由
 Vue简明实用教程(09)——Vue综合练习(待办事项)