vue一个简单应用

最近在学习vue，做的一个小的例子程序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container {
            margin-top: 20px;
        }

        .user-list {
            margin-top: 20px;
            border-top: 1px solid #ccc;
        }

        .user-list h2 {
            text-align: center;
        }

        .user-list th,td {
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="container" id="user-box">
        <form role="form" v-on:keyup.enter="addUser();">
              <div class="form-group">
                <label for="email">姓名</label>
                <input type="text" class="form-control" id="name" v-model="name" placeholder="请输入姓名">
              </div>
              <div class="form-group">
                <label for="age">年龄</label>
                <input type="number" class="form-control" id="age" v-model="age" placeholder="请输入年龄">
              </div>
              <button type="button" class="btn btn-primary" @click="addUser();">添加</button>
              <button type="button" class="btn btn-danger" v-on:click="reset();">重置</button>
        </form>

        <div class="user-list">
            <h2>用户信息表</h2>
            <table class="table table-bordered">
              <tr>
                  <th>序号</th>
                  <th>姓名</th>
                  <th>年龄</th>
                  <th>操作</th>
              </tr>
              <tr v-show="this.users.length == 0">
                  <td colspan="4">暂时没有用户数据</td>
              </tr>
              <tr v-for="(user, index) in users">
                 <td>{{index+1}}</td>
                 <td>{{user.name}}</td>
                 <td>{{user.age}}</td>
                 <td><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal"
                 v-on:click="nowIdx = index;dialogTitle = '确认删除用户【'+user.name+'】？';">删除</button></td>
              </tr>
              <tr v-show="this.users.length > 0">
                  <td colspan="4"><div class="pull-right"><button type="button" class="btn btn-danger" data-toggle="modal" 
                  data-target="#myModal" v-on:click="index = -1;dialogTitle = '确认删除全部用户？';">删除全部</button></div></td>
              </tr>
            </table>

        </div>

        <div class="modal fade" id="myModal">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <h4 class="modal-title">{{dialogTitle}}</h4>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-danger" v-on:click="makeDel();">确定</button>
                  </div>
                </div><!-- /.modal-content -->
              </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>


    <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/vue/2.0.3/vue.min.js"></script>


    <script src="demo.js"> </script>
</body>
</html>

demo.js

var users = JSON.parse(localStorage.getItem('u')|| "[]");

        new Vue({
            el: '#user-box',
            data: {
                users:  users,
                name: '',
                age: '',
                dialogTitle: '',
                nowIdx: -1
            },
            methods: {
                addUser: function() {
                    this.users.push({"name": this.name, "age": this.age});

                    localStorage.setItem('u', JSON.stringify(this.users));

                    this.reset();
                },
                reset: function() {
                    this.name = '';
                    this.age = '';
                },
                makeDel: function() {
                     if (-1 === this.nowIdx) {
                        this.users = [];
                    } else {
                         this.users.splice(this.nowIdx,1);
                    }
                    $('#myModal').modal('toggle');
                    localStorage.setItem('u', JSON.stringify(this.users));
                }
            }
        });

null