Tracy 小笔记 Vue - 事件

v-on 事件监听

• v-on 绑定事件监听
  缩写 @
• v-on 函数参数
  • 在事件监听的时候： 如果函数没有参数， 那么调用的时候可以不加括号, 也可以加括号
    如 @click="add"
    add(){...}
  • 如果函数有参数，我们调用的时候加写空括号，那么这个参数的值是 undefind
    如 @click="add()"
    add(canShu){...}
  • 如果函数有参数，我们调用的时候不写括号，那么这个参数的值是 event
    如 @click="add"
    add(event){...}
    既在调用函数省略了小括号，但是方法本身需要一个参数的。这个时候 Vue 会默认将浏览器生成的 event 事件对象作为参数传入到方法中
  • 方法定义时，我们需要 event 对象，又要其他参数。 在调用方法时，要手动设置浏览器事件参数为 $event
    如 @click="add(123, $event)"
    add(number, event){console.log(number, event);}
• v-on 修饰符
  • .stop 阻止事件冒泡相当于调用 event.stopPropagation()
    @click.stop="btnClick"
  • .prevent 阻止默认事件 相当于调用 event.preventDefault()
    比如说 form 的 submit 事件会自动给 action 指定的页面提交，这样我们可以自己定义一些提交方式
    @click.prevent="btnClick"
  • .{keyCode|keyAlias} 只当事件是从特定键触发时才触发回调
    也就是监听某个键盘键帽的点击
    @keyup="keyUp" 一般我们监听的都是 keyup 而不是 keydown
    监听回车 @keyup.enter="keyUp"
  • .native 监听组件根元素的原生事件
    是用在自定义组件上的，我们在组件上直接添加事件是监听不到的 比如组件叫 cpn <cpn @click="监听不到">
    cpn <cpn @click.native="监听到">
  • .once 只触发一次回调
    点击一次之后再点击也不再执行函数了
    @click.once="这个不常用"
• 单击事件
  • v-on:click="add()"
  • @click="add()"
    @click 是 v-on:click 的语法糖
    语法糖其实就是一种简写
    methods: { add: function() { this.counter++; } }