Tutorial by Examples

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 msg property on the corresponding data object. It will also be updated whenever the dat...

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use triple mustaches: <div>{{{ raw_html }}}</div> The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use...

Mustaches can also be used inside HTML attributes: <div id="item-{{ id }}"></div> Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are used in wrong places.

Vue.js allows you to append optional “filters” to the end of an expression, denoted by the “pipe” symbol: {{ message | capitalize }} Here we are “piping” the value of the message expression through the built-in capitalize filter, which is in fact just a JavaScript function that returns the capit...