Vue学习:事件处理（与用户产生交互-点击）

Vue对元素绑定事件，需要使用指令，也就是v-开头

---

 v-on：当什么什么时候时候

点击-出现弹窗：使用method方法

   <!-- 准备容器 -->
    <div id='root'> 
        <h2>欢迎页面，你好 {{name}}</h2>
        <!-- v-on:click 当元素被点击时候  展示回调函数去调用-->
        <button v-on:click="showInfo">点我提示事件</button>

    </div>
    <script>
        new Vue({ 
            el: '#root',
            data: {   
                    name:'Amy',
                    },
            methods:{//方法
                showInfo(){
                    alert('欢迎来到故宫')
                }

            },
        });
    </script>

---

 测试有没有接受参数

     methods:{//方法
                showInfo(a,b,c){//可以接受参数吗
                    console.log(a,b,c)//发现可以接收一个参数，为时间对象，PointerEvent 
                    //alert('欢迎来到故宫')
                }

接收的参数是事件对象，可以获取事件对象的一些参数，里面的this是vm,Vue实例对象 

      const vm=  new Vue({ 
            el: '#root',
            data: {   
                    name:'Amy',
                    },
            methods:{//方法
                showInfo(event){//可以接受参数吗
                    console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent 
                    //alert('欢迎来到故宫')
                    console.log(event.target);//获取元素
                    console.log(event.target.innerText);
                    console.log(this===vm)//此处的this是vm Vue实例对象
                }

            },
        });

但是如果将函数写成箭头函数 this指

        showInfo:(event)=>{//可以接受参数吗
                    console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent 
                    //alert('欢迎来到故宫')
                    console.log(event.target);//获取元素
                    console.log(event.target.innerText);
                    console.log(this)//此处的this是window
                }

当点击按钮，Vue发现需要执行showInfo函数，于是去vue实例中调用此方法，并且传入一个event,如果是箭头函数，就没有自己的this,就往外面找，就是window

---

所以：所有被Vue管理的函数需要写成普通函数，不要是箭头函数

---

简写：v-on:  =======@

    <!-- 准备容器 -->
    <div id='root'> 
        <h2>欢迎页面，你好 {{name}}</h2>
        <!-- v-on:click 当元素被点击时候  展示回调函数去调用-->
        <button v-on:click="showInfo">点我提示事件</button>
        <button @click="showInfo">点我提示事件</button>

    </div>
    <script>
      const vm=  new Vue({ 
            el: '#root',
            data: {   
                    name:'Amy',
                    },
            methods:{//方法
                showInfo(event){//可以接受参数吗
                    console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent 
                    //alert('欢迎来到故宫')
                    console.log(event.target);//获取元素
                    console.log(event.target.innerText);
                    console.log(this===vm)//此处的this是vm Vue实例对象
                }
                //  showInfo:(event)=>{//可以接受参数吗
                //     console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent 
                //     //alert('欢迎来到故宫')
                //     console.log(event.target);//获取元素
                //     console.log(event.target.innerText);
                //     console.log(this)//此处的this是window
                // }

            },
        });

还想传入参数使用小括号()：但是没有event事件了

  <button @click="showInfo2(66)">点我提示事件2</button>


  showInfo2(number){//可以接受参数吗
                    console.log(number);//发现可以接收一个参数，为时间对象，PointerEvent 
               
                }

解决办法:使用$event占位

<button @click="showInfo2(66,$event)">点我提示事件2</button>
    showInfo2(number,event){//可以接受参数吗
                    console.log(number);//发现可以接收一个参数，为时间对象，PointerEvent 
                    console.log(event)
               
                }

可以变换顺序

传参+不传参 

 

  <!-- 准备容器 -->
    <div id='root'> 
        <h2>欢迎页面，你好 {{name}}</h2>
        <!-- v-on:click 当元素被点击时候  展示回调函数去调用-->
        <button v-on:click="showInfo1">点我提示事件1</button>
        <button @click="showInfo2($event,66)">点我提示事件2</button>

    </div>
    <script>
      const vm=  new Vue({ 
            el: '#root',
            data: {   
                    name:'Amy',
                    },
            methods:{//方法
                showInfo1(event){//可以接受参数吗
                    console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent 
                    //alert('欢迎来到故宫')
                    console.log(event.target);//获取元素
                    console.log(event.target.innerText);
                    console.log(this===vm)//此处的this是vm Vue实例对象
                },
                //  showInfo:(event)=>{//可以接受参数吗
                //     console.log(event);//发现可以接收一个参数，为时间对象，PointerEvent 
                //     //alert('欢迎来到故宫')
                //     console.log(event.target);//获取元素
                //     console.log(event.target.innerText);
                //     console.log(this)//此处的this是window
                // }
                showInfo2(event,number){//可以接受参数吗
                    console.log(number);//发现可以接收一个参数，为时间对象，PointerEvent 
                    console.log(event)
               
                }

            },
        });
    </script>

最终这 些函数的在Vue实例中 

 区别：name是数据代理，从根上来源于_date.

showInfo1和showInfo2不做数据代理，如果将函数写在data里面就会发生数据代理，会让Vue很累，vue去做数据代理调用函数，以后函数是不会变的，所以是setter getter没有意义

---

事件的基本使用：
        1、使用v-on:xxx或@xxx绑定事件，其中xxx是时间名

        2、事件的回调需要配置在methods对象中，最终会在vm上

        3、methods中配置的函数，都是被Vue实例管理的函数，this指向vm 或组件实例对象

        4、methods中配置的函数，不要用箭头函数，否则this指向的不是vm实例

        5、@click="函数名"  和@click="函数名($event,参数)"，效果一致，可以传参