vm.$options Type: Object Read only Details: The instantiation options used for the current Vue instance. This is useful when you want to include custom properties in the options: new Vue({ customOption: 'foo', created: function () { console.log(this.$options.customOption) // -> 'foo' } })

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.$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

vm.$interpolate( templateString ) Arguments: {String} templateString Usage: Evaluate a piece of template string containing mustache interpolations. Note that this method simply performs string interpolation; attribute directives are ignored. Example: // assuming vm.msg = 'hello' vm.$interpolate('{{msg}} world!') // -> 'hello world!'

delimiters Type: Array<String> Default: ["{{", "}}"] Usage: // ES6 template string style Vue.config.delimiters = ['${', '}'] Change the plain text interpolation delimiters.

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

capitalize Example: {{ msg | capitalize }} ‘abc’ => ‘Abc’

ready Type: Function Details: Called after compilation and the $el is inserted into the document for the first time, i.e. right after the first attached hook. Note this insertion must be executed via Vue (with methods like vm.$appendTo() or as a result of a directive update) to trigger the ready hook. See also: Lifecycle Diagram

props Type: Array | Object Details: A list/hash of attributes that are exposed to accept data from the parent component. It has a simple Array-based syntax and an alternative Object-based syntax that allows advanced configurations such as type checking, custom validation and default values. Example: // simple syntax Vue.component('props-demo-simple', { props: ['size', 'myMessage'] }) // object syntax with validation Vue.component('props-demo-advanced', { props: { // just type chec