Vuejs Expressions
<div id="app">
<p>I have a {{ product }}</p>
<p>{{ product + 's' }}</p>
<p>{{ isWorking ? 'YES' : 'NO' }}</p>
<p>{{ product.getSalePrice() }}</p>
</div>
Vuejs Binding
Fullhand attribute binding
<a v-bind:href="url">...</a>
Shorthand
<a :href="url">...</a>
Two way data binding
<input v-model="firstName">
Vuejs Binding2
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 }">
Vuejs Binding3
Toggles the display: none CSS property:
<p v-show="showProductDetails">
...
</p>
Passing arguments to a computed binding:
<template>
<ProductComponent :cost="product_type('product_2')"></ProductComponent>
</template>
<script>
import ProductComponent from @/components/ProductComponent
export default {
components: { ProductComponent },
data() {
return {
products: {
product_1: '100',
product_2: '200',
product_3: '300'
}
}
},
computed: {
product_type() {
// Argument passed to arrow function, NOT computed function declaration.
return (product_id) => { // Arrow function to allow 'this' instance to be accessible.
return this.products[product_id] // Square bracket notation for 'any' type variable
}
}
}
}
</script>
Vuejs List Rendering
Basic array loop
<li v-for="item in items" :key="item.id">
{{ item }}
</li>
Loop with access to index
<li v-for="(item, index) in items">...</li>
Baisc object loop
<li v-for="value in object">...</li>
<li v-for="(value, index) in object">...</li>
<li v-for="(value, name, index) in object">...</li>
Loop using component instead of html native element e.g. div, li
<cart-product v-for="item in products" :product="item" :key="item.id">
Vuejs Actions/Events
<button v-on:click="addToCart">...</button> // Fullhand
<button @click="addToCart">...</button> // Shorthand
Arguments 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 itself
Keyboard 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
.meta
Mouse modifiers:
.left
.right
.middle
Vuejs Bootstrap
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
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)