vue---事件处理（v-on）

一、监听事件

1、v-on（通常缩写成@符号）来监听DOM事件，并在触发事件时执行一些JavaScript。

2、用法为：v-on:click="methodName"或者@click="methodName"

<template>
    <div class="hello">
        <button v-on:click="counter += 1">点击:counter={{counter}}</button>
        //也可写成<button @click="counter += 1">点击:counter={{counter}}</button>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        data(){
            return{
                counter:1
    }
  }
}
</script>

此时页面出现一个按钮，按钮上面显示点击：counter=1，点击按钮，数字逐渐加1。

二、事件处理方法

事件处理逻辑会更为复杂，所以直接把JavaScript代码放在v-on指令中是不可行的，因此v-on还可以接收一个需要调用的方法名称。

<template>
    <div class="hello">
        <button @click="clickHandle">按钮</button>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        methods:{
             clickHandle(){
                console.log("你好");
            }
        }
}
</script>

使用this.属性，改变属性值:

<template>
    <div class="hello">
        <button @click="clickHandle">按钮</button>
        <p>{{message}}</p>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        data(){
            return{
                message:"hello"
          }
       },
         methods:{
             clickHandle(){
                this.message = "byebye"//在事件中，读取data中的属性，需要使用this.属性
            }
        }
}
</script>

三、event对象

每一个事件里面都有一个叫做event的事件对象，event就是原生DOM event

<template>
    <div class="hello">
        <button @click="clickHandle">你好</button>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        methods:{
             clickHandle(event){
                console.log(event); //控制台会输出event对象
                event.target.innerHTML = "点击之后" //"你好"变成"点击之后"
            }
        }
}
</script>

四、内联处理器中的方法（事件传递参数）

<template>
    <div class="hello">
        <button @click="a('a1')">a111</button>
        <button @click="a('a2')">a222</button>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
    methods:{
        a(data){
            console.log(data);//点击a111控制台输出a1,点击a222控制台输出a2
  }
 }
}
</script>

<template>
    <div class="hello">
       <li @click="clickItemHandle(item)" v-for="(item,index) in names" :key="index">
                {{item}}
       </li>
    </div>
</template>

<script>
    export default{
        name:'HelloWorld',
        data(){
            return{
                  names:["aa","bb","cc"]
          }
       },
         methods:{
             clickItemHandle(item){
                console.log(item);
            }
        }
}
</script>