App Vue

app.js

Vue.component('increment-button', {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  template: `
    <div>
      <p>Count: {{ numberCount }}</p>
      <button @click.prevent="increment">Increment</button>
    </div>
  `,
  data: function () {
    return {
      numberCount: 0,
    };
  },
  mounted: function () {
    this.numberCount = this.count; 
  },
  methods: {
    increment: function () {
      this.numberCount += 1;
    },
  },
})

var vm = new Vue({
  el: '#app',
  mounted: function () {
    console.log('Ill mounted');
  },
  data: {
    message: 'Hello World',
    cart: [],
    products: [
      {
        id: 1,
        name: 'Pasta dental',
        price: 20.56,
      },
      {
        id: 2,
        name: 'Cepillo dental',
        price: 35.00,
      },
    ]
  },
  methods: {
    add: function (product) {
      this.cart.push(product);
    },
    deleteProduct: function (index) {
      this.cart.splice(index, 1);
    },
  },
  computed: {
    total: function () {
      var sum = 0;
      for (var i = 0; i < this.cart.length; i++) {
        sum += this.cart[i].price;
      };
      return sum;
    },
  },
});