basico con vue

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VueJs</title>
    <link rel="stylesheet" href="js/bulma.min.css">
</head>
<body>
<section id="app" class="hero is-light is-bold is-fullheight">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">Vue</h1>
            <h2 class="subtitle">By Kotoki</h2>

                <table class="table is-fullwidth">
                    <tbody>
                        <tr v-for="item in items">
                            <td>{{item.name}}</td>
                            <td>
                                <a v-bind:href="item.web">visitar webs</a>
                            </td>
                            <td>{{item.salary}}</td>
                            <td>
                                <span v-if="item.enabled" class="has-text-success" >Activo</span>
                                <span v-else class="has-text-danger">Inactivo</span>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <td>
                            <input v-model="newEntry.name" type="text" class="input" placeholder="Nombre" />
                        </td>
                        <td>
                            <input v-model="newEntry.web" type="text" class="input" placeholder="Web" />
                        </td>
                        <td>
                            <input v-model="newEntry.salary" type="number" class="input" placeholder="Sueldo" />
                        </td>
                        <td class="text-right">
                            <button v-bind:click="add_item" type="button" class="button is-fullwidth">Agregar</button>
                        </td>
                    </tfoot>
                </table>
                        </div>
                    </div>

                </section>
<script src="js/vue.js"></script>

<script>
    const app = new Vue({
        el: "#app",
        data: {
            items: [
            ],

            newEntry: {
                name:'',
                web:'',
                salary:0,
                enabled: true,
            }
        },  // end data

        methods: {
            add_item() {
                this.items.push({
                    name:    this.newEntry.name,
                    web:     this.newEntry.web,
                    salary:  this.newEntry.salary,
                    enabled: this.newEntry.enabled,
                });
                this.newEntry.name = '';
                this.newEntry.web = '';
                this.newEntry.salary = 0;
                this.newEntry.enabled = true;

            },   // end add
        }, // end methods


}) // end apps

                // {name: 'eduardo', web:'http://www.google.com', enabled: true},
                // {name: 'miranda', web:'http://www.google.com', enabled: true},
                // {name: 'sofia', web:'http://www.google.com', enabled: true},
                // {name: 'gabriel', web:'http://www.google.com', enabled: false}

</script>


</body>
</html>