可以用v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。用在普通元素上时,只能监听原生 DOM 事件,用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
案例
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 动态事件缩写 (2.6.0+) -->
<button @[event]="doThis"></button>
v-on传值
情况一:methods的方法有参数传值
注意:@click="msg('lhs')"传值时必须加上单引号,不加就传data里的参数
<button @click="msg('lhs')">传值</button>
methods:{
msg(event){
console.log(event);//输出的lhs
}
}
情况二:methods的方法有参数但没有传值
返回的是event(Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态)
<button @click="msg">传值</button>
methods:{
msg(event){
console.log(event);//输出的event
}
}
情况三:methods的方法有参数,传值同时也要event
<button @click="msg('lhs',$event)">传值</button>
methods:{
msg(name,event){
console.log(naem);//lhs
console.log(event);//event
}
}
v-on的事件修饰符
stop:停止冒泡
<div @click="upthis">
aaa
<!-- 阻止事件冒泡 -->
<a v-on:click.stop="doThis"></a>
</div>
prevent:阻止默认行为
<form action='baidu'>
<!-- 提交事件不再重载页面(不会跳转页面) -->
<input @click.prevent="doThat">
</form>
once:只会触发一次
<!-- 点击事件将只会触发一次,防止重复提交 -->
<a v-on:click.once="doThis"></a>
监听某个键盘的键帽
<!-- 键修饰符,键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符,键代码 -->
<input @keyup.13="onEnter">