beforeCompile Type: Function Details: Called right before the compilation starts. See also: Lifecycle Diagram

v-if In string templates, for example Handlebars, we would write a conditional block like this: <!-- Handlebars template --> {{#if ok}} <h1>Yes</h1> {{/if}} In Vue.js, we use the v-if directive to achieve the same: <h1 v-if="ok">Yes</h1> It is also possible to add an “else” block with v-else: <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> Template v-if Because v-if is a directive, it has to be attached to a single element. But what if we want

Compatibility Note Vue.js does not support IE8 and below, because Vue.js uses ECMAScript 5 features that are un-shimmable in IE8. However Vue.js supports all ECMAScript 5 compliant browsers. Release Notes Detailed release notes for each version are available on GitHub. Standalone Simply download and include with a script tag. Vue will be registered as a global variable. Pro tip: don’t use the minified version during development. you will miss out all the nice warnings for common mistakes. D

limitBy Limited to: directives that expect Array values, e.g. v-for Arguments: {Number} limit {Number} [offset] Usage: Limit the array to the first N items, as specified by the argument. An optional second argument can be provided to set a starting offset. <!-- only display first 10 items --> <div v-for="item in items | limitBy 10"></div> <!-- display items 5 to 15 --> <div v-for="item in items | limitBy 10 5"></div>

Vue.component( id, [definition] ) Arguments: {String} id {Function | Object} [definition] Usage: Register or retrieve a global component. // register an extended constructor Vue.component('my-component', Vue.extend({ /* ... */ })) // register an options object (automatically call Vue.extend) Vue.component('my-component', { /* ... */ }) // retrieve a registered component (always return constructor) var MyComponent = Vue.component('my-component') See also: Components.

vm.$delete( key ) Arguments: {String} key Usage: Delete a root level property on the Vue instance (and also its $data). Forces a digest cycle. Not recommended.

Writing a Plugin Plugins usually add global-level functionality to Vue. There is no strictly defined scope for a plugin - there are typically several types of plugins you can write: Add some global methods or properties. e.g. vue-element Add one or more global assets: directives/filters/transitions etc. e.g. vue-touch Add some Vue instance methods by attaching them to Vue.prototype. A library that provides an API of its own, while at the same time injecting some combination of the above

orderBy Limited to: directives that expect Array values, e.g. v-for Arguments: {String | Array<String> | Function} ...sortKeys {String} [order] - default: 1 Usage: Return a sorted version of the source Array. You can pass any number of Strings to sort on keys. You can also pass an array containing the sorting keys or a Function if you want to use your own sorting strategy instead. The optional order argument specifies whether the result should be in ascending (order >= 0) or desce

Vue.elementDirective( id, [definition] ) Arguments: {String} id {Object} [definition] Usage: Register or retrieve a global element directive. // register Vue.elementDirective('my-element', { bind: function () {}, // element directives do not use `update` unbind: function () {} }) // getter, return the directive definition if registered var myDirective = Vue.elementDirective('my-element') See also: Element Directives

compiled Type: Function Details: Called after the compilation is finished. At this stage all directives have been linked so data changes will trigger DOM updates. However, $el is not guaranteed to have been inserted into the document yet. See also: Lifecycle Diagram