VUE基础--事件处理

监听事件​

使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

---

内联事件处理器 

<template>
    <button v-on:click="count++">Button</button>
    <p>{{count}}</p>
</template>

<script>
export default {
    data(){
        return{
            count:0
        }
    }
}
</script>

 

随着对button的点击，下面的数值也随之增加

 

---

方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

<template>
    <button @click=addCount>Button</button>
    <p>{{count}}</p>
</template>

<script>
export default {
    data(){
        return{
            count:0
        }
    },
    // methods中写自定义的函数或是方法
    methods:{
        addCount(){
            // 读取到data中数据的方案 ==> this.count
            this.count++
        }
    }
}
</script>

页面效果与内联事件时的相同

方法事件处理器传递参数：

<template>
    <button @click="addCount('hello')">Button</button>
    <p>{{count}}</p>
</template>

<script>
export default {
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCount(s){
            // 读取到data中数据的方案 ==> this.count
            this.count++;
            console.log(s)
        }
    }
}
</script>

<template>
    <p @click="getNameHander(item,$event)" v-for="item in names">{{item}}</p>
</template>

<script>
export default {
    data(){
        return{
            names:["Jack","John","Mike"]
        }
    },
    methods:{
        getNameHander(name,e){
            // 读取到data中数据的方案 ==> this.count
            console.log(name,e)
        }
    }
}
</script>

点击页面上的名字，在控制台中就会出现相应的信息