filters Type: Object Details: A hash of filters to be made available to the Vue instance. See also: Custom Filters Assets Naming Convention

v-text Expects: String Details: Updates the element’s textContent. Internally, {{ Mustache }} interpolations are also compiled as a v-text directive on a textNode. The directive form requires a wrapper element, but offers slightly better performance and avoids FOUC (Flash of Uncompiled Content). Example: <span v-text="msg"></span> <!-- same as --> <span>{{msg}}</span>

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( 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

v-if Expects: * Usage: Conditionally render the element based on the truthy-ness of the expression value. The element and its contained data bindings / components are destroyed and re-constructed during toggles. If the element is a <template> element, its content will be extracted as the conditional block. See also: Conditional Rendering

methods Type: Object Details: Methods to be mixed into the Vue instance. 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 Vue instance. Example: var vm = new Vue({ data: { a: 1 }, methods: { plus: function () { this.a++ } } }) vm.plus() vm.a // 2 See also: Methods and Event Handling

We’ve covered most of the basics - now it’s time to take a deep dive! One of Vue.js’ most distinct features is the unobtrusive reactive system - models are just plain JavaScript objects, modify it and the view updates. It makes state management very simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue.js’ reactivity system. How Changes Are Tracked When you pass a p

v-on Shorthand: @ Expects: Function | Inline Statement Argument: event (required) Modifiers: .stop - call event.stopPropagation(). .prevent - call event.preventDefault(). .capture - add event listener in capture mode. .self - only trigger handler if event was dispatched from this element. .{keyCode | keyAlias} - only trigger handler on certain keys. Usage: Attaches an event listener to the element. The event type is denoted by the argument. The expression can either be a method na

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

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