vue.js基础学习（事件处理与事件修饰符）

基础入门：vue.js 事件处理与事件修饰符

1、vue.js事件处理

• 绑定事件--直接通js代码处理，<h2 @click="counter++">{{counter}}</h2>；

• 绑定事件--没有传递参数，<h2 @click="addCounter">{{counter}}</h2>；

• 绑定事件--传递参数，<h2 @click="addCounter(5)">{{counter}}</h2>；

• 绑定事件--传递参数，也有事件对象，<h2 @click="addCounter(5,$event)">{{counter}}</h2>；

• 一个事件--绑定多个处理函数，<h2 @click="addCounter(5),addAge()">{{counter}}---{{age}}</h2>；

源代码：

<script>
  export default {
    data(){
      return{
        counter:0,
        age:19
      }
    },
    methods:{
      // addCounter(number){
      //   this.counter+=number
      // }
      addCounter(number,e){
        this.counter+=number
        console.log(e)
      },
      addAge:function(){
        this.age++
      }
    }
  }
</script>

<template>
<!-- 绑定事件--直接通js代码处理 -->
  <h2 @click="counter++">{{counter}}</h2>
  <!-- 绑定事件--没有传递参数 -->
  <h2 @click="addCounter">{{counter}}</h2>
  <!-- 绑定事件--传递参数 -->
  <h2 @click="addCounter(5)">{{counter}}</h2>
  <!-- 绑定事件--传递参数，也有事件对象  -->
  <h2 @click="addCounter(5,$event)">{{counter}}</h2>
  <!-- 一个事件--绑定多个处理函数 -->
  <h2 @click="addCounter(5),addAge()">{{counter}}---{{age}}</h2>
</template>

<style>
 
</style>

源代码运行情况：

2、事件修饰符

• .stop：阻止事件冒泡，<button @click.stop="btnClick">子元素</button>；

• .prevent：阻止默认行为，<input type="submit" value="提交" @click.prevent="submitClick">；

• .once：只触发一次回调，<button @click.once="oncClick">只触发一次</button>；

• .keycode(键盘编码)|keyAlias(键盘的简写)监听键盘的键帽，<input type="text" @keyup.enter="keyUp">；

源代码： 

<script>
  export default{
    data(){
      return{

      }
    },
    methods:{
      divClick:function(){
        console.log('父元素的展示')
      },
      btnClick:function(){
        console.log('子元素的展示')
      },
      submitClick:function(){
        console.log('提交数据成功')
      },
      oncClick:function(){
        console.log('只触发一次')
      },
      keyUp:function(){
        console.log('键盘被按下，数据提交成功')
      }
    }
  }
</script>

<template>
<!-- 事件修饰符 -->
<!-- .stop：阻止事件冒泡 -->
  <div @click="divClick">
    <button @click.stop="btnClick">子元素</button>
  </div>
  <!-- .prevent：阻止默认行为 -->
  <form action="">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>
  <!-- .once：只触发一次回调 -->
  <button @click.once="oncClick">只触发一次</button>
  <!-- .keycode(键盘编码)|keyAlias(键盘的简写)监听键盘的键帽 -->
  <input type="text" @keyup.enter="keyUp">
</template>

<style>
 
</style>

源代码运行情况：