【学习笔记】14-v-on的基本使用和语法糖

最新推荐文章于 2025-09-27 21:33:21 发布

原创最新推荐文章于 2025-09-27 21:33:21 发布 · 330 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍Vue.js中v-on指令的基本使用方法及其语法糖特性。通过实例演示了如何利用v-on监听按钮点击事件，并实现计数器的增减功能。文章提供了完整的HTML和JavaScript代码，帮助读者快速上手。

v-on的基本使用和语法糖

v-on用于监听某项事件，在以后会经常用到

示例

<div id="app">
	<div>{{counter}}</div>
	<!-- <button type="button" v-on:click="increment">+</button> -->
	<!-- <button type="button" v-on:click="decrement">-</button> -->
	<!-- v-on可以使用语法糖@ -->
	<button type="button" @click="increment">+</button>
	<button type="button" @click="decrement">+</button>
	
</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			counter:0,
		},
		methods:{
			increment(){
				this.counter++
			},
			decrement(){
				this.counter--
			}
		}
	})
</script>