Vue js application object syntax

Tags: ,



I just started to learn the vue.js and came across this syntax. I want to know what this syntax is called.

const CounterApp = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
Vue.createApp(Counter).mount('#counter')

Can anyone explain if data and mounted are properties of object or methods because never seen this type of syntax of object literal in js. Usually they have : between value and key.

Answer

It’s a short way writing for methods declaration inside object introduced in ES6

 data() {
    return {
      counter: 0
    }
  },

is equals to

data: function() {
  return {
    counter: 0
  }
}


Source: stackoverflow