v-on基础元素绑定事件v-on指令的作用是：为元素绑定事件事件名不需要写on指令可以简写为@绑定的方法定义在me

v-on指令的作用是：为元素绑定事件

事件名不需要写on

指令可以简写为@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中的数据

鼠标点击事件：@click

鼠标引入事件：@monseenter

鼠标双击事件：@dblclick

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="v-on指令" v-on:click="doIt" />
			<input type="button" value="v-on简写" @click="doIt" />
			<input type="button" value="双击事件" @dblclick="doIt" />
			<h2 @click="changefood">{{ food }}</h2>
		</div>
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:'#app',
				data:{
					food:"西红柿炒鸡蛋"
				},
				methods:{
					doIt:function(){
						alert("IT行业")
					},
					changefood:function(){
						console.log(this.food);
						this.food+="挺好吃的"
					}
				}
			})
		</script>
	</body>
</html>

v-on基础 元素绑定事件

v-on基础元素绑定事件