v-on(事件处理)

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

猜你喜欢

转载自www.cnblogs.com/zhoubingyan/p/9047266.html