Vue.js uses a DOM-based templating implementation. This means that all Vue.js templates are essentially valid, parsable HTML enhanced with some special attributes. Keep that in mind, since this makes Vue templates fundamentally different from string-based templates. Interpolations Text The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces): <span>Message: {{ msg }}</span> The mustache tag will be replaced with the value of the m

propsData 1.0.22+ Type: Object Restriction: only respected in instance creation via new. Details: Pass props to an instance during its creation. This is primarily intended to make unit testing easier. Example: var Comp = Vue.extend({ props: ['msg'], template: '<div>{{ msg }}</div>' }) var vm = new Comp({ propsData: { msg: 'hello' } })

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

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

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

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

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

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