<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>on</title> </head> <body> <div id="on"> <span>这个按钮被点击了 {{ counter }} 次。</span><br> <button v-on:click="counter += 1">增加 1</button> <br><br> <button v-on:click="say('hi')">Say hi</button> <br><br> <button v-on:click="greet">Greet</button> <!--事件修饰符--> <a v-on:click.stop="doThis"></a> <!-- 阻止单击事件冒泡 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 提交事件不再重载页面 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 修饰符可以串联 --> <form v-on:submit.prevent></form> <!-- 只有修饰符 --> <div v-on:click.capture="doThis"></div> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.self="doThat"></div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.once="doThis"></div> <!--单击事件只触发一次--> <!--按键修饰符--> <input v-on:keyup.13="submit" value="submit"> <input v-on:keyup.enter="submit" value="submit"> <!-- 只有在 keyCode 是 13 时,也就是“enter”时调用 vm.submit() --> <!--enter + Click --> <!--全部的按键别名：--> <!--.enter--> <!--.tab--> <!--.delete (捕获 “删除” 和 “退格” 键)--> <!--.esc--> <!--.space--> <!--.up--> <!--.down--> <!--.left--> <!--.right--> <!--.ctrl--> <!--.alt--> <!--.shift--> <!--.meta--> <input @keyup.alt.67="clear" value="2"> <!-- Alt + C + Click--> </div> <script src="js/vue.js"></script> <script> // 通过全局config.keyCodes 对象自定义按键修饰符别名：可以使用 v-on:keyup.f1 // Vue.config.keyCodes.f1 = 112 var vm = new Vue({ el:"#on", data: { counter: 0, name:"vue.js" }, methods:{ say: function (message) { alert(message); }, greet:function(event){ alert('Hello ' + this.name + '!'); // `event` 是原生 DOM 事件 alert(event.target.tagName); }, submit:function(){ alert("submit"); }, clear:function(){ alert("clear"); } } }); </script> </body> </html>