Vue实例 任务清单

<style>
li{ list-style: none; }
#root{
    width: 400px;
    min-height: 400px;
    box-shadow: 0 0 10px #666;
    margin: 20px auto;
    padding: 20px;
}
.task-input{
    width: 100%;
    height: 30px;
    padding-left: 10px;
    font-size: 13px;
    border: 1px solid #ccc;
}
.task-count{ 
    padding: 0;
    height: 30px;
    clear: both;
}
.task-count li:first-of-type{
    float: left;
    font-size: 14px;
    color: red;
}
.task-count .action{
    float: right;
    padding: 0;
}
.task-count .action a{
    font-size: 14px;
    text-decoration: none;
    color: #888;
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #fff;
}   
.task-count .action .active{
    border-color: #888;
}
.tasks{
    box-shadow: 0 0 2px #ccc;
    padding: 10px;
}
.tasks .todo-list{
    padding: 0;
    margin: 0;
}
.tasks .todo-list .todo{
    height: 40px;
    line-height: 40px;
}
.tasks .todo-list .active{
    color: #999;
    text-decoration: line-through;
}
.tasks .todo-list .destroy{
    color: red;
    background: #fff;
    border: none;
    float: right;
    margin-top: 12px;
    cursor: pointer;
}
.tasks .todo-list .editing .view{
    display: none;
}
.tasks .todo-list .editing .edit{
    display: block;
}
.tasks .todo-list .edit{
    display: none;
    width: 80%;
    padding: 4px 10px;
}
</style>
<div id="root">
    <p>添加任务：</p>
    <input 
        class="task-input"
        placeholder="输入任务 回车即可添加任务"
        type="text"
        v-on:keyup.enter="addTodo"
        v-model="todo"
    >
    <ul class="task-count" v-show="list.length">
        <li>{{noCheckedLength}} 个任务未完成 </li>
        <li class="action">
            <a class="active" href="javascript:;">所有任务</a>
            <a href="javascript:;">未完成的任务</a>
            <a href="javascript:;">完成的任务</a>
        </li>
    </ul>
    <p>任务列表：</p>
    <div class="tasks">
        <span v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list">
            <todo-item
                class="todo"
                :class="{active: item.isChecked, editing: item === edtorTodos}"
                v-for="(item, index) in list"
                :content="item"
                :index="index"
            ></todo-item> 
        </ul>
    </div>
</div>
<script>
Vue.component('todo-item', {
    props: ['content', 'index'],
    template: `
        <li>
            <div class="view">
                <input class="toggle" type="checkbox" v-model="content.isChecked">
                <label @dblclick="edtorTodo(content)">{{content.title}}</label>
                <button class="destroy" @click="deleteTodo(index)">x</button>
            </div>
            <input 
            
                type="text" 
                class="edit" 
                v-model="content.title"
                @blur="edtorTodoed(content, index)"
                @keyup.13="edtorTodoed(content, index)"
                @keyup.esc="cancelTodo(content)"
            />
        </li>
    `,
    data () {
        return {

        }
    }
})
new Vue({
    el: '#root',
    data: {
        list: [
            {
                title: 'xiaobai'
            }
        ],
        todo: '',
        edtorTodos: '',  // 记录编辑的数据
        beforeTitle: ''
    },
    methods: {
        // addTodo () {
        //  if(!this.todo) return;
        //  this.list.push({
        //      title: this.todo,
        //      isChecked: false
        //  })
        //  this.todo = '';
        // },
        // watch: {
        //  list: {
                
        //  }
        // },
        // deleteTodo (index) { // 删除
        //  this.list.splice(index, 1)
        // },
        // edtorTodo (todo) { // 编辑
        //  this.beforeTitle = todo.title;
        //  this.edtorTodos = todo;
        // },
        // edtorTodoed (todo, index) { // 编辑成功
        //  // 如果输入框为空 则删除列表
        //  if(!todo.title) this.list.splice(index, 1);
        //  this.edtorTodos = ''
        // },
        // cancelTodo (todo) { // 取消编辑
        //  todo.title = this.beforeTitle;
        //  this.edtorTodos = ''
        // }
    },
    // directives: { // 自定义组件
    //  'focus': {
    //      update (el, binding){
    //          if(binding.value){
    //              el.focus();
    //          }
    //      }
    //  }
    // },
    computed: {
        noCheckedLength () { // 计算未完成任务的数量
            return this.list.filter(function(item){
                return !item.isChecked
            }).length
        }
    }
})
</script>