vue学习笔记3-事件处理

1.事件处理

v-on可以监听dom事件。用法：v-on:click="methodName",可以简写为@click="methodName"
methodName可以是一个方法名，也可以是一个内联表达式（直接写逻辑）

<template>
<div>事件绑定</div>
<div>
  <button v-on:click="count++">add</button>
  <button @click="add">加2</button>
  <p>{{ count }}</p>
</div>


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

</script>

2.事件传参

事件参数可以获取event对象和通过事件传递数据。vue中的event对象就是原生的event对象。

<template>
<div>事件绑定</div>
<div>
  <button v-on:click="count++">add</button>
  <button @click="add">加2</button>
  <p>{{ count }}</p>
</div>


</template>
<script>
export default{
  data(){
    return{
      
      count:0
    }
  },
  methods:{
    add(e){
      //打印event对象（传进来的参数e）
      // console.log(e);
      e.target.innerHTML="test"
      this.count=this.count+2
    }
  }
}

</script>

事件传递参数和event对象：

<template>
<div>事件传递参数和event对象</div>
<div>
  <button v-on:click="count++">add</button>
  <button @click="add('hello',$event)">加2</button>
  <p>{{ count }}</p>
</div>


</template>
<script>
export default{
  data(){
    return{
      
      count:0
    }
  },
  methods:{
    add(msg,$event){
      console.log(msg)
      console.log($event)
      
      this.count=this.count+2
    }
  }
}

</script>

3.事件修饰符

作用：简化代码。

<template>
<div>事件修饰符</div>
<div>
  <a @click.prevent="clickHandler" href="http://www.baidu.com">测试</a>
</div>
<div @click="clickDiv">
  <p @click.stop="clickP">测试事件冒泡</p>
</div>


</template>
<script>
export default{
  data(){
    return{
      
      count:0
    }
  },
  methods:{
    clickHandler(e){
      // e.preventDefault();
      console.log("点击了")

    },
    clickP(e){
      console.log("点击P")
    },
    clickDiv(){
      console.log("点击Div")
    }
  }
}

</script>