Vuejs Lifecycle Hooks
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
Vuejs Component Anatomy
<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>
Vuejs Custom Events
Use props 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)