v-on的使用

v-on的使用

v-on主要使用在一些事件上。比如点击事件。简写方式@eventName。
代码：

<template>
  <div>
    <button @click="add">ADD 1</button>
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:0,
        }
    },
    methods:{
        add(){
            this.value ++
        }
    }
}
</script>

<style>
</style>

上述代码演示了按钮的点击事件。其他的事件同样可以用这种方式进行绑定。如果你需要原始的event对象：

<template>
  <div>
    <button @click="add($event)">ADD 1</button>
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:0,
        }
    },
    methods:{
        add(e){
            console.log(e)
            this.value ++
        }
    }
}
</script>

有时候多个元素重叠在一起，此时的点击事件可能会发生传递，如果需要阻止事件冒泡，我们只要在事件后面加一个修饰符.stop就可以了，现在的代码变成了

<template>
  <div>
    <button @click.stop="add($event)">ADD 1</button>
    <p>{{value}}</p>
  </div>
</template>

<script>

export default {
    data(){
        return {
            value:0,
        }
    },
    methods:{
        add(e){
            console.log(e)
            this.value ++
        }
    }
}
</script>

一般情况下这样就能阻止事件冒泡，但是在有些情况下不一定可以生效，比如在leaflet组件中，事件被2次封装过，那么.stop修饰符是无效的。