vue之事件处理

目录

为什么在 HTML 中监听事件？

监听事件简单使用

事件修饰符 

.stop

 .prevent

 .once

 按键修饰符

.enter

---

为什么在 HTML 中监听事件？

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 或 @ 有几个好处：

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

监听事件简单使用

我们可以使用 v-on 指令 (通常缩写为 @ 符号) 来监听 DOM 事件，并在触发事件时执行一些 JavaScript。

用法为 v-on:click="methodName" 或使用快捷方式 @click="methodName"

简单使用:

<script>
export default{
data(){
  return{
   number:0,
  chang:2
  }
},
methods:{
addAge(){
this.number++;
},
// event 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
change(num,event){
 this.chang+=this.number;
 console.log(this.chang);
 console.log(event);
 console.log(num);

}
}
}
</script>

<template>
<!-- 简单的做加法处理-->
<h1 @click="addAge(),change(4,$event)">{{number}}==========={{chang}}</h1>
</template>

<style>
</style>

结果展示:

事件修饰符 

(常使用的一些介绍)

注意点:

.stop

  阻止单击事件继续冒泡

代码:

<script>
export default{
data(){
  return{
   number:0,
  chang:2
  }
},
methods:{
divClick(){
 console.log("父元素")
},
btn(){
  console.log("子元素")
}
}
}
</script>

<template>
<!-- 事件修饰符 -->
<!-- .stop 阻止事件冒泡 在当前事件做完 就结束 没有其他动作 -->
<div @click="divClick">
  <button @click="btn">按钮</button>
</div>
</template>

<style>
</style>

 

使用.stop

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

 

 .prevent

阻止默认行为

代码:

<script>
export default{
methods:{
divClick(){
 console.log("父元素")
},
btn(){
  console.log("子元素")
}
}
}
</script>

<template>
<form action="https://v3.cn.vuejs.org/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">
  <input type="submit" value="提交">
</form>
</template>

<style>
</style>

 使用 .prevent

代码:

<!-- 事件修饰符 -->
<!-- .prevent 阻止默认行为 阻止该事件原有的行为 -->
<form action="https://v3.cn.vuejs.org/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6">
  <input type="submit" value="提交" @click.prevent="btn">
</form>

 .once

只触发一次回调

代码:

<script>
export default{
methods:{
btn(){
  console.log("button元素")
}
}
}
</script>

<template>
<button type="submit" value="提交" @click="btn">按钮</button>
</template>

<style>
</style>

 

使用 .once

<template>
<!-- 事件修饰符 -->
<!-- .once 只触发一次回调 -->
<button type="submit" value="提交" @click.once="btn">按钮</button>
</template>

 

 

 按键修饰符

.enter

只有在 `key` 是 `Enter` 时调用方法

代码:

<script>
export default{
methods:{
btn(){
  console.log("input元素")
}
}
}
</script>

<template>
<input type="text" @keyup="btn" />
</template>
<style>
</style>

 

使用.enter

<template>
<!-- 按键修饰符 -->
<!--  只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input type="text" @keyup.enter="btn" />
</template>