c调用按钮点击事件_vue-事件处理

1.监听事件 v-on

用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

实例1.点击按钮控制台输出

<template>
  <div>
    <button v-on:click="clickHandler">按钮</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  //methods代表事件,所有的事件都写在methods里
  methods:{
    clickHandler(){
      console.log("事件");//点击按钮控制台输出事件
   } 
  }
}
</script>
<style>
</style>

实例2.点击按钮执行++

<template>
  <div>
    {{ count }}
    <button v-on:click="clickHandler">按钮++</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  dota(){
    return{
      count:0
    }
  },
  methods:{
    clickHandler(){
      this.count++//点击按钮加1
   } 
  }
}
</script>
<style>
</style>

2.内联处理器中的方法

使用事件的时候,可以来进行传递参数

<template>
  <div>
    {{ count }}
    <button v-on:click="clickHandler(2)">按钮++</button>//加一个参数
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  dota(){
    return{
      count:0
    }
  },
  methods:{
    clickHandler(num){
      this.count+=num //点击按钮每次加2
   } 
  }
}
</script>
<style>
</style>

查看原生event对象

<template>
  <div>
    <button v-on:click="myclickHandler">基本按钮</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  dota(){
    return{
      count:0
    }
  },
  methods:{
    myclickHandler(event){
      console.log(event);
   } 
  }
}
</script>
<style>
</style>

既想查看参数又想查看event对象

<template>
  <div>
    <button v-on:click="myclickHandler('参数',$event)">基本按钮</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  dota(){
    return{
      count:0
    }
  },
  methods:{
    myclickHandler(data,event){
      console.log(data);
      console.log(event);
   } 
  }
}
</script>
<style>
</style>

3.事件修饰符

常见的方式

<template>
  <div>
    <a href="#" v-on:click="aHandler">点我</a>
    //要事件,不要跳转的效果,阻止默认事件
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  methods:{
  //加event对象
    aHandler(event){
      event.preventDefault();//阻止默认事件
      console.log(a事件);
    } 
  }
}
</script>
<style>
</style>

vue方式

<template>
  <div>
    <a href="#" v-on:click.prevent="aHandler">点我</a>
    //要事件,不要跳转的效果,阻止默认事件
  </div>
</template>
<script>
export default {
  name: 'HelloWorld,
  methods:{
    aHandler(event){
      console.log(a事件);
    } 
  }
}
</script>
<style>
</style>

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但vue为我们通过了更好的方式。

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>