1.0.0 binding syntax cheatsheet

Evan You edited this page Oct 24, 2015 · 4 revisions
<!-- normal directive -->
<div v-if="ok"></div>

<!-- directive with argument -->
<button v-on:click="onClick"></button>

<!-- v-on with argument + key modifier -->
<input v-on:keyup.enter="handleEnter">

<!-- literal modifier: pass literal string to directive -->
<a v-link.literal="/a/b/c"></a>

<!-- binding an attribute with v-bind -->
<img v-bind:src="imgSrc">
<a v-bind:href="baseURL + '/path'">

<!-- shorthand: colon for v-bind -->
<img :src="imgSrc">
<a :href="baseURL + '/path'">

<!-- shorthand: @ for v-on -->
<button @click="onClick"></button>

<!-- key modifier -->
<input @keyup.enter="handleEnter">

<!-- stop/prevent modifier -->
<button @click.stop="onClick"></button>
<form @submit.prevent></form>

<!-- props -->
<my-comp
  prop="literal string"
  v-bind:prop="defaultOneWay"
  v-bind:prop.sync="twoWay"
  v-bind:prop.once="oneTime">
</my-comp>

<!-- component with props and custom events, in shorthand -->
<item-list
  :items="items"
  :open.sync="isListOpen"
  @ready="onItemsReady"
  @update="onItemsUpdate">
</item-list>

<!-- v-el and v-ref now just use the argument -->

<!-- registers vm.$refs.child -->
<comp v-ref:child></comp>

<!-- registers vm.$els.node -->
<div v-el:node></div>