Migration guide doesn't mention change for v-on event naming

The migration guide doesn’t mention that v-on:mouseUp, v-on:mouseDown no longer works, and must be changed to v-on:mouseup, v-on:mousedown. (all lowercase)

That was a real tricky change to find out.

http://rc.vuejs.org/guide/migration.html

[chrisvfritz]

It looks like the problem only occurs in string templates. Knowing that, it looks like what’s happening is that since Vue 1 uses the browser’s own HTML parser, the attribute names are normalized to lowercase, since attributes are case-insensitive. This then causes the mouseUp event - which is not a valid DOM Event - to be transformed into the correct event: mouseup.

I’m glad we solved the mystery, but this isn’t something I’ll be adding to the migration guide. The fact that event names with the wrong case would sometimes work was never an intentional feature, but an unavoidable implementation quirk.

[enjikaka]

@chrisvfritz https://github.com/enjikaka/vue-event-test

This is a fresh vue init webpack <folder-name> ( https://github.com/vuejs/vue-cli ) with additon of;

<h2>Event tests</h2>
<ul>
  <li><button v-on:mouseup="mouseUp">v-on:mouseup (lowercase)</button></li>
  <li><button v-on:mouseUp="mouseUp">v-on:mouseUp (camelCase)</button></li>
</ul>

and

  methods: {
    mouseUp () {
      alert('Mouse up works!');
    }
  }

in Hello.vue.

Only the lower case one works…

Testable here: https://enjikaka.github.io/vue-event-test/