Vue事件绑定（v-on用法）

青青草原小魔王

已于 2022-08-01 09:25:14 修改

阅读量4.2k

点赞数 17

分类专栏： VUE 文章标签： es6 javascript 前端 html5 vue.js

于 2022-07-28 23:45:00 首次发布

本文链接：https://blog.youkuaiyun.com/qq_65715980/article/details/126039986

版权

本文详细介绍了Vue中v-on的使用，包括基本形式、参数传递、修饰词的运用，如阻止冒泡、事件捕获等，并通过简易计算器案例进行实践演示。

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

一、v-on的基本使用

1.基本形式

两个点击按钮所执行的操作的相同的，1和2的区别在于，1的简写形式就是2。

	<div id="app">
		<button v-on:click="change()">点击</button>  <!-- 1 -->
		 <button @click="change2()">点击</button> <!-- 2 -->
	</div>
	<script>
		const vm = new Vue({
			el: '#app',
			data() {
				return {

				}
			},
			methods: {
				change() {
					console.log('1111');
				},change2() {
					console.log('2222');
				}
			}
		})
	</script>

2.案列展示

通过点击'+','-'按钮实行显示数字的增减。

 <div id="app">
        <button @click="sum++">+</button>
        <div>{
  {sum}}</div>
        <button @click="sum--">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    sum: 0,
                }
            },
        })
    </script>