vue基础知识-指令（v-on）

v-on

1. 为元素绑定事件
2. 绑定的方法定义在methods属性中
3. 方法内部通过this关键字可以访问定义在data中的数据
4. click dblclick keyup等
5. 传递自定义参数、事件修饰符

<script>
var app = new Vue({    
el:'#app',    
data:{        
	food:"番茄炒蛋"    
	},    
methods:{         
	doIt:function(){            
	alert("可爱！")        
	},        
describeFood:function(){           
 console.log(this.food);            
 this.food+="好吃！"        
 },    
 }
 })
</script>

<div id="app">
 <input type="button" value="点击" v-on:click="doIt">
 <input type="button" value="点击" @click="doIt"> <!--简写-->
 <!--点击food（番茄炒蛋）会执行describeFood，即输出“好吃！”-->
 <h3 @click="describeFood">{{ food }}</h3>
</div>

输出结果

两个点击按钮执行后，会有弹出窗“可爱！”