vue中的事件的属性和方法

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

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

2.this：在vue中methods中的this，永远指向vue实例对象 事件对象：a:如果有其他的参数时，需传递实参$event； b:如果没有其他的参数时，默认为第一个参数

<组件 @事件名称="fn('kaikeba', $event)" /> <script> new Vue({ ..., methods: { fn(name, ev) { //... } } }) </script> <div id="app"> <button @click="fn($event,'你好')">点我啊</button> </div> let app = new Vue({ el:'#app', data:{ val:1 }, methods:{ fn(e,v){ console.log(this.val); this.fn2(); console.log(v); console.log(e); }, fn2(){ console.log("我是嵌套调用的"); } } });

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

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

事件修饰符

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

.stop

.prevent

.capture

.self

.once

.passive

按键修饰符

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

.keyCode

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

.enter

.down

.exact

原生事件

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