扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue快速理解事件绑定是什么
  • 160

0
分享到

Vue快速理解事件绑定是什么

2024-04-02 19:04:59 160人浏览 泡泡鱼
摘要

目录一、监听事件二、事件修饰符1、stop修饰符阻止事件冒泡2、capture修饰符3、self修饰符4、prevent修饰符5、键盘事件修饰符6、鼠标事件修饰符一、监听事件 监听事

一、监听事件

监听事件一般使用的是v-on指令，可以在javascript代码中将v-on直接将写在代码上面，语法是：v-on:你所定的事件名=‘代码’，v-on指令可以接收到函数的调用，并且将其分成是无参数调用函数还是有参数调用函数。当然v-on函数可以简写成@+事件名的写法，很方便。

在初始化Vue对象的时候要申明事件调用的函数，初始化对象的时候，在传递的对象参数中加入一个methods属性，这样才可以在methods属性申明的事件调用函数。

v-on指令是可以起到绑定元素所有的事件的作用，而且每一个函数都有对应的事件，只要通过v-on对时间进行绑定才能进行函数的监听事件。我们可以通过以下的代码实例进行这个监听事件的理解：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<button v-on:click="count+=1">加1次</button>
<button v-on:click="add">+1</button>
<p >按钮点击了{{count}}次！</p>
<button v-on:click="click('请罚陆')">点击</button>
<p>丘比特 {{message}}!</p>
    </div>
    <script src="Http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var m = {
    val1:1,
    val2:2,
    val3:''
};
var vm = new Vue({
    el:'#app',
    data:{
        count:0,
        message:'()'
    },
    methods:{
        add:function(e){
            this.count++;
            console.log(e);
        },
        click(name){
            this.message=name;
        }
    }
})
    </script>
</body>
</html>

运行结果：

这里当v-on：click点击事件如果调用的函数没有参数，那么函数的名后面可以不用（），就像v-on:click:add;如果在定义的时候申名是有参数的，那么这个代码运行中的add：function（e）{},就会调用默认的传入原生事件对象event，所以在单击第二个按钮的时候，控制台就会输出事件的对象。

二、事件修饰符

在时间处理代码程序中调用的event.preventDefault()是很常用的，vue项目中这个调用的方法只是起到了简单的数据逻辑却不能处理DOM事件的细节，所以v-on这个指令提供了事件修饰符，用来点开通的指令后缀来表示。

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

什么是时间冒泡？事件冒泡指的是当一个事件开始的时候一般都是由文档羡慕嵌套层次最深的那个节点开始接收的，然后像冒泡一样逐级向上传播。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<div @click="func($event)">
    <input type="button" value="按键1">
    <input type="button" value="按键2">
    <input type="button" value="按键3">
</div>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func:function(event){
    console.log(event.target);
    console.log('冒泡了。。。。')
}
    }
})
    </script>
</body>
</html>

运行结果：

当<div @click="func($event)">调用事件处理函数传入参数到$event里面，在事件处理函数中，参数获取到事件对象，而事件对象的target属性获取到触发这个属性的元素。通过点击按钮，时间都冒泡到父节点<div>上面，触发这个节点的事件。

2、capture修饰符

这个修饰符所修饰的事件流是捕获事件流，这个DOM事件流分成冒泡事件流和捕获事件流两个事件，而我们现在讲的capture所修饰的事件流就是捕获事件流。我们还是通过一段程序来理解：

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<div @click.capture="box" :style="{border:'solid 2px black'}">
    <a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" @click.stop.prevent="links">淘宝</a>
</div>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var app = new Vue({
    el:'#app',
    methods:{
box(){
    alert('div盒子');
},
links(){
    alert('http://www.淘宝.com');
}
    }
})
    </script>
</body>
</html>

运行结果：

当单击淘宝链接的时候，先弹出div框架，因为绑定的div上面的单击事件得到触发，box里面的函数得到执行；确定“div”的对话框后再弹出内容是“http：//www.taobao.com”的对话框，绑定在a标签的单击事件得到触发，links函数得到执行。

内部元素a触发的事件先在父级元素得到处理，然后才交给内部的元素a进行处理，因为父级元素div绑定了click单击事件，所以增加了事件修饰符capture。

3、self修饰符

