【Vue】基础系列（三）事件处理

一、事件的基本使用

1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；

   <button @click="showInfo">点我提示信息</button>
   <button @click="showInfo">点我提示信息</button>

2. 事件的回调需要配置在methods对象中，最终会在vm上；
3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5. @click="demo" 和 @click="demo($event)" 效果一致，但后者可以传参；

   <button @click="showInfo1">点我提示信息1（不传参）</button>
   <button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
   

   const vm = new Vue({
   	el:'#root',
   	data:{
   		name:'饭啊饭',
   	},
   	methods:{
   		showInfo1(event){
   			alert('同学你好！')
   		},
   		showInfo2(event,number){
   			console.log(event,number)
   			alert('同学你好！！')
   		}
   	}
   })
   

二、事件修饰符

1. prevent：阻止默认事件（常用）；

   <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>

2. stop：阻止事件冒泡（常用）；

   <div class="demo1" @click="showInfo">
   	<button @click.stop="showInfo">点我提示信息</button>

3. once：事件只触发一次（常用）；

   <button @click.once="showInfo">点我提示信息</button>

4. capture：使用事件的捕获模式；

   <div class="box1" @click.capture="showMsg(1)">
   	div1
   	<div class="box2" @click="showMsg(2)">
   		div2
   	</div>
   </div>

5. self：只有event.target是当前操作的元素时才触发事件；

   <div class="demo1" @click.self="showInfo">
   	<button @click="showInfo">点我提示信息</button>
   </div>

6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

   <ul @wheel.passive="demo" class="list">
   	<li>1</li>
   	<li>2</li>
   	<li>3</li>
   	<li>4</li>
   </ul>

7. 文件的Vue对象代码。

   new Vue({
       el:'#root',
       data:{
   	name:'饭啊饭'
       },
       methods:{
           showInfo(e){
               alert('同学你好！')
           },
           showMsg(msg){
               console.log(msg)
           },
           demo(){
               for (let i = 0; i < 100000; i++) {
                   console.log('#')
               }
               console.log('累坏了')
           }
       }
   }) 
   

三、键盘事件

1. Vue中常用的按键别名：

   回车 => enter
   删除 => delete (捕获“删除”和“退格”键)
   退出 => esc
   空格 => space
   换行 => tab (特殊，必须配合keydown去使用)
   上 => up
   下 => down
   左 => left
   右 => right
   

   <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo">

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）

   <input type="text" placeholder="按下回车提示输入" @keydown.caps-lock="showInfo">   //点击Caps按钮

3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta（以上几种基本够用了）
4. 也可以使用keyCode去指定具体的按键（不推荐）
5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名（不推荐）