forked from vuejs/vue
-
Notifications
You must be signed in to change notification settings - Fork 0
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>
Questions & comments? Please open issue at vuejs/Discussion