vue學習筆記3-事件處理

测试微思录-静水流深發表於2024-06-30
Vue筆記事件

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>

相關文章