Vue学习（五）——v-on指令

最新推荐文章于 2024-08-27 14:03:39 发布
最新推荐文章于 2024-08-27 14:03:39 发布
阅读量677 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45927758/article/details/108932184
版权
本文详细介绍了Vue.js中的事件处理，包括v-on的语法糖、事件监听传参、事件修饰符的使用，如.stop防止冒泡、.prevent阻止默认行为以及.keyup.enter监听键盘回车等，展示了如何在实际开发中灵活应用这些特性。
摘要由CSDN通过智能技术生成

1.v-on语法糖

v-on:click="函数名"，可以简写为@click="函数名"。

2.v-on事件监听传参

其他情况下，如果函数需要参数，但是我们并没有传参，那么该参数就是undefined类型，但是在Vue中，我们在事件定义时，写方法时省略了小括号，但是方法本身是需要一个参数的（并且只需要一个参数），这个时候，Vue会默认将浏览器生产的event事件对象作为参数传入方法中，比如鼠标点击的数据。

如果我们想要在有参数的同时传入event事件对象，我们可以传入：$event,这样就可以得到浏览器参数了。而且我们也可以传入Vue对象中的data对象中的变量。

而对于没有参数的事件，我们可以直接调用事件函数，不需要小括号。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <button @click="func1">不用参数</button>
        <button @click="func2">有参不传</button>
        <button @click="func3('TES牛逼',$event)">多参和浏览器数据</button>
        <button @click="func4(name)">data数据传参</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed: [false, false, false, false],
                name:"涂博闻"

            },
            computed: {
            },
            methods: {
                func1(){
                    console.log("不需要参数");
                },
                func2(e){
                    console.log("有参不传");
                    console.log(e);
                },
                func3(a,e){
                    console.log("多参和浏览器数据");
                    console.log(a);
                    console.log(e);
                },
                func4(x){
                    console.log("data数据传参");
                    console.log("我的名字是"+x);
                }
            }
        })
    </script>
</body>

</html>

3.v-on的修饰符

（1）.stop：关闭事件的冒泡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <div @click="divClick">
            <button @click="butClick">
                点击
            </button>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed: [false, false, false, false],
                name:"涂博闻"

            },
            computed: {
            },
            methods: {
                divClick(){
                    console.log("事件冒泡");
                },
                butClick(){
                    console.log("点击事件");
                }
            }
        })
    </script>
</body>

</html>

使用.stop关闭事件的冒泡

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <div @click="divClick">
            <button @click.stop="butClick">
                点击
            </button>
        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed: [false, false, false, false],
                name:"涂博闻"

            },
            computed: {
            },
            methods: {
                divClick(){
                    console.log("事件冒泡");
                },
                butClick(){
                    console.log("点击事件");
                }
            }
        })
    </script>
</body>

</html>

 

（2）.prevent阻止默认行为

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <div @click="divClick">
            <button @click.stop="butClick">
                点击
            </button>
        </div>

        <form action="TES">
            <input type="submit" value="提交" @click="submitClick">
        </form>
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed: [false, false, false, false],
                name:"涂博闻"

            },
            computed: {
            },
            methods: {
                divClick(){
                    console.log("事件冒泡");
                },
                butClick(){
                    console.log("点击事件");
                },
                submitClick(){
                    console.log("关闭默认事件，没有提交");
                }
            }
        })
    </script>
</body>

</html>

我没有向上面加修饰符时

加入修饰符，阻止了默认提交的行为

（3）监听某个键盘的按键

举个例子，@keyup.enter="xxx"就是监听键盘输入的回车，当我按下回车时就会触发事件。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="jdg">
        <!--
        <ul>
            <li v-for="it in S10" v-on:click="">{{it}}</li>
        </ul>
        -->
        <input type="text" @keyup.enter="KeyUp">
    </div>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#jdg',
            data: {
                S10: ['JDG', 'TES', 'SN', 'LGD'],
                beRed: [false, false, false, false],
                name:"涂博闻"

            },
            computed: {
            },
            methods: {
                KeyUp(){
                    console.log("我按下了ENTER");
                }
            }
        })
    </script>
