01-HelloWorld/01-Socks.html

<!-- https://www.vuemastery.com -->
<html>
  <head>
    <script src="https://unpkg.com/vue"></script>
    <link href="./assets/style.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" rel="stylesheet">
    <title>Basic Socks</title>
  </head>
  <body>
    <div id="app">
      <div class="nav-bar"><h1>Basic Socks</h1></div>
      <div class="product">
        <div class="product-image">
          <img v-bind:src="image" :title="imageTitle">
          <!-- Attribute Shorthands -->
          <!-- :src, :alt, :title, :class, :style, :disabled -->
        </div>

        <div class="product-info">
          <!-- Binding -->
          <h1>{{ product }}</h1>


          <!-- Conditionals -->
          <div>
            <!-- Falsey will not include in DOM -->
            <p v-if="inventory > 10">In Stock</p>
            <p v-else-if="inventory">Almost sold out</p>
            <p v-else>Out of Stock</p>

            <!-- Render with display: none -->
            <p v-show="inventory < 0">Wuuk?</p>
          </div>


          <!-- Events -->
          <button
            v-on:click="cart++; inventory--"
            :disabled="!inventory"
            class="add-to-cart"
            :class="inventory ? '' : 'disabledButton'"
          >
            <!-- Method: addToCart -->
            Add to Cart
          </button>

          <div class="cart">
            {{ cart }}
            <i class="fas fa-shopping-cart"></i>
          </div>


          <!-- Loops -->
          <div v-for="variant in variants"
            :key="variant.id"
            class="color-box"
            :style="{backgroundColor: variant.color}"
            @mouseover="setImage(variant.color, $event)"
          ></div>
        </div>
      </div>
    </div>

    <a href="00-Hello.html" class="prev">
        <i class="fas fa-arrow-left"></i> moving back
      </a>
    <a href="02-ComputedSocks.html" class="next">
      moving on <i class="fas fa-arrow-right"></i>
    </a>
  </body>
</html>


<script type="text/javascript">
  Vue.createApp({
    data() {
      return {
        product: 'Socks',
        image: './assets/socks-green.jpg',
        imageTitle: 'Green Socks',
        variants: [
          {id: 1, color: 'green'},
          {id: 2, color: 'blue'}
        ],
        inventory: 3,
        cart: 0
      };
    },
    methods: {
      addToCart() {
        this.cart++;
        this.inventory--;
      },
      setImage(color, event) {
        console.log('Vue instance with data and methods', this, event);
        this.image = `./assets/socks-${color}.jpg`;
      }
    }
  }).mount('#app');
</script>


<!-- livereload -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>