这个修饰符只是用来接收自己触发的事件函数，只有绑定这个事件的元素触发事件的时候，才会触事件的处理函数，而且这个事件不会被冒泡或者被捕获。我们通过实例代码了解一下：

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<div @click.self="box()" id="box">
<input type="button" value="按键"@click="btn()">
</div>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
box(){
console.log("div");
},
btn(){
    console.log("button");
}
    }
})
    </script>
</body>
</html>

运行结果：

我们可以看到通过单击只会出现“button”，按键的单击事件触发，div没有接收到冒泡，div上面的单击事件没有被触发。通过单击div，只能输出“div”div的单击事件被触发，但是按键的单击事件没有被触发。

4、prevent修饰符

这个修饰符主要用来阻止默认事件。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click="func">开始可以访问到淘宝网</a>
<a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent="func">不可以访问到淘宝网</a>
<a href="http://www.taobao.com" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  @click.prevent.once="func">首次不可以访问到淘宝网</a>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func:function(){
    alert('淘宝网！！！')
}
    }
})
    </script>
</body>
</html>

运行结果：

我们看到点击第一个链接的时候，就可以弹出对话框，只要确定，就可以跳转到淘宝网，因为单击事件和超链接时间单击跳转时间都已经被执行！

点击第二个长链接的时候，只是弹出了对话框，但是没有跳转到淘宝网，每一次点击都一样，因为在程序中已经给到click的单击事件增加了一个prevent事件修饰符，阻止了超链接的默认单击跳转事件；

点击第三个超链接的时候，在第一次的时候，只是弹出了对话框，没有跳转到淘宝，而第二次点击的时候，就可以跳转到淘宝网了，因为第三个链接添加了.once，事件只能发生一次触发事件。

5、键盘事件修饰符

键盘修饰符可以使用键码，也可以使用键字符，方向键的上下左右用.up、.down、.left、.right;delete键用于捕获“删除”和“退格”键等等。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<input type="text" @keyup="func ">
<input type="text" @keyup.enter="func">
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func:function(){
console.log('按键按下了！')
}
    }
})
    </script>
</body>
</html>

运行结果：

我们可以看到，第一个框输入数字，每一个字符都可以触发keyup事件；第二个框的时候，输入字符不能触发keyup事件，只有按下回车键的时候才能被触发，函数才能被执行！

6、鼠标事件修饰符

鼠标事件修饰符的时候，鼠标的左中右三个键分别是.left、.middle、.right,这个时间修饰符很简单，我们直接通过代码程序来说明。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>数据双向绑定</title>
</head>
<body>
    <div id="app">
<button @click.left.prevent="func">左键触发</button>
    </div>
    <script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
var vm = new Vue({
    el:'#app',
    methods:{
func(){
alert('左键触发！');
}
    }
})
    </script>
</body>
</html>

运行结果：

当我们在按钮上面通过单击左键，按钮的click事件救护被触发func函数执行，弹出对话框，在绑定click事件的时候增加的事件修饰符，.prevent是用来阻止右键的时候调用系统菜单的默认事件。

到此这篇关于Vue快速理解事件绑定是什么的文章就介绍到这了,更多相关Vue事件绑定内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: Vue快速理解事件绑定是什么

