Vue.js documentation

A collection of screencasts which mirrors the official Vue.js guide.
    var app = new Vue({ 
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    });
    
    var app = new Vue({
      el: '#app',
      data: {
        seen: true
      }
    })
    
    app.seen = false;
    var app = new Vue({
      el: '#app',
      data: {
        todos: [
          { text: 'Learn JavaScript' },
          { text: 'Learn Vue' },
          { text: 'Build something awesome' }
        ]
      }
    });
    
    app.todos.push({})
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue.js!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        </head>
        <body>
        
            <div id="app">
                <p>{{ message }}</p>
                <input v-model="message">
            </div>
            
            <script src="index.js"></script>
        </body>
    Vue.component('todo-item', {
      template: '<li>This is a todo</li>'
    })
    
    var app = new Vue({
      el: '#app'
    })
    Vue.component('todo-item', {
        props: ['todo'],
        template: '<li>{{ todo.text }}</li>'
    })
    
    var app = new Vue({
        el: '#app',
        data: {
          groceryList: [
            { id: 0, text: 'Vegetables' },
            { id: 1, text: 'Cheese' },
            { id: 2, text: 'Whatever else humans are supposed to eat' }
          ]
        }