Vue学习—事件处理器

一、监听事件

可使用v-on指令监听DOM事件来触发JavaScript代码。

<div id="example-1"> <button v-on:click="count+=1">增加1</button> <p>这个按钮被点击了{{count}}次</p> </div> var example1=new Vue({ el:"#example-1", data:{ counter:0 } });

二、方法事件处理器

在v-on中指定一个方法来调用。

<div id="example-2"> <button v-on:click="greet">Greet</button> </div> var example2=new Vue({ el:"#example-2", data:{ name:'Vue.js' }, methods:{ greet:funciton(event){ alert('Hello'+this.name+'!') alert(event.target.tagName) } } }) example2.greet()

三、内联处理器方法

除了直接绑定到一个方法，也可以使用内联JavaScript语句（在方法中传入参数）：

<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> new Vue({ el:"#example-3", methods:{ say:function(message){ alert(message) } } })

需要在内联语句处理器中访问原生DOM事件。可以使用特殊变量$event把它传入方法：

<button v-on:click="warn('test',$event)">Submit</button> methods:{ warn:function(message,event){ if(event) event.preventDefault() alert(message) } }

四、事件修饰符

<!-- 阻止单击事件冒泡 --> <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> <!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a>

五、按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">

除了编码之外，Vue为按键定义了别名。