13~vue中监听事件v-on

监听事件v-on

我们可以使用 v-on 指令(通常缩写为@) 来监听DOM事件, 并在触发事件时执行一些JavaScript。
用法为 v-on:click="methodName" 或者使用缩写 :click="methodName"

• 绑定事件, 简单的逻辑, 可以直接通过js代码进行处理
• 绑定事件,如果需要事件对象, 没有传递参数的情况下, 直接方法中用event获取时间对象; 如果传递参数了, 模版中, 需要通过$event把当前的事件对象传过去
• 一个事件绑定多个处理函数,这些方法用逗号运算符分隔

示例

<script>
export default {
  data () {
    return {    
       count:0,
       age:18
    }   
  },
  methods: {
    addCount(){
      this.count++
    },
    addParamsCount(number){
      this.count+=number
    },
    addParamsObj(event){
      // 方法中没有传参数, 直接用event表示事件对象
      this.count++
      console.log('点击能拿到这个事件对象， 鼠标点击事件',event)
    },
    addObj(event,num){
      // 方法中传递参数了, 需要模板中传入$event事件对象, 方法中接收就可以 
      this.count+=num
      console.log('点击能拿到这个事件对象， 鼠标点击事件',event)
    },
    addAge(num){
      this.age += num
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>
    <p>{{ count }} -- {{ age }}</p>
    <!-- 绑定事件, 直接通过js代码进行处理 -->
    <button @click="count++">js表达式处理</button>
    <!-- 绑定事件， 没有传递参数 -->
    <button @click="addCount">通过函数进行处理</button>
    <!-- 绑定事件， 传递参数 -->
    <button @click="addParamsCount(5)">传参数监听事件</button>    
    <button @click="addParamsObj">事件对象,没有传参的情况下,
    方法里面写一个event,就是事件对象
    </button>
    <!-- 在内联语句处理中访问原始的DOM事件, 可以用特殊变量 $event, 把它传入方法 -->
    <!-- 绑定事件, 即传递参数, 也要有事件对象,需要通过$event把当前的事件对象传过去 -->
    <button @click="addObj($event,5)">有参数的事件对象</button>
    <!-- 一个事件绑定多个处理函数,这些方法用逗号运算符分隔 -->
    <button @click="addCount(),addAge(5)">一个事件绑定多个处理函数</button>
  </div>
</template>
<style>
</style

事件修饰符

Vue.js 为 v-on指令提供了事件修饰符, 修饰符是有点开头的指令后缀来表示的。

.stop阻止事件冒泡

事件冒泡: 指的是, 当子元素和父元素同时都有一个点击事件时, 当子元素点击事件执行了,
就会冒泡到父元素上面, 继续执行父元素的点击事件
事件冒泡示例

<div @click="divClick">   
     <button @click.stop="butClick">按钮</button>
</div>

说明:

1. 当点击button按钮时, 执行了butClick这个事件后, 就会冒泡到父元素div上面, 继续执行divClick这个点击事件;
2. 很多时候这样是不符合需要的, 要求只执行butClick事件, 这个时候就需要使用到.stop修饰符, 阻止事件冒泡

阻止事件冒泡示例

<script>
export default {
 data () {
   return {    
      count:0
   }   
 },
 methods: {
   divClick(){
     console.log('父元素的展示')
   },
   butClick(){
     console.log('子元素的展示')
   }
 },
 computed: {       
 }, 
 watch:{
 }
}
</script>

<template>
 <div>
   <!-- 事件修饰符 -->
   <!-- 
         事件冒泡: 指的是, 当子元素和父元素同时都有一个点击事件时, 当子元素点击事件执行了,
         就会冒泡到父元素上面, 继续执行父元素的点击事件
         .stop 阻止事件冒泡
    -->
   <div @click="divClick">
     <!-- 我们的需求是, 只执行子元素的点击事件, 不要冒泡到父元素上面, 我们只要加.stop修饰符, 
          阻止冒泡就可以了-->
     <button @click.stop="butClick">按钮</button>
   </div>
 </div>
</template>
<style>
</style>

.prevent 阻止默认行为

比如, form表单提交中, 点击提交了, 我们就会跳转 form表单的action对应的地址; 但往往我们有自己的业务逻辑判断, 不想要使用form默认的提交方式, 这个时候就需要使用到.prevent, 阻止默认行为 。
示例

<script>
export default {
  data () {
    return {    
       count:0
    }   
  },
  methods: {
    submitClick(){
      console.log('我自己通过逻辑判断去提交')
    }
    
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>
    <!-- 事件修饰符 -->
    <!-- .prevent 阻止默认行为        
     -->
    <form action="">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
  </div>
</template>
<style>
</style>

.once 只触发一次回调

页面很多事件操作中, 要求我们只能触发一次, 不能重复触发很多次; 除非重新进入这个页面,才能再次触发一次。
示例

<script>
export default {
  data () {
    return {    
       count:10
    }   
  },
  methods: { 
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>
    <!-- 事件修饰符 -->
    <!-- .once 只触发一次回调      
     -->
     <button @click.once="count += 100">只触发一次once  --- {{ count }}</button>
  </div>
</template>
<style>
</style>

按键修饰符

在监听键盘事件时, 我们经常需要检查特定的按键。 Vue 允许我们为 v-on 或者 @ 在监听键盘事件时添加按键修饰符。
示例

<script>
export default {
  data () {
    return {    
       count:10
    }   
  },
  methods: {   
    keyUp(){
      console.log('回车键被按下, 数据提交成功')
    }
  },
  computed: {       
  }, 
  watch:{
  }
}
</script>

<template>
  <div>
    <!-- 按键修饰符
         .{keyCode(键盘编码) | keyAlias (键盘的简写)} 监听键盘的某个键帽    
    -->
    <!-- 
        当前键盘输入回车键时,提交数据到方法
     -->
    <input type="text" @keyup.enter="keyUp">
  </div>
</template>
<style>
</style>