v-

v-* 属性 (HTML)

[1] Directives - vue.js ( ( 版)) <http://vuejs.org/api/directives.html>

[2] Getting Started - vue.js ( ( 版)) <http://vuejs.org/guide/>

[3] Directives In Depth - vue.js ( ( 版)) <http://vuejs.org/guide/directives.html>

[4] Vue.js ( ()) <https://vuejs.org/v2/api/#Directives>

Example:

<!-- method handler -->

<button v-on:click="doThis"></button>

<!-- inline statement -->

<button v-on:click="doThat('hello', $event)"></button>

<!-- shorthand -->

<button @click="doThis"></button>

<!-- stop propagation -->

<button @click.stop="doThis"></button>

<!-- prevent default -->

<button @click.prevent="doThis"></button>

<!-- prevent default without expression -->

<form @submit.prevent></form>

<!-- chain modifiers -->

<button @click.stop.prevent="doThis"></button>

<!-- key modifier using keyAlias -->

<input @keyup.enter="onEnter">

<!-- key modifier using keyCode -->

<input @keyup.13="onEnter">

<!-- the click event will be triggered at most once -->

<button v-on:click.once="doThis"></button>

[5] Vue.js ( ()) <https://vuejs.org/v2/api/#v-bind>

<!-- bind an attribute -->

<img v-bind:src="imageSrc">

<!-- shorthand -->

<img :src="imageSrc">

[6] Vue.js ( ()) <https://vuejs.org/v2/api/#v-bind>

<!-- DOM attribute binding with prop modifier -->

<div v-bind:text-content.prop="text"></div>

<!-- prop binding. "prop" must be declared in my-component. -->

<my-component :prop="someThing"></my-component>

<!-- XLink -->

<svg><a :xlink:special="foo"></a></svg>

[7] Template Syntax — Vue.js ( ()) <https://vuejs.org/v2/guide/syntax.html>