Vue 2.0 Hello World

by Daniel Newman

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h2 v-once>
    {{message}}
  </h2>
  <h3>{{ listCount }} items ({{remaining}} remaining)</h3>

  <ol>
    <todo-item v-for="item in todos" v-bind:todo="item"></todo-item>
  </ol>

  <input v-model="message" />
  <button :title="'Click to Do'" @click="reverseMessage">reverse</button>

  <br>
  <br>
  <h4 v-if="remaining > 0">
  In Progress
</h4>
  <h4 v-else>
  Completed!
</h4>
  <br/>
  <br/>
  <div class="log">
    {{log}}
  </div>
</div>

<template id="todo-item-template">
  <li :class="{'is-done': todo.done}" @click="toggleDone(todo)">{{todo.text}}</li>
</template>

CSS

li.is-done {
  color: red;
  text-decoration: line-through;
}

JavaScript

Vue.component('todo-item', {
  props: ['todo'],
  template: '#todo-item-template',
  methods: {
    toggleDone: function(todo) {
      todo.done = !todo.done;
    }
  }
})

var myApp = new Vue({
  el: '#app',
  data: {
    message: 'Daniel Newman',
    log: 'waiting input',
    seen: false,
    todos: [{
      text: 'dan',
      done: true
    }, {
      text: 'newman',
      done: false
    }, {
      text: 'isgreat',
      done: false
    }]
  },
  methods: {
    updateTodos: function() {
      return this.todos.push({
        text: 'added'
      });
    },
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('');
    }
  },
  computed: {
    listCount: function() {
      return this.todos.length;
    },
    remaining: function() {
      return this.todos.filter(function(i) {
        return !i.done
      }).length
    }
  },
  watch: {
    message: function(newVal) {
      for (var t in this.todos)
        if (this.todos[t].text === newVal) return;
      this.todos.push({
        text: newVal
      })
    }
  },
  filters: {
    capitalize: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})