vue学习笔记6-事件参数-event

事件参数

事件参数可以获取event对面和通过事件传递

获取event对象

实现事件并从事件中获得event事件

可将其简写为e

 add按钮后数字累加➡️可以获取button按钮同时修改内容

 e.target.innerHTML="Add"+this.count;（Vue中的event对象，就是原生js的Event对象，原生即默认可使用）

传递参数

直接在事件里面传递一个参数进来，在msg事件直接接收该参数。打印msg获得hello文本

<template>
    <h3>方法事件处理器</h3>
    <button @click="addCount('hello')">Add</button>
    <p>{{ count }}</p>
</template>
<script>
export default {
    data(){
        return{
            count:0
        }
    },
    //所有方法和函数都在这里
    methods:{
        //event对象
        addCount(msg){
            //读取到data里面的数据的方案：this.count(对象或者值)
           // e.target.innerHTML="Add"+this.count;
            //Vue中的event对象，就是原生js的Event对象
            console.log(msg)
            this.count++
        }
    }
}
</script>

获取列表中的内容

综合前面所学：渲染列表+事件处理+通过key管理状态+事件传参 

<p  @click="getNameHandler(item)" v-for="(item,index) of names" :key="index">{{ item }}</p>

 methods:{
        getNameHandler(name){       
          console.log(name);
        }
    }
}

 即可以达到效果：点击网页上的名字➡️控制台打印该名字

传参过程中获取event对象 

通过上述例子可知该法不可取，只需要再在此添加一个$event，就欧克了