【IMWeb训练营作业】-Todo List

linjinhao

于 2017-04-19 22:56:29 发布

阅读量275

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_36594738/article/details/70247039

版权

*本次讲解的是一个Todo List 的小例子，目的是能够让我们让我们快速地了解Vue的一些入门知识，还有一些常用的函数以及内置指令，下面是我通过IMWeb训练营所写的一个作业。

1这里是html模块，主要用了几个内置指令并通过js代码来实现主要功能常用的几个内置指令有：
（1）v-bind 　动态的绑定数据。简写为“：”；
（2）v-on 　　绑定事件监听器简写为“@”;
（3）v-html 　可以解析数据中的html结构
（4）v-text 　更新数据，会覆盖已有结构；
（5） v-show 　根据值的真假，切换元素的display属性；
（6）v-if 　　根据值的真假，切换元素会被销毁，重建；
　　　……

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="index.css">
    <script src="vue.js"></script> //引入vue
</head>
<body>
<div class="page-top">
    <div class="page-content">
        <h2>任务计划列表</h2>
    </div>
</div>
<div class="main">
    <h3 class="big-title">添加任务：</h3>
    <input
            placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务"
            class="task-input"
            type="text"
            v-model="todo"
            v-on:keyup.13="addTodo"
            />
    <ul class="task-count" v-show="list.length">
        <li>{{noCheckeLength}}个任务未完成</li>
        <li class="action">
            <a class="active" href="#all">所有任务</a>
            <a class="active" href="#unfinished">未完成的任务</a>
            <a class="active" href="#finished">完成的任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">

        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list">
            <li class="todo" :class="{completed: item.isChecked,editing: item === edtorTodos}" v-for="item in filteredList" >
                <div class="view">
                    <input class="toggle" type="checkbox" v-model="item.isChecked" />
                    <label @dblclick="edtorTodo(item)">{{ item.title }}</label>
                    <button class="destroy" @click="deleteTodo(item)"></button>
                </div>
                <input
                        v-foucs="edtorTodos === item"
                        class="edit"
                        type="text"
                        v-model = "item.title"
                        @blur="edtorTodoed(item)"
                        @keyup.13="edtorTodoed(item)"
                        @keyup.esc="cancelTodo(item)"
                        />
            </li>
        </ul>
    </div>
</div>
<script src="./app.js"></script>
</body>
</html>

2.这里是js模块

var store={
    save:function(key,value){
       localStorage.setItem(key,JSON.stringify(value));
    },
    fetch:function(key){
        return JSON.parse(localStorage.getItem(key))||[];
    }
}
//取出所有值
var list=store.fetch("miaov-new-class");
//过滤时候有三种情况 all finished unfinished
var  filter={
    all:function(list){
        return list;

    },
    finished:function(list){
        return list.filter(function(item){
            return item.isChecked;
        })

    },
    unfinished:function(list){
        return list.filter(function(item){
            return !item.isChecked;
        })

    }
}

var vm=new Vue({
    el:".main",
    data:{
        list:list,
        todo:"",
        edtorTodos:'',  //记录正在编辑的数据
        beforeTitle:'', //记录正在编辑的数据的title
        visibility:"all" //通过属性的变化对数据进行筛选
    },
    watch:{
        /*list: function () {  //监控list这个属性，当这个属性对应的的值发生变化就会执行函数
            store.save("miaov-new-class",this.list);
        }*/
        list:{
            handler:function(){
                store.save("miaov-new-class",this.list);
            },
            deep:true
        }
    },
    computed:{
        noCheckeLength:function(){
            return this.list.filter(function(item){
                return !item.isChecked
            }).length
        },
        filteredList: function () {

            return filter[this.visibility](list) ? filter[this.visibility](list):list;
        }
    },
    methods:{
        addTodo:function(){  //添加任务
            this.list.push({
                title:this.todo,
                isChecked:false
            });
            this.todo = '';
        },
        deleteTodo:function(todo){ //删除任务
            var index = this.list.indexOf(todo);
            this.list.splice(index,1);
        },
        edtorTodo:function(todo){  //编辑任务
            console.log(todo);
            //编辑任务的时候，记录一下编辑这条任务的title，方便在取消编辑的时候重新给之前的title
            this.beforeTitle = todo.title;

            this.edtorTodos = todo;


        },
        edtorTodoed:function(todo){ //编辑任务成功
            this.edtorTodos = '';
        },
        cancelTodo:function(todo){  //取消编辑任务

            todo.title = this.beforeTitle;

            this.beforeTitle = '';

            //让div显示出来，input隐藏
            this.edtorTodos = '';
        }
    },
    directives:{
        "foucs":{
            update:function(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    }
});

function watchHashChange(){
    var hash=window.location.hash.slice(1);
    vm.visibility=hash;
}

watchHashChange();
window.addEventListener("hashchange",watchHashChange);