美文网首页
Vue学习笔记[05]-v-on指令的使用

Vue学习笔记[05]-v-on指令的使用

作者: 神楽花菜 | 来源:发表于2019-10-26 16:38 被阅读0次

v-on介绍

作用:绑定时间监听器
缩写:@
参数:event

v-on的基本使用在前面已经介绍过了,这里放出官网的实例:

<div id="example-2">
  <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指向当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

可以注意到在v-on:click="greet"中没有()和参数传递,vue默认传入event

若是涉及到多个参数传递问题,可将特殊变量$event传入:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

修饰符

  • .stop:阻止冒泡
  • .prevent:阻止默认行为
  • .capture: 添加事件侦听器时使用 capture 模式。
  • .self:只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .once:只触发一次
  • .passive:以 { passive: true } 模式添加侦听器

passive:true可以告诉浏览器不需要检查是否禁用了默认时间,用于高频触发的事件中,例如监听滚动来提升页面滑动的流畅度
浏览器无法预先知道一个监听器会不会调用 preventDefault(),它需要等监听器执行完后,再去执行默认行为,而监听器执行是要耗时的,这样就会导致页面卡顿.

<!-- 方法处理器 -->
<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 }">

相关文章

  • Vue学习笔记[05]-v-on指令的使用

    v-on介绍 作用:绑定时间监听器缩写:@参数:event v-on的基本使用在前面已经介绍过了,这里放出官网的实...

  • v-on指令

    Vue.js 基础学习 v-on 指令

  • vue 基础知识总结

    这里我们学习vue1.0和2.0看看他们之间有什么不同; 1.vue的基础指令## 1.1 v-on 指令的使用;...

  • 【Vue】常用指令之v-on

    ?【Vue】学习养成记,【程序员必备小知识】 ? 今日小知识——Vue常用指令之v-on v-on指令是事件绑定指...

  • vue.js事件处理器笔记

    Vue.js 事件监听使用 v-on 指令:v-on 增加 1 这个按钮被点击了 {{ counter }...

  • vue 事件

    Vue.js 事件 在 vue 中,事件通过指令 v-on 进行绑定,v-on 缩写 @ 组件的 methods ...

  • vue:事件处理器

    Vue.js 事件处理器 事件监听可以使用 v-on 指令: v-on 增加 1 这个按钮被点击了 {{ coun...

  • Vue基础知识(四) - 事件绑定

    Vue要绑定事件需要使用 "v-on" 这个指令比如我们要使用点击事件,可以这样书写: 按钮 Vue的事件绑定包括...

  • vue事件与表单处理

    事件处理 v-on指令 用于进行元素的事件绑定 Vue.js 还为 v-on 指令提供了简写方式@click 事件...

  • vue 零散学习档案

    引言 vue中“:”、“.”、“@”意义 “:” 是指令 “v-bind”的缩写“@”是指令“v-on”的缩写“....

网友评论

      本文标题:Vue学习笔记[05]-v-on指令的使用

      本文链接:https://www.haomeiwen.com/subject/yuoyvctx.html