Modifier once for v-on

src/compiler/helpers.js

@@ -44,6 +44,10 @@ export function addHandler (
     delete modifiers.capture
     name = '!' + name // mark the event as captured
   }
+  if (modifiers && modifiers.once) {
+    delete modifiers.once
+    name = '~' + name // mark the event as once
+  }
   let events
   if (modifiers && modifiers.native) {
     delete modifiers.native

src/core/vdom/helpers/update-listeners.js

@@ -9,7 +9,7 @@ export function updateListeners (
   remove: Function,
   vm: Component
 ) {
-  let name, cur, old, fn, event, capture
+  let name, cur, old, fn, event, capture, once
   for (name in on) {
     cur = on[name]
     old = oldOn[name]
@@ -20,17 +20,18 @@ export function updateListeners (
       )
     } else if (!old) {
       capture = name.charAt(0) === '!'
-      event = capture ? name.slice(1) : name
+      once = name.charAt(0) === '~'
+      event = capture || once ? name.slice(1) : name
       if (Array.isArray(cur)) {
-        add(event, (cur.invoker = arrInvoker(cur)), capture)
+        add(event, (cur.invoker = arrInvoker(cur)), capture, once)
       } else {
         if (!cur.invoker) {
           fn = cur
           cur = on[name] = {}
           cur.fn = fn
           cur.invoker = fnInvoker(cur)
         }
-        add(event, cur.invoker, capture)
+        add(event, cur.invoker, capture, once)
       }
     } else if (cur !== old) {
       if (Array.isArray(old)) {

src/platforms/web/runtime/modules/events.js

@@ -3,13 +3,27 @@
 
 import { updateListeners } from 'core/vdom/helpers/index'
 
+const onceFlags = {}
+const randomHex = () => (Math.random() + '').substr(2).toString(16)
+
 function updateDOMListeners (oldVnode, vnode) {
   if (!oldVnode.data.on && !vnode.data.on) {
     return
   }
   const on = vnode.data.on || {}
   const oldOn = oldVnode.data.on || {}
-  const add = vnode.elm._v_add || (vnode.elm._v_add = (event, handler, capture) => {
+  const add = vnode.elm._v_add || (vnode.elm._v_add = (event, handler, capture, once) => {
+    if (once) {
+      const randomKey = randomHex() + new Date().valueOf().toString(16) + randomHex()
+      onceFlags[randomKey] = false
+      const oldHandler = handler
+      handler = () => {
+        if (!onceFlags[randomKey]) {
+          onceFlags[randomKey] = true
+          oldHandler()
+        }
+      }
+    }
     vnode.elm.addEventListener(event, handler, capture)
   })
   const remove = vnode.elm._v_remove || (vnode.elm._v_remove = (event, handler) => {

test/unit/features/directives/on.spec.js

@@ -102,6 +102,24 @@ describe('Directive v-on', () => {
     expect(callOrder.toString()).toBe('1,2')
   })
 
+  it('should support once', () => {
+    const numberPushed = []
+    vm = new Vue({
+      el,
+      template: `
+        <div @click.once="foo">
+        </div>
+      `,
+      methods: {
+        foo () { numberPushed.push(1) }
+      }
+    })
+    triggerEvent(vm.$el, 'click')
+    expect(numberPushed.toString()).toBe('1')
+    triggerEvent(vm.$el, 'click')
+    expect(numberPushed.toString()).toBe('1')
+  })
+
   it('should support keyCode', () => {
     vm = new Vue({
       el,

test/unit/modules/compiler/codegen.spec.js

@@ -256,6 +256,13 @@ describe('codegen', () => {
     )
   })
 
+  it('generate events with once modifier', () => {
+    assertCodegen(
+      '<input @input.once="onInput">',
+      `with(this){return _h('input',{on:{"~input":function($event){onInput($event)}}})}`
+    )
+  })
+
   it('generate events with inline statement', () => {
     assertCodegen(
       '<input @input="curent++">',