Vue 事件修饰符（Event Modifiers）

Vue 中的事件修饰符（Event Modifiers）修改事件触发方法运行的方式，并帮助我们以更高效、更直接的方式处理事件。

事件修饰符与 Vue v-on 指令一起使用，例如：

• 阻止HTML表单的默认提交行为（v-on:submit.proid）
• 确保事件在页面加载后只能运行一次（v-on:click.once）
• 指定要用作事件以运行方法的键盘键（v-on:keyup.enter）

如何修改 v-on 指令

事件修饰符用于更详细地定义如何对事件作出反应。

我们使用事件修饰符，首先将标记连接到事件，就像我们以前看到的那样：

<button v-on:click="createAlert">Create alert</button>

现在，为了更具体地定义按钮点击事件在页面加载后只触发一次，我们可以添加 .one 修饰符，如下所示：

<button v-on:click.once="createAlert">Create alert</button>

下面是一个带有 .one 修饰符的实例：

实例

在 <button> 标记上使用 .once 修饰符仅在第一次发生 'click' 事件时运行该方法。

<div id="app">
  <p>Click the button to create an alert:</p>
  <button v-on:click.once="creteAlert">Create Alert</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("Alert created from button click")
      }
    }
  })
  app.mount('#app')
</script>

不同的 v-on 修饰符

事件修饰符用于不同的情况。当我们监听键盘事件、鼠标点击事件时，我们可以使用事件修饰符，甚至可以将事件修饰符组合使用。

事件修饰符 .one 可以在键盘和鼠标单击事件之后使用。

键盘键事件修饰符

我们有三种不同的键盘事件类型 keydown, keypress, 和 keyup。

对于每种键盘事件类型，我们可以指定在键盘事件发生后要监听的键。 我们有 .space, .enter, .w 和 .up 等等。

您可以将键盘事件写入网页，或使用 console.log(event.key) 写入控制台，以自己查找某个键的值：

实例

keydown 键盘事件触发 'getKey' 方法，事件对象中的值 'key' 将写入控制台和网页。

<input v-on:keydown="getKey">
<p> {{ keyValue }} </p>

data() {
  return {
    keyValue = ''
  }
},
methods: {
  getKey(evt) {
    this.keyValue = evt.key
    console.log(evt.key)
  }
}

我们还可以选择将事件限制为仅当鼠标单击或按键与系统修改键 .alt, .ctrl, .shift 或 .meta 组合时发生。系统修改键 .meta 表示 Windows 计算机上的 Windows 键，或苹果计算机上的命令键。

实例

当用户在 <textarea> 标记中写入 's' 时，使用 .s 修饰符可以创建警示框。

<div id="app">
  <p>Try pressing the 's' key:</p>
  <textarea v-on:keyup.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("You pressed the 'S' key!")
      }
    }
  })
  app.mount('#app')
</script>

组合键盘事件修饰符

事件修饰符也可以相互组合使用，因此要调用的方法必须同时发生多个事件。

实例

当在 <textarea> 标记内同时按下 's' 和 'ctrl' 时，可以组合使用 .s 和 .ctrl 修饰符来创建警示框。

<div id="app">
  <p>Try pressing the 's' key:</p>
  <textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    methods: {
      createAlert() {
        alert("You pressed the 'S' and 'Ctrl' keys, in combination!")
      }
    }
  })
  app.mount('#app')
</script>

鼠标按钮修饰符

要对鼠标单击做出反应，我们可以编写 v-on:click，但要指定单击的鼠标按钮，我们可以使用 .left, .center 或 .right 修饰符。

实例

当用户右键单击 <div> 元素时，更改背景颜色：

<div id="app">
  <div v-on:click.right="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>

鼠标按钮事件也可以与系统修饰符键结合使用。

实例

当用户右键单击 <div> 元素并结合 'ctrl' 键时，更改背景颜色：

<div id="app">
  <div v-on:click.right.ctrl="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>

除了 .right 修饰符之外，还可以使用事件修饰符 .prevent，以防止我们右键单击时出现默认的下拉菜单。

实例

右键单击以更改 <div> 元素的背景色时，将阻止出现下拉菜单：

<div id="app">
  <div v-on:click.right.prevent="changeColor"
       v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
    <p>Press right mouse button here.</p>
  </div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        bgColor: 0
      }
    },
    methods: {
      changeColor() {
        this.bgColor+=50
      }
    }
  })
  app.mount('#app')
</script>

实例

按住 'shift' 键盘键并在 <img> 标记上按下鼠标左键可以更改图像。

<div id="app">
  <p>Hold 'Shift' key and press left mouse button:</p>
  <img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        imgUrlIndex: 0,
        imgUrl: 'img_tiger_square.jpeg',
        imgages: [
          'img_tiger_square.jpeg',
          'img_moose_square.jpeg',
          'img_kangaroo_square.jpeg'
        ]
      }
    },
    methods: {
      changeImg() {
        this.imgUrlIndex++
        if(this.imgUrlIndex>=3){
          this.imgUrlIndex=0
        }
        this.imgUrl = this.images[this.imgUrlIndex]
      }
    }
  })
  app.mount('#app')
</script>