PROGRAM WITH ERIK PWE
CHEAT SHEET Lifecycle Hooks
Component Anatomy
Vue.component(‘my-component ’, { beforeCreate beforeUpdate
props: { The parameters the component accepts created updated
message: String, beforeMount beforeDestroy
product: Object, mounted destroyed
email: {
type: String,
required: true,
Using a Single Slot
<div>
default: “none”
<h2>I’m a title</h2>
validator: function (value) {
<slot>
Return true or false Only displayed if no content
} </slot>
} </div>
}, Component template
data: function() { Must be a function
return { <my-component>
<p>This will go in the slot</p>
firstName: ‘Vue’ ,
</my-component>
lastName: ‘Mastery’
Use of component with data for slot
}
},
methods: { … } Multiple Slots
computed: ( Return values cached until <div class=”container”>
fullName: function () { dependencies change <header>
return this.firstName + ‘ ‘ + this.lastName <slot name=”header”></slot>
} </header>
<main>
}
<slot>Default content</slot>
watch: { Called when firstName changes value </main>
firstName: function (value, oldValue) { .. } <footer>
}, <slot name=”footer”></slot>
components: { components that can be used in the template </footer>
ProductComponenet, ReviewComponent </div>
}, Component template
template: ‘ <span>{{ message }}</span>’, <app-layout>
}) Can also use backticks for multi-line <h1 slot=”header”>Page title</h1>
<p>the main content.</p>
Custom Events <p slot=”footer”>Contact info</p>
Use props (above) to pass data into child components, </app-layout>
custom events to pass data to parent elements. Use of component with data for slot
<button-counter v-on:incrementBy=”incWithVal”>
Non-Parent Child Communication
Set listener on component, within its parent var bus = new Vue()
methods: ( Create global instance
incWithVal: function (toAdd) { … }
} bus.$emit(‘id-selected’, 1)
Inside parent component Custom event name Emit event from anywhere
bus.$on(‘id-selected’,
this.$emit(‘incrementBy’, 5) Data sent up to parent function (id) { … })
Inside button-counter template Listen for event
PROGRAM WITH ERIK PWE
CHEAT SHEET Binding
Expressions
<div id=”app”> <a v-bind:href=”url”>..</a>
<p>I have a {{ product }}</p> shorthand
<p>{{ product + ‘s’ }}</p> <a :href=”url”>..</a>
<p>{{ isWorking ? ‘YES’ : ‘NO’ }}</p>
<p>{{ product.getSalePrice() }}</p>
<button :disabled=”isButtonDisabled”>…
</div>
True or false will add or remove attribute
Directives <div :class=”{ active: isActive }”>…
<p v-if=”inStock”>{{ product }}</p>
If isActive is truthy, the class ‘active’ will appear
Element inserted/removed based on truthiness
<div :style=”{ color: activeColor }”>
<p v-else-if=”onOrder”>..</h1>
<h1 v-else>..</h1> Style color set to value of activeColor
<h1 v-show=”ok”>Hello!</h1> Actions/Events
Uses element’s display CSS property <button v-on:click=”addToCart”>…
<input v-model=”firstName” /> Calls addToCart method on component
Shorthand
Two-way data binding
<button @click=”addToCart”>…
v-model.lazy=”…” Syncs input after change
<button @click=”addToCart(product)”>…
v-model.number=”…” Always returns a number Arguments can be passed
v-model.trim=”…” Strips whitespace <form @submit.prevent=”addProduct”>…
To prevent page reload
List Rendering
<li v-for=”item in items” :key=”item.id”> <img @mouseover.once=”showImage”>…
{{ item }} Only trigger once
</li> key always recommended
.stop Stop all event propagation
<li v-for=”(item, index) in items”>…
.self Only trigger if event.target is element itself
To access the position in the array
<li v-for=”(value, key) in object”>… <input @keyup.enter=”submit”>
To iterate through objects Keyboard entry example
<my-item v-for=”item in products” <input @keyup.ctrl.67=”onCopy”>
:products=”item” :key=”item.id”>
Using v-for with a component Call onCopy when control-c (c is key code 67) is
pressed
.tab .up .ctrl
.delete .down .alt
.esc .left .shift
.space .right .meta
Key modifiers
.left .right .middle
Mouse modifiers
