beforeDestroy Type: Function Details: Called right before a Vue instance is destroyed. At this stage the instance is still fully functional. See also: Lifecycle Diagram

vm.$once( event, callback ) Arguments: {String} event {Function} callback Usage: Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.

vm.$root Type: Vue instance Read only Details: The root Vue instance of the current component tree. If the current instance has no parents this value will be itself.

vm.$destroy( [remove] ) Arguments: {Boolean} [remove] - default: false Usage: Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners and, if the remove argument is true, remove its associated DOM element or fragment from the DOM. Triggers the beforeDestroy and destroyed hooks. See also: Lifecycle Diagram

vm.$appendTo( elementOrSelector, [callback] ) Arguments: {Element | String} elementOrSelector {Function} [callback] Returns: vm - the instance itself Usage: Append the Vue instance’s DOM element or fragment to target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).

Method Handler We can use the v-on directive to listen to DOM events: <div id="example"> <button v-on:click="greet">Greet</button> </div> We are binding a click event listener to a method named greet. Here’s how to define that method in our Vue instance: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // define methods under the `methods` object methods: { greet: function (event) { // `this` inside methods point to the Vue instance

devtools Type: Boolean Default: true (false in production builds) Usage: // make sure to set this synchronously immediately after loading Vue Vue.config.devtools = true Configure whether to allow vue-devtools inspection. This option’s default value is true in development builds and false in production builds. You can set it to true to enable inspection for production builds.

vm.$after( elementOrSelector, [callback] ) Arguments: {Element | String} elementOrSelector {Function} [callback] Returns: vm - the instance itself Usage: Insert the Vue instance’s DOM element or fragment after target element. The target can be either an element or a querySelector string. This method will trigger transitions if present. The callback is fired after the transition has completed (or immediately if no transition has been triggered).

array.$set(index, value) Arguments {Number} index {*} value Usage Set an element in the array to a value by index and trigger view updates. vm.animals.$set(0, { name: 'Aardvark' }) See also: Array Detection Caveats

A common need for data binding is manipulating an element’s class list and its inline styles. Since they are both attributes, we can use v-bind to handle them: we just need to calculate a final string with our expressions. However, meddling with string concatenation is annoying and error-prone. For this reason, Vue.js provides special enhancements when v-bind is used for class and style. In addition to Strings, the expressions can also evaluate to Objects or Arrays. Binding HTML Classes Althou