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

头像
youbei
    阅读 5 分钟
    1

    上节回顾

    上节写了一个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>

    小节

    困，累，小节跳过...

    vue.js
    youbei
    318 声望70 粉丝
    « 上一篇
    我的 Vue.js 学习日记 （六） - v-for 与 table 的 增、删、排序、明细
    下一篇 »
    我的 Vue.js 学习日记 （八） - input 与 v-model

    引用和评论

    推荐阅读
    头像
    Go API 开发基础

    youbei阅读 2.2k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.2k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 494评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 892

    0 条评论
    得票最新