【IMWeb训练营作业】-Todo List

来源：互联网发布：霍尼韦尔监控软件下载编辑：程序博客网时间：2024/05/14 21:40

*本次讲解的是一个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 unfinishedvar  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);

3.最后实现的效果图.gif

（由于gif只能播放一次，所以看不了请刷新, 请见谅）
这里写图片描述

The End……

0 0