Intro to Vue

by Yomi Eluwande

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="container" id="root">
            <header>
                <p>{{title}}</p>
            </header>
            <section class="content">
                <input placeholder="New Task" v-model="newTask"
                v-on:keypress.enter="addTask">
                <button v-on:click="addTask">Add Task</button>
                <ul>
                    <li v-for="(task, index) in tasks">
                        {{ task.name }}
                        <button v-on:click="completedTask">Mark as Done</button>
                        <button v-on:click="removeTask(index)">X</button>
                    </li>
                </ul>

                <pre>
                    {{$data}}
                </pre>

            </section>
        </div>

JavaScript

var app = new Vue ({

                el : '#root',
                data: {
                    title: 'Adulting To-do List',
                    tasks: [],
                    newTask: ''
                },

                methods: {
                    addTask: function() {
                        if (this.newTask != '' ) {
                            this.tasks.push({name: this.newTask, completed: false}),
                            this.newTask = ''
                        }
                    },
                    removeTask: function(index) {
                        this.tasks.splice(index, 1);
                    },
                    completedTask: function () {
                        this.tasks.completed = true
                    }
                }
            });