我们可以用 v-on 指令绑定一个事件监听器，通过它调用我们 Vue 实例中定义的方法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <button @click="counter += 1">{{counter}}</button> <button v-on:click="cl">{{message}}</button> <button @click="say('hi')">内联语句</button> </div> <script> var demo = new Vue({ el:'#demo', data:{ message: "hello", counter:0,
test:'' }, methods:{ cl(){ this.message = this.message + ' vue!'; },
say(message){
this.test = message;
alert(this.test);
},
} }) </script> </body> </html>
事件修饰符
- stop 阻止冒泡
-
prevent 阻止默认事件
-
capture 使用事件捕获模式
-
self 只在当前元素本身触发
-
once 只触发一次
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <button v-on:click="cl">{{message1}}</button> <button v-on:click.once="c2">{{message2}}</button> <a href="http://cnblogs.com" target="_blank">普通链接</a> <a @click.prevent href="http://cnblogs.com" target="_blank">取消默认行为</a> </div> <script> var demo = new Vue({ el:'#demo', data:{ message1: "hello", message2: "hello", counter:0, }, methods:{ cl(){ this.message1 = this.message1 + ' vue!'; }, c2(){ this.message2 = this.message2 + ' vue!'; }, } }) </script> </body> </html>
需要注意的是，使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。
鼠标修饰符
-
left 左键
-
right 右键
-
middle 滚轮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <button @mouseup.right="right" @mouseup.middle="middle" @mouseup.left="left">{{message}} </div> <script> var demo = new Vue({ el:'#demo', data:{ message: "hello", text:'点我' }, methods:{ left(){ this.message = 'left' }, right(){ this.message = 'right' }, middle(){ this.message = 'middle' }, } }) </script> </body> </html>
分别点击鼠标左键，右键和滚轮时，会触发不同的事件：
键值修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符。
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <button v-on:keyup.enter="enter">{{message}}<br> <button @keyup.tab="tab">{{message}}<br> <button @keyup="show($event)">{{message}}<br> </div> <script> var demo = new Vue({ el:'#demo', data:{ message: "hello", }, methods:{ enter(){ this.message = 'enter' }, tab(){ this.message = 'tab' }, show(e){ this.message = e.keyCode } } }) </script> </body> </html>
表单事件
在进行表单提交时，页面会刷新，导致我们绑定的表单提交事件执行出问题，会避免刷新，我们需要使用阻止修饰符。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="./vue.js"></script> </head> <body> <div id="demo"> <form v-on:submit.prevent="onSubmit"> <input type="text"><br /> <input type="submit" value="提交"> </form> </div> <script> var demo = new Vue({ el:'#demo', data:{ message: "hello", }, methods:{ onSubmit(){ alert('提交') }, } }) </script> </body> </html>
