Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        showspan: true,
        todos: [
            { id: 1, text: 'Learn JavaScript' },
            { id: 2, text: 'Learn Vue' },
            { id: 3, text: 'Build something awesome' }
        ],
        label: 'You loaded this page on ' + new Date().toLocaleString(),
        isActive: true,
        hasError: false,
        counter: 0
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    },
    computed: {
        lenMessage: function () {
            return this.message.length
        }
    }
})