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

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

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>

lowercase Example: {{ msg | lowercase }} ‘ABC’ => ‘abc’

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

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

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

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

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

elementDirectives Type: Object Details: A hash of element directives to be made available to the Vue instance. See also: Element Directives Assets Naming Convention