When initializing a Vue object, you pass in an object:
const vm = new Vue({
})
This object accepts a number of properties.
Property
Description
data
allows 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.
props
it’s a set of attributes that are exposed to parent components as input data.
propsData
default data for props. Only useful during testing
methods
a set of methods that are defined on the Vue instance
computed
like methods, but cached internally
watch
allows 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.$watch
set up a watcher for property changes in the Vue data. It can also watch for value changes inside objects
vm.$set
set a property
vm.$delete
delete a property
Events
vm.$emit
triggers a custom event on the vm Vue instance
vm.$on
listen for a custom event on the vm Vue instance
vm.$once
like $on, but listens only once
vm.$off
removes an event listener from the Vue instance
Lifecycle Methods
vm.$mount
mount a Vue instance on a DOM element, in case it was not mounted yet
vm.$forceUpdate
force the vm Vue instance to re-render. Does not force child components to rerender.
vm.$nextTick
accepts a callback and schedules that for the next DOM update cycle
vm.$destroy
destroys the application and remove all child components, observers and listeners