Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Learn Vue JS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .is-loading { background-color: red; }
    </style>
</head>
<body>
    <div id="root">
        <!-- <input type="text" id="input" v-model="message" />
        <p>The value of input is {{message}}</p> -->

        <ul>
            <li v-for="name in names" v-text="name"></li>
        </ul>

        <input type="text" v-model="newName">
        <button @click="addName">Add name</button>

        <hr />

        <button :title="title" :class="{ 'is-loading': isLoading }" @click="toggleClass">Hover me</button>
        <button :disabled="disabled" @click="disableMe">Disable me</button>

        <hr />

        {{ reversedMessage }}

        <hr />

        <h1>All Tasks</h1>
        <ul>
            <li v-for="task in tasks" v-text="task.description"></li>
        </ul>


        <hr />

        <h1>Incomplete Tasks</h1>
        <ul>
            <li v-for="task in incompleteTasks">
                <input type="checkbox" v-model="task.completed"> {{ task.description }}
            </li>
        </ul>

        <h1>Completed Tasks</h1>
        <ul>
            <li v-for="task in completedTasks">
                <input type="checkbox" v-model="task.completed"> {{ task.description }}
            </li>
        </ul>

        <hr />
        <h1>Components</h1>

        <task>Go to the store</task>
        <task>Go to the store</task>
        <task>Go to work</task>

    </div>

    <script src="https://unpkg.com/vue@2.6.9/dist/vue.js"></script>
    <script src="main.js"></script>
    <script>
        var app = new Vue({
            el: '#root',
            data: {
                message: 'Hello world',
                newName: '',
                names: ['Joe', 'John', 'Jane'],
                title: "Setting the title",
                isLoading: false,
                disabled: false,
                tasks: [
                    { description: "Go To Store", completed: true },
                    { description: "Finish screencast", completed: false },
                    { description: "Make donation", completed: false },
                    { description: "Clear inbox", completed: false },
                    { description: "Clear inbox", completed: false },
                    { description: "Clean room", completed: true }
                ]
            },

            methods: {
                addName() {
                    this.names.push(this.newName);
                    this.newName = '';
                },

                toggleClass() {
                    this.isLoading = !this.isLoading
                },

                disableMe() {
                    this.disabled = true;
                }
            },

            computed: {
                reversedMessage() {
                    return this.message.split('').reverse().join('');
                },

                incompleteTasks() {
                    return this.tasks.filter(task => !task.completed);
                },

                completedTasks() {
                    return this.tasks.filter(task => task.completed);
                }

            }
        });
    </script>
</body>
</html>