vue的事件处理

一.监听事件

        1.v-on:给dom元素绑定监听事件

        2.语法:

                v-on:事件名='事件处理函数'

                简写

                        @事件名='事件处理函数'

<div id="app">
			<h1 v-on:click="edit">{{msg}}</h1>
			<h1 @click="edit1">{{msg}}</h1>
</div>

           let vm = new Vue({
				el:"#app",
				data:{
					msg:"hello world"
				},
				methods:{
					edit(){
						console.log(this.msg)
						this.msg = "123"
					}
				}
			})

        3.当事件触发时  如果没有传递参数，默认第一个参数为事件对象

           如果设置了传递参数的话，默认使用传递的参数

            获取事件对象:

                        在事件处理函数形参,接收$event对象

            event的作用:

                        解决原生事件对象event被覆盖的问题

<div id="app">
	<h1 @click="edit1($event,890)">{{msg}}</h1>
</div>


	       let vm = new Vue({
				el:"#app",
				data:{
					msg:"hello world"
				},
				methods:{
					edit1(e,a){
						console.log(e,a)
					}
				}
			})

二.事件修饰符

   .stop         阻止冒泡

   .prevent       阻止默认行为

   .capture       以捕获形式触发事件

   .self         当事件源为自身是触发事件

   .once         只执行一次

   .passive       允许默认事件

<!-- 阻止单击事件继续传播 -->
<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>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>


<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

       1. 注意:

                使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

                v-on:click.prevent.self 会阻止所有的点击

                v-on:click.self.prevent 只会阻止对元素自身的点击。

       2.注意:

                不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

三.按键修饰符

   .enter   回车

   .tab     必须配合keydown使用   

    .delete 

    .esc

    .space

    .up

    .down

   .left

    .right

<input type="text" @keyup="add" v-model="msg">

        自定义按键修饰符

                Vue.config.keycodes.huiche=111

<input type="text" @keyup.huiche="add" v-model="msg">

	Vue.config.keyCodes.huiche = 13
			new Vue({
				el:"#app",
				data:{
					msg:"abc"
				},
				methods:{
					add(e){
						console.log(e,this.msg)
					}
				}
			})