1.监听事件
v-on:click="msg+=1" (msg是写在data里)
2.方法事件处理器
v-on:click = "jia" (jia是写在methods)
3.内联处理器方法
v-on:click="jia('at')" (jia是写在methods,jia函数带参数)
4.事件修饰符
- .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
>
<!-- 点击事件将只会触发一次 -->
<
a
v-on:click.once
=
"doThis"
></
a
>
5.键值修饰符
v-on:keydown=“”(获取不同键的键值)
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
- .enter
- .tab
- .delete (捕获 “删除” 和 “退格” 键)
- .esc
- .space
- .up
- .down
- .left
- .right