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)
Connect to Mongoose Database
const mongoose = require('mongoose');

const db = mongoose.connection;

mongoose.connect("mongodb://localhost:27017/appname");

db.on('open', () => {
    console.log('Connected to mongoDB');
});

db.on('error', (error) => {
    console.log(error);
});
Mongoose Schema

Basic Schema

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

const userSchema = new Schema({
    name: { type: String, required: true, max: 100 },
    email: { type: String, required: false, max: 100, default: null },
});

module.exports = mongoose.model('user', userSchema);