vue: 事件的绑定 v-on-优快云博客

本文详细介绍了Vue.js中v-on指令的基础使用方法，包括如何绑定点击事件、传递参数、使用事件对象、阻止事件冒泡、取消默认事件以及按键修饰符的应用。通过实例展示了如何在Vue组件中有效地管理和响应用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-on 基础使用方法

        <div id="app">
   <button v-on:click = "increase">点击我</button>
   <p>{{ count }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
        count : 0,
    },
    methods : {
        increase : function() {
            this.count++;
        },
</script>

事件对象:

函数传参:

函数和函数执行模式是一样的，所有我们可以用函数执行模式传参。

传事件对象要使用$event

        <div id="app">
    <button v-on:click = "increase(10, $event)">点击我</button>
    <!-- function中的事件对象: $event -->
    <p>{{ count }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el : "#app",
        data : {
            count : 0,
    },
    methods : {
        increase : function(step, e) {
            console.log(e)
            this.count += step;
        },
    }
    })
</script>

阻止事件冒泡

事件修饰符 v-on:mousemove.stop = e.stopPropagation()

        <div id="app">
    <p v-on:mousemove = "updateXy">
            输出当前鼠标的x:{{ x }}和y:{{ y }}的值<br>
    <!-- <span v-on:mousemove = "stop">我不想获取x和y的值了</span> -->

    <!-- 事件修饰符 -->
    <span v-on:mousemove.stop.prevent>我不想获取x和y的值了
        
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 new Vue({
     el : "#app",
     data : {
         x : 0,
         y : 0,
     },
     methods : {
         updateXy : function(e) {
         // 原生事件会自动传入事件对象
         this.x = e.clientX;
         this.y = e.clientY;
                },

     // stop : function(e) {// 上面函数中没有传值，默认使用父亲的值
     //     e.stopPropagation()// 阻止事件冒泡
     // }
     
     }
 })
</script>

事件修饰符 v-on:click.prevent = "",取消默认事件

        <a href="https://www.baidu.com" v-on:click.prevent = "">百度</a>

事件修饰符可以连续使用？没有发现。可能是事件的不同吧

        <p v-on:mousemove = "updateXy">
    <a href="https://www.taobao.com" v-on:mousemove.stop v-on:click.prevent>淘宝，我喜欢</a>
    <a href="https://www.taobao.com" v-on:click>淘宝</a>
</p>
<script>
 new Vue({
     el : "#app",
     data : {
         x : 0,
         y : 0,
     },
     methods : {
         updateXy : function(e) {
         // 原生事件会自动传入事件对象
         this.x = e.clientX;
         this.y = e.clientY;
                },
     }
 })
</script>

按键修饰符

以前使用e.whick = 13来判断按键位置逻辑，现在直接key.enter及可

        <div id="app">
    <!-- <input type="text" v-on:keyup = "input"> -->
    <input type="text" v-on:keyup.enter = "input">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
 new Vue({
     el : "#app",
     methods : {
         input : function(e) {
             alert("input")

             // if(e.which == 13) {
             //           alert("已提交")
             //       }

             }
         }
      })
</script>