Vue.js -- 事件

Vue.js 事件

1. v-on

在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @

事件： 指令： v-on: / 简写 @
写法：

<组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />

<组件 v-on:事件名称.修饰符="执行的函数或者表达式"/>

注意点：
  1.事件执行的函数，需要在methods中定义
  2.事件绑定时的执行函数，有无小括号都是调用
  3.this: methds对象中的函数
     this指向永远是当前vue示例
  4.事件对象：event
     事件绑定的参数
     * 当执行函数带小括号以及有其他参数时，event需要手动传入！！！
     传入顺序默认是第一个
     模板中的 $event 是规定死的！！！

2. 组件的 methods 选项

在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问

3.通过内联方式绑定事件处理函数

<组件 @事件名称="fn" />

<script>
new Vue({
  ...,
  methods: {
  	fn() {
  		//...	
		}
	}
})
</script>

• 事件绑定函数中的 this 指向组件实例
• 事件绑定函数中的第一个参数默认为 event 对象

<组件 @事件名称="fn('kaikeba', $event)" />

<script>
new Vue({
  ...,
  methods: {
  	fn(name, ev) {
  		//...	
		}
	}
})
</script>

也可以在事件绑定中直接调用函数（并不会立即执行，也是通过事件触发执行的）

• 事件对象需要手动传入，名称为 $event

事件：
指令： v-on: / 简写 @
v-on:事件名称.修饰符 = "执行的函数或者表达式"

注意点：
       1.事件执行的函数，需要在methods中定义
       2.事件绑定时的执行函数，有无小括号都是调用
       3.this: methds对象中的函数 
         this指向永远是当前vue示例
       4.事件对象：event
            事件绑定的参数
        *   当执行函数带小括号以及有其他参数时，event需要手动传入！！！
            传入顺序默认是第一个
            模板中的 $event 是规定死的！！！

4. 事件修饰符

1. 在事件函数中，我们可以通过 ev.preventDefault()、ev.stopPropagation() 来阻止默认行为，阻止冒泡，但是vue 中提供一些更加方便的方式来处理这些问题，这就是事件修饰符
2. 修饰符是由点开头的指令后缀来表示的

4.1 .stop

等同于js中的 event.stopPropagation()，防止事件冒泡。

4.2 .prevent

等同于js中的 event.preventDefault(),用于取消默认事件。

4.3 .capture

与事件冒泡的方向相反，事件捕获由外到内（添加事件侦听器时使用 capture 模式）

4.4 .self

只会触发自己范围内的事件，不包含子元素（只当事件是从侦听器绑定的元素本身触发时才触发回调）

4.5 .once

只会触发一次回调。

4.6.passive

对DOM的默认事件进行性能优化（(2.3.0) 以 { passive: true } 模式添加侦听器）

5. 按键修饰符

vue 还提供了许多按键修饰符

5.1 keyCode

<组件 @keyup.13="fn" />

<input @keyup.13="fn" />

记住所有的keyCode比较困难，所以Vue为最常用的键盘事件提供别名：

5.2 常用键盘事件别名

• .enter：回车键
• .tab：创表键
• .delete：含delete和backspace键
• .esc：返回键
• .space：空格键
• .up：向上键
• .down：向下键
• .left：向左键
• .right：向右键
• .exact：修饰符允许你控制由精确的系统修饰符组合触发的事件。

<input @keyCode.enter="fn" />

6. 鼠标按钮修饰符

2.2.0 新增
.left
.right
.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。

7. 原生事件

自定义组件中可以自定义一些事件，可以通过 .native 修饰符来指定监听原生中的事件，而不是组件自定义事件