阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vue.js v-on

      v-on

      • 缩写@

      • 预期Function | Inline Statement | Object

      • 参数event

      修饰符

      事件修饰符示例说明
      .stop调用 event.stopPropagation(), 阻止单击事件冒泡。
      .prevent调用 event.preventDefault(), 阻止默认事件。
      .capture添加事件侦听器时使用 capture 模式(事件捕获模式)。
      .self只当事件是从侦听器绑定的元素本身触发时才触发回调。
      .{keyCode | keyAlias}只当事件是从特定键触发时才触发回调。
      .native监听组件根元素的原生事件。
      .once只触发一次回调。
      .left只当点击鼠标左键时触发。(2.2.0)
      .right只当点击鼠标右键时触发。(2.2.0)
      .middle只当点击鼠标中键时触发。(2.2.0)
      .passive{ passive: true } 模式添加侦听器。(2.3.0)

      用法

      绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句,如果没有修饰符也可以省略。

      用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件

      在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event 属性:v-on:click="handle('ok', $event)"

      2.4.0 开始,v-on 同样支持不带参数绑定一个事件 / 监听器键值对的对象。注意当使用对象语法时,是不支持任何修饰器的。

      示例

      <!-- 方法处理器 -->
      <button v-on:click="doThis"></button>
      
      <!-- 动态事件 (2.6.0+) -->
      <button v-on:[event]="doThis"></button>
      
      <!-- 内联语句 -->
      <button v-on:click="doThat('hello', $event)"></button>
      
      <!-- 缩写 -->
      <button @click="doThis"></button>
      
      <!-- 动态事件缩写 (2.6.0+) -->
      <button @[event]="doThis"></button>
      
      <!-- 停止冒泡 -->
      <button @click.stop="doThis"></button>
      
      <!-- 阻止默认行为 -->
      <button @click.prevent="doThis"></button>
      
      <!-- 阻止默认行为,没有表达式 -->
      <form @submit.prevent></form>
      
      <!--  串联修饰符 -->
      <button @click.stop.prevent="doThis"></button>
      
      <!-- 键修饰符,键别名 -->
      <input @keyup.enter="onEnter">
      
      <!-- 键修饰符,键代码 -->
      <input @keyup.13="onEnter">
      
      <!-- 点击回调只会触发一次 -->
      <button v-on:click.once="doThis"></button>
      
      <!-- 对象语法 (2.4.0+) -->
      <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
      

      在子组件上监听自定义事件 (当子组件触发“my-event”时将调用事件处理器):

      <my-component @my-event="handleThis"></my-component>
      
      <!-- 内联语句 -->
      <my-component @my-event="handleThis(123, $event)"></my-component>
      
      <!-- 组件中的原生事件 -->
      <my-component @click.native="onClick"></my-component>
      

      按键别名

      • .enter
      • .tab
      • .delete
      • .esc
      • .space
      • .up
      • .down
      • .left
      • .right

      还有一些按键修饰符可以组合使用,或者和鼠标一起使用:

      • .ctrl
      • .alt
      • .shift
      • .meta:Mac 下为 Command 键,Windows 下为窗口键。

      当然,如果你需要其他的键,vue.js 也为你提供了可以通过全局 config.keyCodes 对象自定义键值修饰符别名:

      // 可以使用 v-on:keyup.f1
      Vue.config.keyCodes.f1 = 112
      修饰键
      

      参考 Vue.js keyCodes

      用法

      基础用法

      <div id="app">
          <h3>已点击 {{count}} 次</h3>
          <button @click="count++">点我</button>
          <button @click="quickAdd(3)">快速增长</button>
      </div>
      

      注意: @clickv-on:click 的简写形式, @ 即表示 v-on:

      @click 表达式即可以直接使用 js 语句,也可以是一个定义在 vue 实例中 methods 内的函数名。

      注意: @click 调用的方法名如果不需要参数,那么可以不写括号。

      <script>
          var app = new Vue({
              el: '#app',
              data: {
                  count:0
              },
              methods: {
                quickAdd: function (i) {
                  i = i || 1;//为避免参数为 null 或 undefined 值,这里设定了默认值 1
                  this.count += i;
                }
              }
          });
      </script>
      

      使用 Vue.js 的一个好处是:当销毁 ViewModel 时,会自动销毁所有绑定在其上的事件处理器。

      $event 传参

      Vue.js 还提供了一个 $event 变量,使用它可以访问原生 DOM 事件。$event 变量可以通过方法传入。

      <div id="app2">
          <a href="www.163.com" @click="openUrl('被禁用咯',$event)">被禁用咯</a>
      </div>
      
      var app2 = new Vue({
      	el: '#app2',
      	data: {
      		count: 0
      	},
      	methods: {
      		openUrl: function (param, event) {
      			event.preventDefault();
      			console.log("param:" + param);
      		}
      	}
      });
      

      输出结果:

      param: 被禁用咯

      这个示例利用传入的 event 参数,禁用了原有的链接跳转逻辑。

      为什么在 HTML 中监听事件

      你可能注意到这种事件监听的方式违背了关注点分离(separation of concern)传统理念。

      传统的 WEB 是尽量使用外链式使用 JS,不要把 JS 代码写到 HTML 上;

      不必担心,因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上,它不会导致任何维护上的困难。实际上,使用 v-on 有几个好处:

      • 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

      • 因为你无须在 JavaScript 里手动绑定事件,你的 ViewModel 代码可以是非常纯粹的逻辑,和 DOM 完全解耦,更易于测试。

      • 当一个 ViewModel 被销毁时,所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

      参考

      目录
      目录