码农教程 - 一技在手,衣食无忧! tools

Vue 事件修饰符

❮ 上一节 下一节 ❯

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

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

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

如何修改v-on指令

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

我们通过首先将标签连接到事件来使用事件修饰符，就像我们之前看到的那样：

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

现在，为了更具体地定义按钮单击事件仅在页面加载后触发一次，我们可以添加.once修饰符，像这样：

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

这是一个示例.once修饰符：

示例

这个.once修饰符用于<button>标记仅在第一次发生“点击”事件时运行该方法。

<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修饰符

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

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

键盘按键事件修饰符

我们有三种不同的键盘事件类型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 键，或 Apple 计算机上的命令键。

按键修饰符 细节
.[Vue key alias] 最常见的键在 Vue 中都有自己的别名：
  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
.[letter] 指定按下该键时出现的字母。举个例子：使用.s键修饰符来监听“S”键。
.[system modifier key] .alt,.ctrl,.shift或者.meta。这些键可以与其他键结合使用，或者与鼠标单击结合使用。

示例

使用.s修饰符，用于在用户在 <textarea> 标记内写入“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>
亲自试一试 »

组合键盘事件修饰符

事件修饰符也可以相互组合使用，以便调用方法必须同时发生不止一件事。

示例

使用.s和.ctrl组合修饰符可在同时按下“s”和“ctrl”时创建警报<textarea>标签。

<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>
亲自试一试 »

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

示例

当您右键单击以更改背景颜色时，下拉菜单将被阻止出现<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>
亲自试一试 »

可以通过使用以下命令来防止右键单击后出现下拉菜单event.preventDefault()在方法内部，但是使用 Vue.prevent修改代码变得更具可读性并且更易于维护。

您还可以结合其他修改器对鼠标左键单击做出反应，例如click.left.shift:

示例

按住键盘上的“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>
亲自试一试 »

Vue练习

通过练习测试一下

练习:

提供正确的代码，以便 <div> 元素在右键单击时改变颜色。

另外，添加代码，以便在右键单击网页时不显示默认下拉菜单。

<div id="app">
  <div v-on:click.="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>

开始练习


❮ 上一节 下一节 ❯