<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@2.6.12/dist/vue.js"></script>
<script>
// v-on 指令的作用是：为元素绑定事件 简写为 @ 格式如下
// v-on:click="事件名称" 或者 @click="事件名称"
// 绑定的方法写在 methods属性中
// 语法糖：就是简写
var app = new Vue({
el: '#app',
data: {
food: '羊肉串'
},
methods: {
doit: function() {
alert('做IT 月薪过万 ');
},
changeFood: function() {
this.food += '好吃';
}
}
})
</script>
</body>