vue随记2 -- 事件处理、事件修饰符、键盘事件

b站教程：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

7. 事件处理

• 事件的绑定形式：v-on：xxx 或者 @xxx

  <div v-on:click = "handleOn"></div>
  <div @click = "handleOn"></div>
  

  知识点：

  1. @click = "handleOn" 和@click = "handleOn($event)" 是一样的，但是后者可以传参。 $event是一个关键字，为当前盒子的属性。没有传参时，默认传$event

     <div @click = "handleOn($event, "www")"></div>
     
     methods:{
         handleOn(event, data){
             console.log(event);//event
             console.log(data);//"www"
         }
     }
     
     

• 事件的配置形式：写在methods对象中，最终会配置在vm上

  <script>
      const vm = new Vue({
          el:'root',
          data:{},
          methods:{
              handleOn(event){
                  console.log(event);
              }
          }
      })
  

  知识点：

  1. 因为methods配置的函数都是vue管理的函数，this的指向是vm，或者是组件的实例对象，因此

  不可以用箭头函数，会导致this的指向不是当前的vm，而是window

  const vm = new Vue({
      el:'root',
      data:{},
      methods:{
          handleOn(event){
              console.log(this);//vm
          },
          handleOn1:(event)=>{
              console.log(this);//window
          },
      }
  })
  

8. 事件修饰符

1. prevent：阻止默认行为 （常用）

   //阻止一些默认行为，比如a标签的跳转行为
   <a href="https://baidu.com" @click.prevent="handleClick"/>
       //点击之后不跳转
   

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

   // handleClick执行俩次
   <div @click="handleClick">
       <div @click="handleClick"></div>
   <div>   
   //只执行 handleClick2
   <div @click="handleClick1">
       <div @click.stop="handleClick2"></div>
   <div>
   

3. once：只执行一次

   //点击都会执行handleClick
   <div @click="handleClick"></div>
   //只点击第一次会执行handleClick
   <div @click.once="handleClick"></div>
   

4. capture: 事件的捕获模式

   //正常情况下， 4>3>2>1
   //capture：加了capture的先执行 :2>4>3>1
   
   <div @click="handleClick1">
       
       <div @click.capture="handleClick2">
       
       	<div @click="handleClick3">
       
       		<div @click="handleClick4"></div>
   
   		<div>  
       </div>
   <div>  
   

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

   //只有点击div时才会触发 handleClick
   <div @click.self="handleClick">
       <button @click="handleClick"></button>
   <div>  
   

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

   //@wheel鼠标滚动时触发（默认行为：滚动条移动）
   
   //输出完100000个“#”，滚动条才会移动
   <div @wheel="handleWheel"> <div>  
   //一旦鼠标滚动，滚动条就进行移动，再开始执行输出 “#”
   <div @wheel.passive="handleWheel"> <div>  
       
   methods:{
           handleWheel(){
               for(let i=0;i<100000; i++){
                   console.log("#");
               }
           },
   }
   

9.键盘事件

1. 键盘事件用法：

   • @事件名.键盘别名="" 或 @事件名.keyCode=""（不建议）
   • 事件有：键盘按下触发（keydown）,键盘按下后离开触发（keyup）

   <input @keydown.enter="showInfo"/>
   <input @keyup.enter="showInfo"/>
   

   • 可以组合使用，同时按下俩个键时触发

     //按下 ctrl+y 时触发     
     <input @keydown.ctrl.y="showInfo"/>
     

2. 常用的键盘别名：

   • 回车：enter
   • 删除：delete（捕获删除和退格键）
   • 退出：esc
   • 空格：space
   • 换行：tab
   • 上：up
   • 下：down
   • 左：left
   • 右：right

3. 其他的键盘别名获取

   • 用按键原始的key值去绑定，注意首字母小写，多个单词拼接的要短横线链接，字母改小写（KeybabCase =》keybab-case）

   • 获取原始key值：

     <input @keyup.enter="showInfo"/>
     methods:{
         showInfo(e){
            	console.log(e.key);//原始key值
         }
     }
     

4. 系统修饰符特殊用法： ctrl, alt,shift,meta

   • 配合keyup使用：按下修饰键的同时，要同时按下其他键，才会触发事件
   • 建议配合keydown进行使用，可以正常触发

5. 自定义按键别名：Vue.config.keyCodes.自定义键名 = 键码 (不推荐)

   <input @keyup.huiche="showInfo"/>
   <script>
       Vue.config.keyCodes.huiche = 13;
   

还有其他的vue笔记，前往 vue随记专栏 查看