vue.js中的事件绑定,使用< v-on:事件名=函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法。
事件绑定方式:
1、 直接在标签中写js方法
<button v-on:click="alert('hi')">执行方法的第一种写法</button>
2、调用method的办法
<button v-on:click="run()">执行方法的第一种写法</button> <button @click="run()">执行方法的 简写 写法</button> export default { data () { }, methods:{ run:function(){ alert('这是一个方法'); } } }
(1)方法传参,方法直接在调用时在方法内传入参数
<button @click="result('111')">执行方法传值111</button> <button @click="result('222')">执行方法传值2222</button>
export default {
data () {
},
methods:{
result:function(val){
alert(val);
}
}
}
事件修饰符
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 --> <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> <!-- click 事件只能点击一次 --> <a v-on:click.once="doThis"></a>
按键修饰符
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta