Vue笔记：v-on

最新推荐文章于 2026-04-24 08:22:21 发布

原创最新推荐文章于 2026-04-24 08:22:21 发布 · 155 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

vue 专栏收录该内容

17 篇文章

订阅专栏

Vue、Vue.js笔记

v-on的参数问题

定义方法时省略了小括号，但方法本身是需要一个参数时，Vue会默认将浏览器自动生成的event时间对象作为参数传入。

<div id="app">
			<button @click="btnClick">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{},
        methods:{
            btnClick:function(e){
                console.log(e)
            }
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bkjQ45zj-1591944837372)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200611162017143.png)]

方法定义时，需要event对象，同时又要其他参数：

<div id="app">
    <button @click="btnClick('按钮3',$event)">按钮</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
        },
        methods:{
            btnClick:function(str,e){
                console.log(str)
                console.log(e)
            }
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNCk6gnU-1591944837384)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200611162547385.png)]

v-on的修饰

stop的使用

<div id="app">
    <div @click="divClick">
    	div
		<button @click="btnClick">按钮</button>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
        },
        methods:{
            btnClick:function(){
                console.log("btnClick");
            },
            divClick:function(){
                console.log("divClick");
            }
        }
    })
</script>

当点击按钮时会有两个点击事件函数被调用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LOcaini5-1591944837391)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200611163443550.png)]

加入stop修饰符后：

<div @click="divClick">
    div
    <button @click.stop="btnClick">按钮</button>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojZJkdw5-1591944837401)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200611164001644.png)]

ketCode监听

监听键盘的键帽

<input type="text" @keyup.enter="keyup" />//.enter表示当按下回车键并松开后，调用keyup函数

	keyup:function(){
						console.log("enter");
					}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jD9nO0dB-1591944837407)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200611164950109.png)]

once 只触发一次回调

<input type="text" placeholder="确定" @keyup.once="keyup" />

keyup:function(){
	console.log("sure");
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y9EM8ALP-1591944837413)(C:\Users\93221\AppData\Roaming\Typora\typora-user-images\image-20200611165617321.png)]


```javascript
keyup:function(){
	console.log("sure");
}

[外链图片转存中…(img-y9EM8ALP-1591944837413)]