</body>

</html>

（4）.once可以使得事件监听只会触发一次回调函数

 

秃头的毛睿
关注
vue中的v-on
weixin_45586870的博客
02-07 546
一、简介 v-on可以简写成@ 它是绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。 二、案例 ①index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="v
vue——v-on指令的常用修饰符
weixin_44649210的博客
11-02 941
stop 作用： 阻止事件冒泡 <body> <div id="father" @click="bubbling('father')" style="background-color: red;"> <button id="son" @click="bubbling('son')">点击</button> </div> <script> let vm = new Vue({
Vue中的v-on
m0_72694993的博客
09-05 5346
1.我们解决这个事件冒泡的第一种方法是通过在event(事件)下的stopPropagation()方法,值得注意的是我们是点击text2区域才出现这种情况的，所以我们应该阻止text2冒泡，应该在text2方法下加入改代码；3.当我们在@keyup后边加上.enter的时候，即@keyup.enter=""，只有再点击回车的时候才会执行绑定的函数，也可以用enter的键盘码 即用@keyup.81和enter效果相同。2.@:click="函数名字"是v-on:click的简写模式，效果和用法是一样的；
vue常用事件之v-on:click 以及事件对象，事件冒泡，事件默认行为
最新发布
qq_35485206的博客
08-27 437
目录1.监听事件2.事件处理方法3.带参数的时间绑定方法：4.内联处理器中的方法5.事件对象6.事件冒泡7.阻止默认行为：8.其他事件修饰符补充：原生JS阻止冒泡其实v-on后面跟的不止是click事件也可以是其他的事件，用法均相似。比如：v-on:click/mouseout/mouseover/mousedown......
Vuejs——（5）v-on
qq20004604的博客
09-02 4844
资料来于官方文档： http://cn.vuejs.org/guide/events.html 本文是在官方文档的基础上，更加细致的说明，代码更多更全。 简单来说，更适合新手阅读 （二十二）方法处理器 ①v-on的标准用法 用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里 会默认传一个参数，代码如下： 点击 methods
vue常用指令(v-on)
CAUC_lin的博客
01-23 1416
如图，点击会修改数据，导致dom视图上的数据同步更新。
Vue学习系列（七）：Vue的v-on指令
千里之行，始于足下
06-07 262
在Vue中，v-开头的指定都是和Vue相关的，其中v-bind是用来绑定标签属性的，而v-on是用来绑定DOM事件的，比如点击，提交等等DOM事件。
VUE学习总结——v-model使用
砳缝的渴望
08-06 207
v-model多在input的下拉框、单选按钮、复选框中的应用 v-model用于表单数据的双向绑定，其实它就是一个语法糖，这个背后就做了两个操作：   1. v-bind绑定一个value属性   2. v-on指令给当前元素绑定input事件 自定义组件使用v-model，应该有以下操作： 1. 接收一个value prop 2. 触发input事件，并传入新值 在原生表单元素中： 1 <input v-model="inputValue">
Vue学习笔记 —— v-model
weixin_43340295的博客
08-29 160
v-model vue中、这类表单元素，使用v-model实现这些标签数据的双向绑定，vue会根据控件类型自动选取正确的方法更新元素 v-mode的本质是一个语法糖。例： <input v-model="test"> 等同于： <input :value="test" @input="test = $event.target.value"> 其中，@input是对输入事件的一个监听，:value="test"是将数据放入到input。 那么这句代码的意思就是，先将变量test绑定
Vue学习笔记 —— 指令（v-on、v-pre、v-once）与事件修饰符
weixin_43340295的博客
08-29 916
v-on指令 作用：对页面的事件进行绑定监听 语法：v-on:事件类型=“事件处理的函数” //如果时间直接绑定函数名称， //那么默认会传递事件的对象作为函数的第一个参数event <button type="button" v-on:click="handle(123)">点击</button> //在vue中，想传入自定义的实参值，又想获取事件对象， //可以借助$event关键字，它是vue框架内部专门指向事件对象的关键字 <button type="button"
简易Vue学习框架——wx-log-view使用教程
- Vue.js提供了多种内置指令，如v-bind、v-model、v-on等，用于处理DOM操作和数据交互。 - 过渡效果可以通过内置的过渡类名或第三方库（如vue-transition）实现，让组件状态切换时具有更平滑的动画效果。 5. Vue....
Vue - v-on
kaven
11-05 798
Vue学习（三）- v-on v-on 使用 v-on是用于绑定事件监听器。事件类型由参数指定，表达式可以是一个方法的名字或一个内联语句。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-on</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&lt
vue里面v-on的使用
yamili的博客
03-23 5587
首先我们看看v-on的简单使用： 按钮1是将事件写在表达式里，按钮2是将事件添加到methods中定义的函数。 v-on的语法糖写法： v-on的参数： 当通过methods中定义的方法，以供@cilck调用时，需要注意参数问题。 情况一：如果该方法不需要额外参数，那么方法后的()可以不加，如果方法本身有一个参数没那么会默认将原生事件event参数传递进去。 情况二：如果需要同时掺入某个参数...
Vue中v-on指令详解
qq_41359998的博客
08-08 1465
Vue中v-on指令详解 v-on 监听事件 v-on可以简写为@ 程序中的事件包括Vue事件、前端页面本身的一些事件！我们这里的click是vue的时间，可以绑定到Vue中的methods中的方法事件。因此写为v-on:click，不写为之前的on-click demo1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titl
Vue事件处理：v-on 指令
pan_junbiao的博客
08-21 689
在 Vue.js 中，事件处理是一个很重要的环节，可以使用v-on 指令对 DOM 事件进行监听。该指令通常在模板中直接使用，在触发事件时执行相应的 JavaScript 代码。在 HTML 元素中使用v-on 指令时，v-on 后面可以是所有的原生事件名称。与事件绑定的方法可以传入原生 DOM 事件对象，将 event 作为参数进行传递。
深入浅出Vue【Day3】v-on修饰符以及自定义指令相关知识点总结
零小唬的博客
09-23 679
📌Vue.js 专栏正在持续更新中，案例的原理图解析、各种模块分析💖这里都有哦，同时也欢迎大家订阅专栏，获取更多详细信息哦✊✊✊ ✨个人主页：零小唬的博客主页 🥂欢迎大家 👍点赞 📨评论 🔔收藏 ✨作者简介：20级计算机专业学生一枚，来自宁夏，可能会去做大前端，目前还在努力学习并记录博客中🧸 🎀本系列专栏: Vue.js 💕希望本文对你在学习前端的过程中有所帮助，如有不足请指正一起学习，一起进步🥇 ⛪座右铭：只要你还愿意努力，世界一定会给你惊喜 v-on指令 1、什么是v-on指令？ v-on
v-on语法
lianchen728的博客
01-09 256
v-on参数 在前端开发过程中，我们呢经常和用户交互，比如点击，键盘等事件，在Vue中监听事件用v-on指令。 <div id="app"> <h2>{{counter}}</h2> <button v-on:click="increment">+</button> <button v-on:click="decrement">-</button> <!-- 语法糖写法 -->
Vue指令之v-on
ShadyPi的IT笔记
12-13 1842
v-on指令用于注册事件，作用是添加监听与提供事件触发后对应的处理函数。
vue指令之v-on
duansamve的博客
04-07 1828
main.js：var app = new Vue({ el: '#app', methods: { onClick: function(){ console.log("clicked!"); }, onEnter: function(){ console.log("mouse ente...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值