<!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>处理事件</title> </head> <body> <div id="box"> <button v-on:click="greet">Greet</button> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ name:'caicai', }, methods:{ greet:function(event){ alert('Hello:'+this.name+'!') alert(event.target.tagName) //target 事件属性可返回事件的目标节点（触发该事件的节点） } } }) </script> </html> --> <!-- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>直接写表达处理式</title> </head> <body> <div id="box"> <button v-on:click="counter+=1">add 1</button> <p>啦啦啦啊{{counter}}啦啦啦</p> </div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ counter:0 } }) </script> </html> <--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>传参数的事件方法</title> </head> <body> <div id="box"> <button v-on:click="say('hi')">say hi</button> <button v-on:click="say('what')">say what</button> <button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button> </div> <!-- 阻止点击事件的冒泡行为 --> <a v-on:click.stop="doThis"></a> <!-- 阻止默认的表单提交 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 事件修饰器可以连用 --> <a v-on:click.stop.prevent="doThat"> <!-- 只需要修饰器，而无需处理方法 --> <form v-on:submit.prevent></form> <!-- 使用 capture 模式--> <div v-on:click.capture="doThis">...</div> <!-- 仅当event.target是自身的时候才执行 --> <!-- 比如，这样写了之后点击子元素就不会执行后续逻辑 --> <div v-on:click.self="doThat">...</div> </body> <script type="text/javascript" src="js/Vue.js"></script> <script type="text/javascript"> new Vue({ el:"#box", data:{ }, methods:{ say:function(message){ alert(message) }, warn: function (message, event) { // 这样我们就可以获得js原生的事件了 //event.stopPropagation() 终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。 alert(message) } } }) </script> </html> </-->