Expressions
Expressions
<div id="app">
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getSalePrice() }}</p>
</div>
See: Delimiters
Binding
<a v-bind:href="url">...</a>
Shorthand syntax
<a :href="url">...</a>
True or false will add or remove attribute
<button :disabled="isButtonDisabled">...
If isActive is truthy, the class ‘active’ will appear
<div :class="{ active: isActive }">...
Style color set to value of activeColor
<div :style="{ color: activeColor }">
See: v-bind
Directives
Element inserted/removed based on truthiness
<p v-if="inStock">{{ product }}</p>
<p v-else-if="onSale">...</p>
<p v-else>...</p>
Toggles the display: none CSS property
<p v-show="showProductDetails">...</p>
Two-way data binding
<input v-model="firstName" >
| Method | Description |
|---|---|
v-model.lazy="..." |
Syncs input after change event |
v-model.number="..." |
Always returns a number |
v-model.trim="..." |
Strips whitespace |
See: Directives
Actions/Events
Calls addToCart method on component
<button v-on:click="addToCart">...
Shorthand syntax
<button @click="addToCart">...
Arguments can be passed
<button @click="addToCart(product)">...
To prevent default behavior (e.g. page reload)
<form @submit.prevent="addProduct">...
Only trigger once
<img @mouseover.once="showImage">...
| Method | Description |
|---|---|
.stop |
Stop all event propagation |
.self |
Only trigger if event.target is element itself |
Keyboard entry example
<input @keyup.enter="submit">
Call onCopy when control-c is pressed
<input @keyup.ctrl.c="onCopy">
See: Events
List rendering
The :key is always recommended
<li v-for="item in items"
:key="item.id">
{{ item }}
</li>
To access the position in the array
<li v-for="(item, index) in items">...
To iterate through objects
<li v-for="(value, key) in object">...
Using v-for with a component
<cart-product v-for="item in products"
:product="item"
:key="item.id">
See: List Rendering
Component
Component anatomy
Vue.component('my-component', {
components: {
// Components that can be used in the template
ProductComponent,
ReviewComponent
},
props: {
// The parameters the component accepts
message: String,
product: Object,
email: {
type: String,
required: true,
default: "none"
validator: function (value) {
// Should return true if value is valid
}
}
},
data: function() {
// `data` must be a function
return {
firstName: 'Vue',
lastName: 'Mastery'
}
},
computed: {
// Return cached values until dependencies change
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
// Called when firstName changes value
firstName: function (value, oldValue) { ... }
},
methods: { ... },
template: '<span>{{ message }}</span>',
// Can also use backticks in `template` for multi-line
})
See: Components Basics
Lifecycle hooks
| Method | Description |
|---|---|
beforeCreate |
After the instance has been initialized # |
created |
After the instance is created # |
beforeMount |
Before the first render # |
mounted |
After the instance has been mounted # |
beforeUpdate |
When data changes, before the DOM is patched # |
updated |
After a data change # |
beforeDestroy |
Before the instance is destroyed # |
destroyed |
After a Vue instance has been destroyed # |
See: Lifecycle Hooks
Custom events
Set listener on component, within its parent
<button-counter v-on:incrementBy="incWithVal">
Inside parent component
methods: {
incWithVal: function (toAdd) { ... }
}
Inside button-counter template
this.$emit(
'incrementBy', // Custom event name
5 // Data sent up to parent
)
Use props to pass data into child components, custom events to pass data to parent elements.
See: Custom Events
Single file components
Single file
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
module.exports = {
data: function () {
return {
greeting: 'Hello'
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Separation
<template>
<div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>
Slots
Using a single slot
Component template
<div>
<h2>I'm a title</h2>
<slot>
Only displayed if no slot content
</slot>
</div>
Use of component with data for slot
<my-component>
<p>This will go in the slot</p>
</my-component>
See: Slots
Multiple slots
Component template
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot>Default content</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
Use of component with data for slots
<app-layout>
<h1 slot="header">Page title</h1>
<p>the main content.</p>
<p slot="footer">Contact info</p>
</app-layout>
See: Slots
Also see
- Vue CLI (cli.vuejs.org)
- Vue Router (router.vuejs.org)
- Vue DevTools (chrome.google.com)
- Nuxt.js (nuxtjs.org)
- Vue.js v1.0.28 cheatsheet Legacy version
0 Comments for this cheatsheet. Write yours!