Vue Tutorial

https://www.vuemastery.com/courses/intro-to-vue-js

by Rafa Ola

HTML

<body>
  <div class="nav-bar"></div>

  <div id="ourApp">
    <div class="cart">
             <p>Cart({{cart.length}})</p>
    </div>
    <product :premium="premium" @add-to-cart="updateCart" @remove-from-cart="removeFromCart"></product>
  </div>
</body>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#ourApp {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

.nav-bar {
  background: linear-gradient(-90deg, #84CF6A, #16C0B0);
  height: 60px;
  margin-bottom: 15px;
}

.product {
  display: flex;
  flex-flow: wrap;
  padding: 1rem;
}

img {
  border: 1px solid #d8d8d8;
  width: 70%;
  margin: 40px;
  box-shadow: 0px .5px 1px #d8d8d8;
}

.product-image {
  width: 80%;
}

.product-image,
.product-info {
  margin-top: 10px;
  width: 50%;
}

.color-box {
  width: 40px;
  height: 40px;
  margin-top: 5px;
}

.cart {
  margin-right: 25px;
  float: right;
  border: 1px solid #d8d8d8;
  padding: 5px 20px;
}

button {
  margin-top: 30px;
  border: none;
  background-color: #1E95EA;
  color: white;
  height: 40px;
  width: 100px;
  font-size: 14px;
}

.disabledButton {
  background-color: #d8d8d8;
}

.review-form {
  width: 400px;
  padding: 20px;
  margin: 40px;
  border: 1px solid #d8d8d8;
}

input {
  width: 100%;
  height: 25px;
  margin-bottom: 20px;
}

textarea {
  width: 100%;
  height: 60px;
}

.tab {
  margin-left: 20px;
  cursor: pointer;
}

.activeTab {
  color: #16C0B0;
  text-decoration: underline;
}

Vue

Vue.component('product',{
  props: {
    premium:{
      type: Boolean,
      required: true
    }
  },
  template: `
  					<div class="product">

      <div class="product-image">
      
        <img v-bind:src="image">
        
      </div>
      
      <div class="product-info">
      
        <h2>{{ title }}</h2>
        
        <p v-if="inStock">In Stock</p>
        
        <p v-else>Out of Stock</p>
        <p>Shipping: {{shipping}}</p>
        <ul>
          <li v-for="detail in details"> {{ detail }} </li>
        </ul>
        
        <div v-for="(variant, index) in variants" 
            :key="variant.variantId"
            class="color-box"
            :style="{backgroundColor: variant.colour}"
            @mouseover="updateProduct(index)">
         
        </div>
        <button v-on:click="addToCart"
                :disabled="!inStock"
                :class="{disabledButton: !inStock}"> Add to Cart </button>
         <button @click="removeFromCart"> Remove </button>
           
      </div>
      
      <product-tabs :reviews="reviews"></product-tabs>
      
      

    </div>
  					`,
            data() {
            return {
              brand: 'Vue Mastery Sunday',
     product: 'Socks',
     selectedVariant: 0,    
    
     details: ["80% cotton","20% polyester","Gender-neutral"],
     variants:[
                  { variantId: 1,
                    colour: "red",
                    variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-red-onWhite.jpg',
                    variantQuantity: 0
                  },
                  { variantId: 2,
                    colour: "green",
                    variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg',
                    variantQuantity: 10
                  },
                  { variantId: 3,
                    colour: "blue",
                    variantImage: 'https://www.vuemastery.com/images/challenges/vmSocks-blue-onWhite.jpg',
...