Javascript variables and Vue props

javascript.js

// Dit is een string
const productName = 'Loop Colors';

// Dit is een Template string
const title = `De naam van het product is ${productName}`;
// Wordt: "De naam van het product is Loop Colors 400ml"

// Booleans. Kunnen alleen maar true of false zijn
const isValid = false;

// Number
const price = 1200;

// Array van strings
const productNames = ['Loop Colors','Dope Colors']

// Array van nummers
const prices = [1200, 1300, 1400];

// Array van variabelen
const productNames = [productName, productName];
// Dit is hetzelfde als ['Loop Colors', 'Loop Colors']

// Object is een verzameling van: Strings, Numbers, booleans, arrays en andere objecten
const product = {
    name: 'Loop colors',
    price: 1200
    variants: [
        { name: 'Loop variant 1' },
        { name: 'Loop variant 2' }
    ]
};

// Array van objecten
const products = [product, product, product];

// Alle arrays kun je:
// Filteren met products.filter()
// Zoeken naar 1 element met products.find()
// Omzetten naar een andere vorm met products.map()

// Omzetten naar producten met alleen een price met .map
const productsWithPrice = products.map(product => {
    // Return een nieuw object, met alleen de price
    return {
        price: product.price
    }
});

console.log(productsWithPrice);
// [ { price: 1200 }, {price: 1200}, {price: 1200} ]

VuePage.vue

<template>

  <!-- Geef string door aan component. hetzelfde als standaard HTML attributen -->
  <ProductCard
      title="Dit wordt de titel"
  />

  <!-- Geef een variabele door aan component -->
  <ProductCard
      :title="productName"
  />

  <!-- Geef variabelen mee aan een component. Variabelen kunnen alles zijn: Objecten, Arrays, Numbers, Booleans -->
  <ProductCard
      :relatedProducts="products"
  />
  <ProductCard
      :numbers="[1, 2, 3, 4, 5]"
  />

  <!-- Geef een Template string door aan component -->
  <ProductCard
      :title="`Product titel ${productName}`"
  />
  <!-- Dit wordt na renderen:
        title="Product titel Loop Colors"
      -->

</template>