<div id="demo">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var demo = new Vue({
  el: '#demo',
  data: {
    message: 'Hello Vue.js!'
  }
})

10 Second Example

<div id="app">
  <ul>
    <li v-for="todo in todos">{{ todo.text }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn ES6' },
      { text: 'Learn Vue.js' },
      { text: 'Learn Vuex' }
    ]
  }
})

<template v-for="todo in todos" track-by="$index"> <!-- template & track-by -->
<div v-for="(key, val) in object"> <!-- named $key -->
<span v-for="n in 10">{{ n }} </span> <!-- Range -->

Lists

One time binging 
<span>{{* message }}</span>

Raw HTML
<span>{{{ html }}}</span>

HTML Attributes
<span id="item-{{ id }}"></span>

JavaScript Expressions
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

Filters
{{ message | capitalize }}
{{ message | filterA | filterB }}
{{ message | filter 'arg1' arg2 }}

Interpolations

Conditional rendering
<p v-if="greeting">Hello!</p> <!-- lazy, toggle cost -->
<p v-show="ok">OK</p> <!-- initial render -->
<p v-else>Bye!</p>

Arguments
<a v-bind:href="url"></a> <!-- same as href="{{ url }}" -->
<a v-on:click="doSomething">

Shorthands
<a :href="url"></a>
<a @click="doSomething"></a>

Modifiers
<input @keyup.enter="onEnter">
<button @click.stop.prevent="doThis"></button>

Directives

<div id="example-2">
  <button v-on:click="say('hi')">Say Hi</button>
  <button v-on:click="say('what')">Say What</button>
</div>

new Vue({
  el: '#example-2',
  methods: {
    say: function (msg) {
      alert(msg)
    }
  }
})

Methods & Event Handling

<div id="name">{{ fullname }}</div>

var vm = new Vue({
  el: '#name',
  data: {
    firstName: 'Evan',
    lastName: 'You'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Getter-only by default
fullName: {
  get: function () {}
  set: function (newValue) {}
}

Computed Properties

<div id="example">
  <my-component></my-component>
</div>

var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})

Vue.component('my-component', MyComponent)

new Vue({
  el: '#example'
})

Components

vue-loader

<script>
  export default {
    data () {
      return {
        message: 'Hello Vue.js!'
      }
    }
  }
</script>

<template lang="jade">
  #demo
    p {{ message }}
    input(v-model="message")
</template>

<style lang="stylus" scoped>
  #demo
    border 1px solid green
</style>

Hello.vue

vuejs/vue-loader

Syntax Highlighting

Sublime Text

Atom

Vim

Visual Studio Code

Brackets

JetBrains products

Demo 01 Hot Reload

ismaeldcom/vuejs-presentation-jul-2016/src/modules/HotReload

ESLint

eslint/eslint

The pluggable linting utility for JavaScript and JSX

Editors

SublimeLinter-eslint

Sublime Text Build Next

Vim

Atom linter-eslint

JetBrains Products

 Visual Studio Code

Demo 02 ESLint

ismaeldcom/vuejs-presentation-jul-2016/src/modules/ESLint

Vuex

vuejs/vuex

Flux inspired Application Architecture for Vue.js

Components Communication

css-tricks.com

Application Structure

├── index.html
├── main.js
├── router.js
├── store.js
├── assets
│   └── ...
├── constants
│   ├── colors.styl
│   └── ...
├── components
│   ├── Button.vue
│   └── ...
├── modules
│   ├── Login
│   │   ├── index.vue
│   │   ├── state.js
│   │   ├── actions.js
│   │   ├── constants.js
│   │   └── ...
│   └── ...
└── views
    ├── Home.vue
    └── ...

Demo 03 Vuex Counter

ismaeldcom/vuejs-presentation-jul-2016/src/modules/Counter