自学了很久的vue，一直没实用过，自己琢磨写了个简单的 todolist 页面，留着以后看看。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
    <style>
        .jumbotron{
            width: 600px;
            padding: 20px;
        }
        .panel{
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="app" class="container jumbotron">
        <h1>hello, {{name}}</h1>
        <div class="input-group">
            <input type="text" class="form-control" placeholder="任务的内容" v-model="message">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button" @click="add">Go</button>
            </span>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">当前任务为：{{message}}</div>
            <ul class="list-group">
                <li v-if="!listDate" class="list-group-item" v-for="(item, index) in list">
                    {{index+1}}.{{item.text}}
                    <button type="button" class="close" @click="remove(index)">&times;</button>
                </li>
                <li v-if="listDate" class="list-group-item">暂无数据</li>
            </ul>
            <div id="sum" class="panel-footer">任务总计：{{list.length}}</div>
        </div>
    </div>
</body>
<script src="vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            name: 'todoList',
            message: '',
            listDate: false,
            list: [
                {
                    text: '声明式渲染'
                },
                {
                    text: '条件预循环'
                },
                {
                    text: '处理用户输入'
                }
            ]
        },
        methods: {
            add: function () {
                this.listDate = false;
                this.list.unshift({text: this.message})
            },
            remove: function (index) {
                this.list.splice(index, 1);
                if(this.list.length === 0){
                    this.listDate = true;
                }
            }
        }
    });
</script>
</html>

也就几句的代码，在vue中做这些数据的事情真是非常方便。