Constructor Every Vue.js app is bootstrapped by creating a root Vue instance with the Vue constructor function: var vm = new Vue({ // options }) A Vue instance is essentially a ViewModel as defined in the MVVM pattern, hence the variable name vm you will see throughout the docs. When you instantiate a Vue instance, you need to pass in an options object which can contain options for data, template, element to mount on, methods, lifecycle callbacks and more. The full list of options can be fou

Basics Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options. Example: // define a mixin object var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } } } // define a component that uses this mixin var Component = Vue.

What are Components? Components are one of the most powerful features of Vue.js. They help you extend basic HTML elements to encapsulate reusable code. At a high level, Components are custom elements that Vue.js’ compiler would attach specified behavior to. In some cases, they may also appear as a native HTML element extended with the special is attribute. Using Components Registration We’ve learned in the previous sections that we can create a component constructor using Vue.extend(): var M

Vue.extend( options ) Arguments: {Object} options Usage: Create a “subclass” of the base Vue constructor. The argument should be an object containing component options. The special cases to note here are el and data options - they must be functions when used with Vue.extend(). <div id="mount-point"></div> // create reusable constructor var Profile = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>' }) // create an instance of Profile var profi

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

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

Vue.filter( id, [definition] ) Arguments: {String} id {Function | Object} [definition] Usage: Register or retrieve a global filter. // register Vue.filter('my-filter', function (value) { // return processed value }) // two way filter Vue.filter('my-filter', { read: function () {}, write: function () {} }) // getter, return the filter if registered var myFilter = Vue.filter('my-filter') See also: Custom Filter

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

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

destroyed Type: Function Details: Called after a Vue instance has been destroyed. When this hook is called, all bindings and directives of the Vue instance have been unbound and all child Vue instances have also been destroyed. Note if there is a leaving transition, the destroyed hook is called after the transition has finished. See also: Lifecycle Diagram