<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>