本文链接: https://lsjlt.com/news/166180.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue快速理解事件绑定是什么
    目录一、监听事件二、事件修饰符1、stop修饰符阻止事件冒泡2、capture修饰符3、self修饰符4、prevent修饰符5、键盘事件修饰符6、鼠标事件修饰符一、监听事件 监听事...
    99+
    2024-04-02
  • vue中双向事件绑定的原理是什么
    今天就跟大家聊聊有关vue中双向事件绑定的原理是什么，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。与js或者jquery直接改变操作dom不同，vue使用v-model实现数据的双向...
    99+
    2023-06-20
  • Vue中的事件绑定与解绑方式
    目录事件绑定基础知识使用场景注意事项v-on 绑定事件语法实例$ref绑定事件语法实例事件解绑语法实例 总结事件绑定 基础知识 使用场景 子组件==>父组件传数据在父...
    99+
    2022-11-13
    Vue 事件绑定 Vue 事件解绑 Vue 事件
  • 一文详解Vue-组件自定义事件(绑定和解绑)
    目录组件自定义事件(绑定)1 编写案例2 props实现3 自定义事件实现方式14 自定义事件实现方式25 只能触发一次事件6 多个参数传递组件自定义事件(解绑)1 解绑一个事件2 ...
    99+
    2023-05-18
    Vue-组件自定义事件 Vue-组件自定义 Vue-组件
  • jquery绑定事件指的是什么
    本篇文章和大家了解一下jquery绑定事件指的是什么。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 在jquery中，绑定事件的意思是将普通的时间event绑...
    99+
    2024-04-02
  • Vue事件处理函数如何绑定
    这篇文章主要介绍“Vue事件处理函数如何绑定”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue事件处理函数如何绑定”文章能帮助大家解决问题。在 JS 中「事件」是不需要绑定的，浏览器自带了许多的事...
    99+
    2023-07-05
  • javascript绑定事件的方法是什么
    本篇内容介绍了“javascript绑定事件的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！绑定...
    99+
    2024-04-02
  • jquery绑定事件的作用是什么
    本篇内容介绍了“jquery绑定事件的作用是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！jquery绑定事件的作用：将普通的事件eve...
    99+
    2023-07-05
  • Vue 事件处理函数的绑定示例详解
    目录正文Vue 的事件处理绑定事件修饰符按键修饰符Vue 为什么会在 HTML 中监听事件？正文 在 JS 中「事件」是不需要绑定的，浏览器自带了许多的事件，每个事件都可以去绑定「...
    99+
    2023-02-23
    Vue 事件处理函数绑定 Vue 函数绑定
  • vue中怎么实现事件绑定
    本篇文章为大家展示了vue中怎么实现事件绑定，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。一、在vue中，绑定事件，用v-on:事件类型， 如绑定一个点击事件， 我...
    99+
    2024-04-02
  • Vue之表单事件数据绑定详解
    <body> <div id="root"> <form action="" @submit.prevent="demo"...
    99+
    2024-04-02
  • Vue组件上的v-model双向绑定原理是什么
    本篇内容主要讲解“Vue组件上的v-model双向绑定原理是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue组件上的v-model双向绑定原理是什么”吧!组件上的v-model原理v-m...
    99+
    2023-06-30
  • jQuery中on绑定的事件怎么解绑
    这篇文章主要介绍了jQuery中on绑定的事件怎么解绑的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jQuery中on绑定的事件怎么解绑文章都会有所收获，下面我们一起来看看吧。解绑单个事件在jQuery中，我们...
    99+
    2023-07-05
  • javascript怎么解除绑定事件
    小编给大家分享一下javascript怎么解除绑定事件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！方法：1、使用“对象名.onclick=null”语句；2、使...
    99+
    2023-06-14
  • jquery绑定事件有什么作用
    本教程操作环境：windows7系统、jquery3.6版本、Dell G3电脑。什么是事件？页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。选取单选按钮点击元素在事件中...
    99+
    2023-05-14
    jquery 事件绑定
  • vue怎么给自定义的组件绑定点击事件
    这篇文章主要介绍“vue怎么给自定义的组件绑定点击事件”，在日常操作中，相信很多人在vue怎么给自定义的组件绑定点击事件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue怎么给自定义的组件绑定点击事件”的疑...
    99+
    2023-06-30
  • Vue数据与事件绑定以及Class和Style的绑定详细讲解
    目录一、Vue的数据绑定二、Vue的事件绑定三、Class和Style的绑定一、Vue的数据绑定 1. 单向数据绑定：将Model绑定到View上，当通过JavaScript代码改变...
    99+
    2023-01-14
    Vue数据绑定 Vue事件绑定 Vue Class和Style绑定
  • Vue的数据及事件绑定和filter过滤器的方法是什么
    本篇内容介绍了“Vue的数据及事件绑定和filter过滤器的方法是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Vue数据绑定单向绑定将...
    99+
    2023-06-26
  • Vue组件中的自定义事件是什么
    小编给大家分享一下Vue组件中的自定义事件是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！主要介绍组件的自定义事件的概念，使用等。何为组件自定义事件：组件自定...
    99+
    2023-06-29
  • vue innerHTML 绑定单击事件不生效的解决
    目录vue innerHTML 绑定单击事件不生效原代码最终解决方法vue动态拼接innerHTML时添加点击事件，并在点击事件中调用vue方法场景实现总结vue innerHTML...
    99+
    2023-01-28
    vue innerHTML 绑定单击事件不生效 vue innerHTML事件
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作