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 修饰符来指定监听原生中的事件，而不是组件自定义事件