Vue常见事件整理（实例）

1. 点击事件：

<template>
  <button @click="handleClick">点击我</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
}
</script>

2. 鼠标事件：

<template>
  <div
    @mouseover="handleMouseOver"
    @mouseout="handleMouseOut"
    @mousedown="handleMouseDown"
    @mouseup="handleMouseUp"
    @mousemove="handleMouseMove">
    鼠标悬停、按下、释放和移动到这个区域
  </div>
</template>

<script>
export default {
  methods: {
    handleMouseOver() {
      console.log('鼠标悬停');
    },
    handleMouseOut() {
      console.log('鼠标移出');
    },
    handleMouseDown() {
      console.log('鼠标按下');
    },
    handleMouseUp() {
      console.log('鼠标释放');
    },
    handleMouseMove(event) {
      console.log(`鼠标移动到 (${event.clientX}, ${event.clientY})`);
    }
  }
}
</script>

3. 键盘事件：

<template>
  <input type="text" @keyup="handleKeyUp" @keydown="handleKeyDown" @keypress="handleKeyPress">
</template>

<script>
export default {
  methods: {
    handleKeyUp(event) {
      console.log(`释放了键：${event.key}`);
    },
    handleKeyDown(event) {
      console.log(`按下了键：${event.key}`);
    },
    handleKeyPress(event) {
      console.log(`按下并保持键：${event.key}`);
    }
  }
}
</script>

4. 表单事件：

<template>
  <input type="text" @input="handleInput" @change="handleChange" @focus="handleFocus" @blur="handleBlur">
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    };
  },
  methods: {
    handleInput(event) {
      this.inputText = event.target.value;
    },
    handleChange(event) {
      console.log('输入框内容已改变');
    },
    handleFocus() {
      console.log('输入框获得焦点');
    },
    handleBlur() {
      console.log('输入框失去焦点');
    }
  }
}
</script>

5. 触摸事件：

<template>
  <div
    @touchstart="handleTouchStart"
    @touchend="handleTouchEnd"
    @touchmove="handleTouchMove">
    触摸这个区域
  </div>
</template>

<script>
export default {
  methods: {
    handleTouchStart(event) {
      console.log('触摸开始');
    },
    handleTouchEnd(event) {
      console.log('触摸结束');
    },
    handleTouchMove(event) {
      console.log(`触摸移动到 (${event.touches[0].clientX}, ${event.touches[0].clientY})`);
    }
  }
}
</script>