前端编程开发 --- Vue3 事件处理

监听DOM事件，执行js代码

格式：

v-on:click="methodName"
或
@click="methodName"

示例：

写js代码

<div id="app">
  <button @click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>

<script>
const app = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

写函数名称

<div id="app">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">点我</button>
</div>

<script>
const app = {
  data() {
    return {
      name: 'hello'
    }
  },
  methods: {
    greet(event) {
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

写多个js方法

<div id="app">
  <!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
  <button @click="one($event), two($event)">
  点我
  </button>
</div>
 
<script>
const app = {
  data() {
  },
  methods: {
    one(event) {
      alert("第一个事件处理器逻辑...")
    },
    two(event) {
      alert("第二个事件处理器逻辑...")
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

事件修饰符：

1. `.stop` 修饰符示例：

```html
<div @click="outerClick">
<div @click="innerClick">
Click me!
</div>
</div>

methods: {
outerClick() {
console.log('Outer click');
},
innerClick(event) {
event.stopPropagation();
console.log('Inner click');
}
}
```

 或者表示为

<a v-on:click.stop="doThis"></a>

在这个例子中，当你点击内部的 `<div>` 时，`innerClick()` 方法会被调用。但使用了 `.stop` 修饰符，`event.stopPropagation()` 会阻止事件冒泡到外部 `<div>`，所以只会输出 "Inner click"，而不会输出 "Outer click"。

2. `.prevent` 修饰符示例：

```html
<form @submit="submitForm">
<button type="submit">Submit</button>
</form>

methods: {
submitForm(event) {
event.preventDefault();
console.log('Form submitted');
}
}
```

  或者表示为

<form v-on:submit.prevent="onSubmit"></form>

在这个例子中，当你点击表单中的提交按钮时，`submitForm()` 方法会被调用。但使用了 `.prevent` 修饰符，`event.preventDefault()` 会阻止表单的默认提交行为，所以只会输出 "Form submitted"，而不会刷新页面。

3. `.once` 修饰符示例：

```html
<button @click.once="buttonClick">Click me!</button>

methods: {
buttonClick() {
console.log('Button clicked');
}
}
```

 

在这个例子中，当你点击按钮时，`buttonClick()` 方法会被调用。但使用了 `.once` 修饰符，方法只会触发一次，所以只会输出一次 "Button clicked"，之后再点击按钮也不会有任何输出。

4. `.capture` 修饰符示例：

```html
<div @click.capture="captureClick">
Click me!
</div>

methods: {
captureClick() {
console.log('Captured click');
}
}
```

 

在这个例子中，使用了 `.capture` 修饰符，事件监听器被设置在捕获阶段而非默认的冒泡阶段。当你点击 `<div>` 时，会先触发捕获阶段的监听器，输出 "Captured click"，然后再触发冒泡阶段的监听器。

5. `.self` 修饰符示例：

```html
<div @click.self="selfClick">
Click me!
</div>

methods: {
selfClick() {
console.log('Self click');
}
}
```

 

在这个例子中，使用了 `.self` 修饰符，事件监听器只在触发事件的元素上生效。如果你点击 `<div>` 的子元素，例如 `<span>`，不会触发事件监听器，只有点击 `<div>` 本身才会输出 "Self click"。

6. `.left`、`.right` 和 `.middle` 修饰符示例：

```html
<div @mousedown.left="leftClick"
@mousedown.right="rightClick"
@wheel.middle="middleScroll">
Right click or use middle scroll!
</div>

methods: {
leftClick() {
console.log('Left click');
},
rightClick() {
console.log('Right click');
},
middleScroll() {
console.log('Middle scroll');
}
}
```

 

在这个例子中，通过使用 `.left`、`.right` 和 `.middle` 修饰符，我们为鼠标左键、右键和中间滚轮的事件绑定了不同的事件处理方法。当你在 `<div>` 上按下鼠标左键会输出 "Left click"，按下鼠标右键会输出 "Right click"，使用中间滚轮会输出 "Middle scroll"。

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

按键修饰符

<input v-on:keyup.enter="submit">

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

 

 

.exact 修饰符

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

实例

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

全部的按键别名：

• .enter
• .tab
• .delete (捕获 "删除" 和 "退格" 键)
• .esc
• .space
• .up
• .down
• .left
• .right

系统修饰键：

• .ctrl
• .alt
• .shift
• .meta

鼠标按钮修饰符:

• .left
• .right
• .middle