components

components Type: Object Details: A hash of components to be made available to the Vue instance. See also: Components

The Vue Instance

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

vm.$set()

vm.$set( keypath, value ) Arguments: {String} keypath {*} value Usage: Set a data value on the Vue instance given a valid keypath. In most cases you should prefer setting properties using plain object syntax, e.g. vm.a.b = 123. This method is only needed in two scenarios: When you have a keypath string and want to dynamically set the value using that keypath. When you want to set a property that doesn’t exist. If the path doesn’t exist it will be recursively created and made reactive. If

capitalize

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

array.$set()

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

vm.$interpolate()

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!'

attached

attached Type: Function Details: 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.

vm.$root

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.

Custom Directives

Basics In addition to the default set of directives shipped in core, Vue.js also allows you to register custom directives. Custom directives provide a mechanism for mapping data changes to arbitrary DOM behavior. You can register a global custom directive with the Vue.directive(id, definition) method, passing in a directive id followed by a definition object. You can also register a local custom directive by including it in a component’s directives option. Hook Functions A definition object c

v-show

v-show Expects: * Usage: Toggle’s the element’s display CSS property based on the truthy-ness of the expression value. Triggers transitions if present. See also: Conditional Rendering - v-show