<div id="app">
  <div class="container">
    <h1>
      Price calculator
      <small>Vue.js</small>
    </h1>   
    <p class="comment">with vue components</p>
        
    <div class="row">
      <div class="col-xs-6">
        <price label="Price" :value="price" @update="price=arguments[0]"></price>
        <price label="Shipping" :value="shipping" @update="shipping=arguments[0]"></price>
        <price label="Discount" :value="discount" @update="discount=arguments[0]"></price>
        <div class="alert alert-info">
          total: <strong>{{ total }}</strong>      
        </div>    
      </div>
    </div>
    
    
    <div class="well">
      <h3>Logic</h3>
      <p>
     <code>total</code> = 
     <code>price</code> + 
      <code>shipping fee</code> - 
      <code>discount</code>
      </p>
      <p>
      IF <code>total</code> &lt; <code>shipping fee</code> THEN 
      <code>total</code> = <code>shipping fee</code>
        </p>
  </div>
  </div>    
</div>

<template id="price-template">        
  <div class="form-group">
    <label>{{ label }}</label>
    <input type="text" class="form-control" v-model.number="value" @change="update" placeholder="0">
  </div>
</template>  

<div class="container-fluid footer text-center">    
  <p>A teljes cikket elolvashatod az ITHub-on. Klikkelj a logóra alább!</p>
  <p><em>You can read the Hungarian full article on the ITHub. Click the logo below!</em></p>
  <a href="https://ithub.hu/blog/post/Ismerkedes-a-Vuejs-keretrendszerrel---2-resz---Urlapok-komponensek/" target="ithub">
    <img src="https://ithub.hu/images/ithub-logo-dark.png" alt="ithub logo" style="width: 85px; height: auto;">    
  </a>  
</div>
h1 {
  color: #41b883;
}

.well {
  width: 555px;
  padding-top: 0px;
  background-color: orange;
  color: black;
  font-weight: bold;
}

.well h3 {
  color: rgba;
  font-weight: bold;
}

.well code {
  color: rgba(0,0,0,.85);
  background-color: rgba(255,255,255,.65);  
}

.alert.alert-info {
  background-color: #41b883;
  color: white;  
  font-size: 1.2em;
}

p.comment {  
  color: rgba(0,0,0,.75);
  font-style: italic;    
}

/** footer ***/

.container-fluid {  
  width: 100%;
  margin: 10px 0;
  clear: both;   
}

.footer {
  background-color: #1B1C1D;
  padding: 10px 10px;;
  color: white;
  font-size: 20px;
  font-family: arial;
  text-height: 40px;
  
  em {
    color: #aaa;  
  }
  
  a {
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 10px;    
    color: #ddd;
    text-decoration: none;    
  }
}
Vue.component('price', {
  template: '#price-template',
  props: ['label', 'value'],
  methods: {
    update: function() {          
      this.$emit('update', this.value)
    }
  }
});

new Vue({
  el: '#app',
  data: {
    price: '',
    shipping: '',
    discount: ''   
  },
  computed: {
    total: function() {
      var total = this.price + this.shipping - this.discount;
      return total-this.shipping<0?this.shipping:total;
    }
  }   
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js