Introduccion a Vue

Moustache (curly brackets)

moustache expression {{ username }}

Directives

v-if

<button v-if="userIsLoggedIn">Log Out</button>
<button v-if="!userIsLoggedIn">Log In</button>

v-for

<ul>
  <li v-for="todo in todoList">{{ todo }}</li>
</ul>

v-model (modifica el data de app.js modificando su moustache expression asociada)

<input v-model="username" />

v-on:click

<button v-on:click="tweets.push(newTweet)">Add Tweet</button>

Más ejemplos de directivas

Descargar demo

Components

Ejemplo Tweet.js

const Tweet = Vue.component('tweet', {
 props: ['message', 'author'],
 template: '<div class="tweet"><h3>{{ author }}</h3><p>{{ message }}</p></div>'
});

Ejemplo HTML

<tweet v-for="tweet in tweets" 
             v-bind:message="tweet"
             v-bind:author="username"></tweet>

Descargar demo