vue中常用的事件及使用方法

简介: vue中常用的事件及使用方法

在 Vue 中,常用的事件有以下几种:

  1. @click:响应鼠标点击事件;
  2. @mouseover:响应鼠标移动到元素上方事件;
  3. @keydown:响应键盘按下事件;
  4. @submit:响应表单提交事件;
  5. @focus:响应元素获得焦点事件;
  6. @blur:响应元素失去焦点事件;
  7. @change:响应输入框内容变化事件;
  8. @scroll:响应元素滚动事件。

使用方法:

  1. 绑定事件:使用 @ 符号加事件名称,例如 @click;
  2. 在 Vue 实例中定义处理事件的方法,例如 onClick;
  3. 在实例中使用 methods 属性,将方法绑定到事件上。

示例代码:

<template>
  <div @click="onClick">点击我</div>
</template>
<script>
export default {
  methods: {
    onClick() {
      console.log('点击事件触发');
    },
  },
};
</script>


相关文章
|
1天前
|
存储 JavaScript 前端开发
搞懂Vue一篇文章就够了
搞懂Vue一篇文章就够了
9 0
|
1天前
|
JavaScript
Vue3的 组件事件
Vue3的 组件事件
10 0
|
1天前
|
JavaScript 前端开发 UED
Vue 异步组件
Vue 异步组件
8 0
|
1天前
|
JavaScript
Vue自定义指令的三个方法
Vue自定义指令的三个方法
7 0
|
1天前
|
存储 资源调度 JavaScript
vue引入vuex
vue引入vuex
25 7
|
1天前
|
JavaScript 前端开发
vue怎么自定义底部导航
vue怎么自定义底部导航
20 10
|
1天前
|
JavaScript
vue知识点
vue知识点
8 3
|
2天前
|
JavaScript 索引
vue 在什么情况下在数据发生改变的时候不会触发视图更新
vue 在什么情况下在数据发生改变的时候不会触发视图更新
13 2
|
2天前
|
存储 缓存 JavaScript
vue中性能优化
vue中性能优化
12 1
|
2天前
|
JavaScript
vue常用指令
vue常用指令
11 1