EXPRESSIONS
VUE ESSENTIALS
CHEAT SHEET
<div id="app">
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getSalePrice() }}</p>
</div>
LIST RENDERING
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
BINDING
DIRECTIVES
<p v-if="inStock">{{ product }}</p>
<a v-bind:href="url">...</a>
<a :href="url">...</a>
<p v-show="showProductDetails">...</p>
Element inserted/removed based on truthiness:
ACTIONS / EVENTS
<button @click="addToCart">...
<button v-on:click="addToCart">...
Calls addToCart method on component:
<button @click="addToCart(product)">...
Arguments can be passed:
<form @submit.prevent="addProduct">...
To prevent default behavior (e.g. page reload):
<li v-for="(item, index) in items">...
To access the position in the array:
<li v-for="(value, key) in object">...
To iterate through objects:
<cart-product v-for="item in products"
:product="item" :key="item.id">
Using v-for with a component:
<img @mouseover.once="showImage">...
Only trigger once:
<input @keyup.enter="submit">
Keyboard entry example:
<input @keyup.ctrl.c="onCopy">
Call onCopy when control-c is pressed:
Toggles the display: none CSS property:
<p v-else-if="onSale">...</p>
<p v-else>...</p>
<input v-model="firstName" >
Two-way data binding:
v-model.lazy="..." Syncs input after change event
.stop Stop all event propagation
.self Only trigger if event.target is element itself
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
Key modifiers:
.left .right .middle
Mouse modifiers:
v-model.number="..." Always returns a number
v-model.trim="..." Strips whitespace
<button :disabled="isButtonDisabled”>...
True or false will add or remove attribute:
<div :class="{ active: isActive }">...
If isActive is truthy, the class ‘active’ will appear:
<div :style="{ color: activeColor }">
Style color set to value of activeColor:
shorthand
shorthand
key always recommended
