vue基础-v-on的修饰符

v-on的修饰符

一. 事件修饰符的语法:

@事件名.修饰符="..."

注: @是v-on的简写形式

二.prevent修饰符

1. 作用: 阻止事件默认行为
2. 代码示例:

<a href="https://www.baidu.com" @click.prevent="done">去百度</a>

• 这里绑定了点击事件, 点击事件默认行为就是点击交互, 所以这里的按钮为禁用状态

三. stop修饰符

1. 作用阻止事件冒泡
2. 代码示例:

<template>
  <div>
    <!-- .stop修饰符是阻止事件冒泡的 -->
    <div class="parent" @click="parentFn">
      <div @click.stop="childFn">孩子节点</div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    childFn() {
      console.log("孩子");
    },
    parentFn() {	// 添加parent后, 阻止事件冒泡, 父节点事件将不会触发, 这里不会打印'爸爸'
      console.log("爸爸");
    }
  },
};
</script>

<style></style>

• 添加parent后, 阻止事件冒泡, 父节点事件将不会触发, 这里不会打印’爸爸’

四. once修饰符

1. 作用: 方法只允许使用一次
2. 代码示例

 <button @click.once="surprize">抽奖一次</button>

-常用场景在抽奖程序中, 添加once后, 事件只允许触发一次, 在这里的点击事件体现为触发一次后, 按钮为禁用状态

五. 按键修饰符

1.作用: 指定键盘按键触发事件
2. 代码示例:

<template>
  <div>
    <p>用户名: <input type="text" @keydown="fn" /></p>
    <!-- 按键修饰符: @事件名.按键= '方法' -->
    <!-- enter, 用户按下回车才会触发事件 -->
    <p>密码: <input type="password" @keydown.enter="fn" /></p>
    <p>id:<input type="text" @keydown.esc="fn" /></p>
    <p>a:<input type="text" @keydown.a="fn" /></p>
    <p>right:<input type="text" @keydown.right="fn" /></p>
    <p>up:<input type="text" @keydown.up="fn" /></p>
  </div>
</template>

<script>
export default {
  methods: {
    fn() {
      console.log("识别到按键了");
    },
  },
};
</script>

<style></style>

这里只用了keydown演示了按键修饰符的用法, 按键修饰符还有keypress和keyup方法

六. 除了以上修饰符, 还有许多其它的修饰符, 比如鼠标相关事件的修饰符, 这里就不一一赘述