Vue JS Options passed to a Vue object

When initializing a Vue object, you pass in an object:

const vm = new Vue({

})

This object accepts a number of properties.

PropertyDescription
dataallows to pass a set of reactive data that will be used by the Vue app. All reactive properties must be added at initialization time, you can’t add new ones later.
propsit’s a set of attributes that are exposed to parent components as input data.
propsDatadefault data for props. Only useful during testing
methodsa set of methods that are defined on the Vue instance
computedlike methods, but cached internally
watchallows to watch properties, and call a function when they change

Example of defining data, methods and computed properties:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
    reverseMessageAsMethod: function () {
      return this.message.split('').reverse().join('')
    }
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

console.log(vm.reverseMessageAsMethod) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

Methods Data

vm.$watchset up a watcher for property changes in the Vue data. It can also watch for value changes inside objects
vm.$setset a property
vm.$deletedelete a property

Events

vm.$emittriggers a custom event on the vm Vue instance
vm.$onlisten for a custom event on the vm Vue instance
vm.$oncelike $on, but listens only once
vm.$offremoves an event listener from the Vue instance

Lifecycle Methods

vm.$mountmount a Vue instance on a DOM element, in case it was not mounted yet
vm.$forceUpdateforce the vm Vue instance to re-render. Does not force child components to rerender.
vm.$nextTickaccepts a callback and schedules that for the next DOM update cycle
vm.$destroydestroys the application and remove all child components, observers and listeners

Leave a Reply

Your email address will not be published. Required fields are marked *