我的 Vue.js 学习日记 （七） - 事件与修饰符

2024年3月18日 104次阅读 来源: bei6

上节回顾

上节写了一个v-for与table的简单互动，脑子里回忆一下，嗯 ~ 还是回去再看一遍吧…

本节目标

今天看一下事件与修饰符，并且把有疑惑的地方敲一遍，亲眼看一下输出结果。由于时间有限，今天只写了prevent stop capture exact once这五个修饰符。

事件

事件就不多说了，v-on: 简写 @ 。

修饰符

prevent – 阻止表单提交

<form @submit.prevent>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default btn-sm" >submit</button>
</form>

<form>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default  btn-sm" >submit</button>
</form>

tip:prevent修饰符与form标签一起使用

stop – 阻止事件向“上”传播

<div @keydown.enter="doSomeThing(1)">
  <div @keydown.enter.stop="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

<div @keydown.enter="doSomeThing(1)">
  <div @keydown.enter="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

tip:对于嵌套的元素，元素同时有的事件会向外进行扩散

capture – 改变事件传播顺序

<div @keydown.enter.capture="doSomeThing(1)">
  <div @keydown.enter.capture="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

tip:catpture会在向上传递时享有优先执行权，当存在多个capture时，更外层的优先权更高

once – 一次性触发

<input type="text" @keydown.enter.once="doSomeThing('我使用了.once')">

tip:触发过一次后不可用，当然前提是不刷新

exact – 取该修饰符之前所有事件和修饰符的与关系

<input type="text" placeholder="按下的键中包括Enter键" @keydown.enter="doSomeThing('我被触发了')">
<input type="text" placeholder="按下ctrl+enter键触发Alert" @keydown.ctrl.enter.exact="doSomeThing('我被触发了')">
<input type="text" placeholder="单单按下enter键触发Alert" @keydown.enter.exact="doSomeThing('我被触发了')">
<input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing('想睡觉')">

tip:exact修饰符常与系统修饰符和按键修饰符配合使用

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <title>chapter - 7</title>
</head>
<body>
<div id="app">
  <h3>打开F12  --> Console  页，观察输出结果</h3>
  <h4>$event</h4>
  <input type="text"  v-model="msg" @keydown.enter="doClick(msg, $event)" placeholder="光标放在此处按下回车键">
  <button class="btn btn-default  btn-sm" @click="doClick(msg, $event)">点 - 我</button>

  <h4>prevent修饰符 - 阻止窗体提交</h4>
  <form @submit.prevent>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default btn-sm" >submit</button>
  </form>

  <h4>没有阻止窗体提交</h4>
  <form>
  <input type="email" placeholder="Email">
  <button type="submit" class="btn btn-default  btn-sm" >submit</button>
  </form>

  <h4>stop修饰符 - 阻止事件向“上”传播</h4>
<div @keydown.enter="doSomeThing(1)">
  <div @keydown.enter.stop="doSomeThing(2)">
    <input type="text" @keydown.enter="doSomeThing(3)">
  </div>
</div>

  <h4>没有阻止事件向“上”传播</h4>
  <div @keydown.enter="doSomeThing(1)">
    <div @keydown.enter="doSomeThing(2)">
      <input type="text" @keydown.enter="doSomeThing(3)">
    </div>
  </div>

  <h4>capture修饰符 - 改变事件传播顺序</h4>
  <div @keydown.enter.capture="doSomeThing(1)">
    <div @keydown.enter.capture="doSomeThing(2)">
      <input type="text" @keydown.enter="doSomeThing(3)">
    </div>
  </div>
<p>结论：capture会在向上传递时享有有限级，存在多个captrue时，外层优先级高于内层</p>

  <h4>once修饰符 - 一次性触发</h4>
  <input type="text" @keydown.enter.once="doSomeThing('我使用了.once')">

  <h4>self修饰符 - 只有自身“主动被触发”才执行，“传播”而来的不触发</h4>
  <div @click.self="doSomeThing('我是“外层div”，我被触发了')" style="background-color: cornflowerblue; width: 300px; height: 28px;">
    <div @click="doSomeThing('我是“中间div”，我被触发了')" style="background-color: deeppink; width: 200px; height: 28px;">
      <div @click.self="doSomeThing('我是“内层”input,我被触发了')" style="background-color: lightgreen; width: 100px; height: 28px;">
      </div>
    </div>
  </div>

  <h4>系统修饰符与按键修饰符与exact修饰符</h4>
  <input type="text" placeholder="按下的键中包括Enter键" @keydown.enter="doSomeThing('我被触发了')">
  <input type="text" placeholder="按下ctrl+enter键触发Alert" @keydown.ctrl.enter.exact="doSomeThing('我被触发了')">
  <input type="text" placeholder="单单按下enter键触发Alert" @keydown.enter.exact="doSomeThing('我被触发了')">
  <input type="text" placeholder="想睡想睡想睡" @click.ctrl.exact="doSomeThing('想睡觉')">
</div>

<script>
  const data = {
    msg: ''
  }

  const methods = {
    doClick (msg, event) {
      console.log('-->start')
      console.log('type : '+event.type)
      console.log('target : '+event.target)
      console.log('button : '+event.button )
      console.log('tip : button 在 firefox 中 0 代表左键')
      console.log('-->end')
    },
    onSubmit () {
      alert('为什么总觉得自己该做点什么？')
    },
    doSomeThing (msg) {
      alert(msg)
    }
  }

  var vm = new Vue({
    el: '#app',
    data: data,
    methods:methods
  })
</script>
</body>
</html>

小节

困，累，小节跳过…

    原文作者：bei6
    原文地址: https://segmentfault.com/a/1190000014784770
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