v-for We can use the v-for directive to render a list of items based on an Array. The v-for directive requires a special syntax in the form of item in items, where items is the source data Array and item is an alias for the Array element being iterated on: Example: <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' }

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>

json Arguments: {Number} [indent] - default: 2 Usage: Output the result of calling JSON.stringify() on the value instead of outputting the toString() value (e.g. [object Object]). Example: Print an object with 4-space indent: <pre>{{ nestedObject | json 4 }}</pre>

Join the Vue.js Community! The vibrant community around Vue.js is continually growing. Nevertheless, helpful hands are always welcome. In fact, a growing community is the best sign of a healthy OSS project worth putting any effort into, even if it is as the user of the software. If you would like to also be a part of the Vue.js community, this page was meant to support your endeavors. Have a look at the resources listed below to get some orientation around the sailing ship of Vue.js and… ….we

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

init Type: Function Details: Called synchronously after the instance has just been initialized, before data observation and event / watcher setup. See also: Lifecycle Diagram

Let’s start with a quick tour of Vue’s data binding features. If you are more interested in a high-level overview first, check out this blog post. The easiest way to try out Vue.js is using the JSFiddle Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples. If you prefer downloading / installing from a package manager, check out the Installation page. Hello World <div id="app"> {{ message }} </div> new Vue({ el: '#app',

Basics Usage You can use the v-model directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. Text <span>Message is: {{ message }}</span> <br> <input type="text" v-model="message" placeholder="edit me"> Checkbox Single checkbox, boolean v

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

filterBy Limited to: directives that expect Array values, e.g. v-for Arguments: {String | Function} targetStringOrFunction "in" (optional delimiter) {String} [...searchKeys] Usage: Return a filtered version of the source Array. The first argument can either be a string or a function. When the first argument is a string, it will be used as the target string to search for in each element of the Array: <div v-for="item in items | filterBy 'hello'"> In the above example, only items that