<div id="app">
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getExpiryDate() }}</p>
</div>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">
v.model.lazy="..." // Syncs input after change event
v.model.number="..." // Always returns a number
v.model.trim="..." // Strips whitespace<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">...</li>To iterate through objects:
<li v-for="(value, key)" in object">...</li>Using v-for with a component:
<cart-product v-for="item in products" :product="item" :key="item.id"><a v-bind:href="url">...</a>
<a :href="url">...</a> // ShorthandTrue or false will add or remove attribute:
<button :disabled="isButtonDisabled">...</button>If isActive is truthy, the class 'active' will appear:
<div :class="{ active: isActive }">...</div>Style color set to value of activeColor:
<div :style="{ color: activeColor }">...</div>Calls addToCart method on component:
<button v-on:click="addToCart">...</button>
<button @click="addToCart">...</button> // ShorthandArguments can be passed:
<button @click="addToCart(product)">...</button>To prevent default behaviour (e.g. page reload):
<form @submit.prevent="addProduct">...</form>Only trigger once:
<img @mouseover.once="showImage">
.stop // Stop all event propagation
.self // Only trigger if event.target is element itselfKeyboard entry example:
<input @keyup.enter="submit">Call onCopy when control-c is pressed:
<input @keyup.ctrl.c="onCopy">Key modifiers:
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.metaMouse modifiers:
.left
.right
.middle<template>
<span>{{ message }}</span>
</template>
<script>
import ProductComponent from '@/components/ProductComponent'
import ReviewComponent from '@/components/ReviewComponent'
export default {
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 () { // 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: { /* ... */ }
}
</script>Use props (above) to pass data into child components, custom events to pass data to parent elements.
Set listener on component, within its parent:
<button-counter v-on:incrementBy="incWithVal">...</button-counter>Inside parent component:
methods: {
incWithVal: function (toAdd) { ... }
}Inside button-counter template:
this.$emit('incrementyBy', 5)beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
Component template MyComponent:
<div>
<h2>I'm a title</h2>
<slot>
Only displayed if no slot content
</slot>
</div>Use of MyComponent with custom data for the slot:
<my-component>
<p>This will go in the slot</p>
</my-component>Component AppLayout 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 AppLayout with custom data for the slots:
<app-layout>
<h1 slot="header">Page title</h1>
<p>The main content</p>
<p slot="footer">Contact info</p>
</app-layout>Command line interface for rapid Vue development.
Navigation for a Single-Page Application.
Browser extension for debugging Vue applications.
Library for server side rendering, code-splitting, hot-reloading, static generation and more.
- Report issues
- Open pull request with improvements
- Spread the word
- Reach out to me directly at mauriurraco@gmail.com
btc: 36V7HqqENSKn6iFCBuE4iCdtB29uGoCKzN
eth: 0xB419E3E9fa2233383E0877d442e55C34B9C944dD
