v- @ : directives support

[woat]

This fixes the highlighting for "v-" and also the shorthand directives "@" ":" for v-bind and v-on.

https://vuejs.org/v2/guide/syntax.html#Directives
https://vuejs.org/v2/guide/syntax.html#v-bind-Shorthand
https://vuejs.org/v2/guide/syntax.html#v-on-Shorthand

[adriaanzon]

How does it highlight this snippet for you?

<template>
  <div v-if="a && b">
    <div :class="{ a: true, b: false }"></div>
    <button @click="trigger('hello')">hello</button>
  </div>
  <my-component :bar = "[0, 1, 2]"></my-component>
  <my-component :bar-foo="[0, 1, 2]"></my-component>
  <my-component :bar2foo="[0, 1, 2]"></my-component>
</template>

For me, it seems to only highlight when there are two words separated by a hyphen:

[woat]

@adriaanzon Good catch, mine is identical:

After changing the pattern from

"[@v:][-:.0-9_a-z]*-[-:.0-9_a-z]*\>"
                   ^

to

""[@v:][-:.0-9_a-z]*[-:.0-9_a-z]*\>"
                   ^

Seems to work good:

I'll update the commit accordingly, thanks.

[adriaanzon]

The second [-:.0-9_a-z]* is now redundant so you can remove that as well 😆

[woat]

@adriaanzon Haha, vimscript patterns are a horror 😷

Updated.

[adriaanzon]

Cool, thanks!