<div id="app">
  <div class="container">
      Price calculator
    <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 class="well">
     <code>total</code> = 
     <code>price</code> + 
      <code>shipping fee</code> - 
      IF <code>total</code> &lt; <code>shipping fee</code> THEN 
      <code>total</code> = <code>shipping fee</code>

<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 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;">    
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