二,vue中的事件处理

    大部分时候数据的变化都是由事件触发的，Vue中事件的绑定通过指令v-on完成,比如我们要添加一个点击事件就要写成v-on:click=" "可以简写为@click=" "当然双引号里面是需要写一个函数的,那么函数应该写在哪里呢?
vue2实现数据的双向绑定使用的是definedProperty,
vue3实现数据的双向绑定使用的是**es6的ProxyAPI **进行代理

    那么函数就要写在一个methods的对象里面

    为什么呢,因为写在data(){}数据里,当我们点击对象时指向的windows对象,而写在methods中的指向的是vue实例。

而现在我们要实现一个单击按钮弹出一个弹窗的函数.如下

 <button v-on:click="alertFn">单击弹出弹窗</button>  
      Vue.createApp({
        //数据
        data(){
          
        },
        //放置各种功能函数
        methods:{
            alertFn(){
                console.log(this);
                alert("弹出一个弹窗")
            }
        }
       }).mount("#app")

methods

现在我们来实现一个每单击1次就增加10px宽度的一个方法,结合前面的v-bind的方法

     <div class="box" :style="{
            width:w+'px'
        }"></div>
     <button v-on:click="Fn">单击增加10px宽度</button>  

 //数据
        data(){
            return{
                w:100
            }
        },
        //放置各种功能函数
        methods:{
            Fn(){
                this.w += 10
            }
        }

例

那么如果我们获取事件对象怎么办呢,如鼠标所在位置,屏幕x轴y轴位置

<button v-on:click="getFn($event)">单击获取事件对象</button>

 getFn(e){
                console.log(e);
            }

例

事件冒泡

 <div class="A" @click="dadFn">
            <div class="B" @click="sunFn"> 

            </div>
        </div>
 methods:{
           dadFn(){
            console.log("父盒子触发");
           },
           sunFn(){
            console.log("子盒子触发");
           }
        }

当我们单击子盒子的时候会同时触发子盒子和父盒子里面的函数,这就是事件冒泡,从里向外,往上触发

冒泡

那么我们不想让他触发父级的事件,所以要用到阻止事件冒泡

 sunFn(e){
            e.stopPropagation()
            console.log("子盒子触发");
           }

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()阻止事件冒泡
那么每次这样都很麻烦,所以vue中提供了很多事件修饰词,就是在事件后以点的形式来写

<div class="B" @click.stop="sunFn"> //阻止事件冒泡

            </div>

• .stop 阻止事件冒泡；
• .prevent 阻止默认事件；
• .capture 使用事件捕获模式；
• .self 只在自身触发（子元素不能触发）；
• .once 只触发一次；
• .passive 默认事件立即触发，无视preventDefault。
  上面的修饰词可以一起使用如@click.stop.once就是阻止事件冒泡并且只触发一次

键盘事件

监听键盘上的键并作出对应的函数
如

登录
为了用户更好的体验,一般我们登陆的时候按键盘中的Enter键完成登陆,即监听键盘上的键(enter键值=13),触发登陆

 用户名: <input type="text" name="" id=""><br>
      密码<input type="password" @keydown="key"><br>
      <input type="button" @click="login" value="登录"> 

 methods:{
          login(){
            alert("登录成功");
          },
          key(e){
            if(e.keyCode === 13){
                this.login()
            }
          }
        }

例

• 当我们要监督按下那个键去触发响应的事件要用@keydown.键名的形式
  如,我们按下键盘下的b键去触发一个log事件

 密码<input type="password" @keydown.b="x"><br>

    x(){
             console.log("b键按了");   
            }

• 组合绑定,例当按键盘下ctrl+b键打印一个ctrl+b的字符串

    密码<input type="password" @keydown.alt.b="x"><br>

 x(){
             console.log("alt+b组合键按了");   
            }

所有的键名都可以当做修饰词,也不用事件函数e.key === 13这样的形式去做了

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

---

• 系统修饰词绑定
• .ctrl
• .alt
• .shift
• .meta（就是键盘中四个小方块）

---

• 精准触发
• .exact

 密码<input type="password" @keydown.alt="x"><br>
//这个当你同时按下alt和a也可以触发,x函数

 密码<input type="password" @keydown.alt.exact="x"><br>
//只有单独按下alt键才可以触发

---

• 鼠标修饰符
• .left
• .right
• .middle
  鼠标左键等等

---