···

Api

Instantiation Options

Data & Logic

data

The data object for the ViewModel. It can be accessed as vm.$data:

1
2
3
4
5
var data = { a: 1 }
var vm = new Vue({
    data: data
})
vm.$data === data // true

The ViewModel will proxy access to all its properties, therefore you can manipulate the properties on the ViewModel and the changes get synced back to the actual data object:

1
2
3
4
5
6
7
vm.a // 1

vm.a = 2
data.a // 2

data.a = 3
vm.a // 3

The object must be JSON-compliant (no circular references). You can use it just like an ordinary object, and it will look exactly the same when serialized with JSON.stringify. You can also share it between multiple ViewModels.

Under the hood, Vue.js attaches a hidden property __emitter__ and recursively converts the object’s non-function properties into getters and setters that trigger events when called. Properties with keys that starts with $ or _ are skipped.

methods

Methods to be mixed into the ViewModel. You can access these methods directly on the VM instance, or use them in directive expressions. All methods will have their this context automatically bound to the ViewModel instance.

Example:

1
2
3
4
5
6
7
8
9
10
var vm = new Vue({
    data: { a: 1 },
    methods: {
        plus: function () {
            this.a++
        }
    }
})
vm.plus()
vm.a // 2

computed

Computed properties to be mixed into the ViewModel. All getters and setters have their this context automatically bound to the ViewModel instance.

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var vm = new Vue({
    data: { a: 1 },
    computed: {
        // get only, just need a function
        aDouble: function () {
            return this.a * 2
        },
        // both get and set
        aPlus: {
            $get: function () {
                return this.a + 1
            },
            $set: function (v) {
                this.a = v - 1
            }
        }
    }
})
vm.aPlus // 2
vm.aPlus = 3
vm.a // 2
vm.aDouble // 4

paramAttributes

An array of attribute names to be set on the VM as initial data.

Example:

1
<div id="test" size="100" message="hello!"></div>
1
2
3
4
5
6
7
8
new Vue({
    el: '#test',
    paramAttributes: ['size', 'message'],
    created: function () {
        console.log(this.size) // 100
        console.log(this.message) // 'hello!'
    }
})

Param attributes can also contain interpolation tags, but they will only be evaluated once, and changes inside the component will not affect the source data.

DOM Element

el

Provide the ViewModel with an existing DOM element. It can be either a querySelector() selector or an actual node. The element will be accessible as vm.$el. If this option is omitted, a detached node will be automatically created.

template

A string template to be inserted into vm.$el. Any existing markup inside vm.$el will be overwriiten. If the replace option is true, the template will replace vm.$el entirely.

If it starts with # it will be used as a querySelector and use the selected element’s innerHTML and the template string. This allows the use of the common <script type="x-template"> trick to include templates.

Vue.js uses DOM-based templating. The compiler walks through DOM elements and looks for directives and creates data bindings. This means all Vue.js templates are parsable HTML that can be converted into actual DOM elements by the browser. Vue.js converts string templates into DOM fragments so they can be cloned when creating more ViewModel instances. If you want your templates to be valid HTML, you can configure the directive prefix to start with data-.

replace

Whether to replace vm.$el with the template’s top level element.

tagName

The tag name to be used when creating vm.$el.

id

Set as vm.$el.id.

className

Set as vm.$el.className.

attributes

A hash of HTML attributes to be set on vm.$el.

Lifecycle Hooks

All lifecycle hooks have their this context bound to the ViewModel instance they belong to. For 'attached', 'detached', 'beforeDestroy', 'afterDestroy', the ViewModel instance will also emit events in the form of 'hook:eventName'.

created

Called synchronously before the compilation starts. At this stage, instance properties like $el, $data are available, but the DOM is in a pre-compile state, and the data has not been observed yet. Usually the created hook is used to attach additional initial states to the ViewModel. Any non-function properties attached to the ViewModel in the created hook will be copied to the data object and observed later.

If you use $watch in the created hook, the callback will also be called when the data is freshly observed. If you want to watch for changes only, attach the watcher in the ready hook.

ready

Called synchronously after the compilation has ended and the ViewModel instance is ready. At this stage, the DOM is fully compiled and the data has been observed, so changing existing data properties will trigger View updates. Additional properties attached to the ViewModel or the data object in the ready hook will not be observed.

attached

Called when vm.$el is attached to DOM by a directive or a VM instance method such as $appendTo(). Direct manipulation of vm.$el will not trigger this hook.

detached

Called when vm.$el is removed from the DOM by a directive or a VM instance method. Direct manipulation of vm.$el will not trigger this hook.

beforeDestroy

Called before a ViewModel is destroyed. At this stage, the data is still observed, and all bindings and directive instances are still in effect. All child VMs of the current instance are also still active. This hook is mostly used internally but you can use it to clean up things you set up in the created or ready hook. There’s no need to turn off $on and $watch listeners in here because all of them will be automatically turned off during $destroy.

afterDestroy

Called after a ViewModel has been destroyed. When this hook is called, all bindings and directives of the ViewModel have been unbound and all child ViewModels have also been destroyed.

Private Assets

These are private assets that will be available only to this ViewModel and its children during compilation.

directives

A hash of directives to be made available to the ViewModel. For details on how to write a custom directive, see Writing Custom Directives.

filters

A hash of filters to be made available to the ViewModel. For details on how to write a custom filter, see Writing Custom Filters.

components

A hash of components to be made available to the ViewModel. For details on how to extend and compose ViewModels, see Composing ViewModels.

partials

A hash of partials to be made available to the ViewModel. Also see v-partial.

transitions

A hash of transitions to be made available to the ViewModel. For details see Adding Transition Effects.

Others

parent

A parent ViewModel instance. Passing in this option establishes a parent-child relationship between the newly created instance and the parent instance. This enables the same benefits with v-component style composition:

  1. The child can bind to data from the parent’s scope in its template;
  2. The child can access the parent as this.$parent;
  3. The parent and child can communicate using the Event Communication Methods.
  4. When the parent is destroyed, the child will be destroyed too.

This option is useful when you need to manually manage the lifecycle of nested ViewModels for better memory control.

lazy

Whether to trigger v-model updates only on change events (hit enter or lose focus) or on every input event (on every keystroke).

Note: since 0.10.5 child ViewModels will inherit their parents’ lazy option if they don’t have the option set on themselves.

Caught a mistake or want to contribute to the documentation? Fork this site on Github!