Vue-Essentials-Cheat-Sheet

Prévia do material em texto

EXPRESSIONS
VUE ESSENTIALS
CHEAT SHEET
I have a {{ product }}
{{ product + 's' }}
{{ isWorking ? 'YES' : 'NO' }}
{{ product.getSalePrice() }}
LIST RENDERING
{{ item }}
BINDING
DIRECTIVES
{{ product }}
...
...
...
Element inserted/removed based on truthiness:
ACTIONS / EVENTS
...
...
Calls addToCart method on component:
...
Arguments can be passed:
...
To prevent default behavior (e.g. page reload):
...
To access the position in the array:
...
To iterate through objects:
Using v-for with a component:
...
Only trigger once:
Keyboard entry example:
Call onCopy when control-c is pressed:
Toggles the display: none CSS property:
...
...
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
...
True or false will add or remove attribute:
...
If isActive is truthy, the class ‘active’ will appear:
Style color set to value of activeColor:
Need help on your path to Vue Mastery?
Checkout our tutorials on VueMastery.com
shorthand
shorthand
key always recommended
Created by your friends at
VueMastery.com
COMPONENT ANATOMY
CUSTOM EVENTS
VUE ESSENTIALS
CHEAT SHEET
Vue.component('my-component', {
components: {
ProductComponent, ReviewComponent
},
props: {
message: String,
product: Object,
email: {
type: String,
required: true,
default: 'none'
validator: function (value) {
}
}
},
data: function() {
return {
firstName: 'Vue',
lastName: 'Mastery'
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function (value, oldValue) { ... }
},
methods: { ... },
template: '{{ message }}',
})
LIFECYCLE HOOKS
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
USING A SINGLE SLOT
 
 I'm a title
 
 Only displayed if no slot content
 
Component template:
 Title
 The main content.
 Footer
Use of component with data for slot:
MULTIPLE SLOTS
Default content
Component template:
LIBRARIES YOU SHOULD KNOW
Vue CLI
Command line interface for rapid Vue development.
This will go in the slot
Use of component with data for slot:
Use props (above) to pass data into child components, 
custom events to pass data to parent elements.
Set listener on component, within its parent:
Inside button-counter template:
this.$emit('incrementBy', 5)
Inside parent component:
methods: {
incWithVal: function (toAdd) { ... }
}
The parameters the component accepts
Should return true if value is valid
Must be a function
Return cached values until
dependencies change
Called when firstName changes value
Data sent up to parent
Custom event name
Components that can be used in the template
Can also use backticks for multi-line
Vue Router
Navigation for a Single-Page Application.
Vue DevTools
Browser extension for debugging Vue applications.
Nuxt.js
Library for server side rendering, code-splitting, hot-re-
loading, static generation and more.