【IMWeb训练营作业】Vue.js便签

来源：互联网发布：cf淘宝商城编辑：程序博客网时间：2024/05/22 12:06

功能说明：

1.回车添加任务

2.勾选完成任务

3.点×删除任务

4.双击标签编辑任务

5.查看未完成任务与已完成任务

源码：

------------------------todos.html-------------------------------------

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>todos</title>    <link rel="stylesheet" href="index.css">    <style>    </style>    <script src="../js/vue.js"></script></head><body>    <div class="page-top">        <div class="page-content">            <h2>任务计划列表</h2>        </div>    </div>    <div class="main">        <h3 class="big-title">添加任务：</h3>        <input type="text" class="task-input" placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" v-on:keyup.enter="addTodo(123,$event)" v-model="todo">        <ul class="task-count">            <li v-show="list.length">{{noCheckedLength}}个任务未完成</li>            <li class="action">                <a href="#">所有任务</a>                <a href="#unfinished" >未完成的任务</a>                <a href="#finished" class="active">完成的任务</a>            </li>            <div class="clear"></div>        </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===editorTodos}" v-for="item in filteredList">                    <div class="view">                        <input class="toggle" type="checkbox" v-model="item.isChecked">                        <label @dblclick="editorTodo(item)">{{item.title}}</label>                        <button class="destroy" v-on:click="deleteTodo(item)">x</button>                    </div>                    <input class="edit" v-focus="editorTodos===item" type="text" v-model="item.title" @blur="editorTodoed(item)" @keyup.enter="editorTodoed(item)" @keyup.esc="cancelTodo(item)">                </li>            </ul>        </div>    </div>    <script src="js/app.js"></script></body></html>

-------------index.css-------------

*{    padding:0;    margin:0;}.page-top{    position: fixed;    top:0;    left:0;    height: 40px;    background-color: #E8593D;    width:100%;    text-align: center;}.page-content{    color: #FFFFFF;    width: 70%;    margin-left: 15%;    line-height: 40px;    text-align: left;}.main{    margin-top: 50px;    margin-left: 15%;    width: 70%;    /*height: 800px;*/    padding: 5px;}.main .task-input{    margin-top: 10px;    height:40px;    width:100%;    font-size: 20px;}.main ul li{    /*list-style-position: inside;*/    list-style-type: none;    margin-top: 10px;}.task-count li{    width: 100%;    float: left;}.action{    float: right;}.completed label{    text-decoration:line-through;}.editing label{    display: none;}.editing .edit{    display: block;}.edit{    display: none;}.action .active{    background-color: #ccc;}.clear{    clear: both;}

------------app.js------------------------------

/** * Created by sotto on 2017-4-17. *///存取localStorage中的数据var store = {    save(key, value){        localStorage.setItem(key, JSON.stringify(value));    },    fetch(key){        return JSON.parse(localStorage.getItem(key))||[];    }};// var list = [//     {//         title: "吃饭睡觉打豆豆1",//         isChecked: false//     },//     {//         title: "吃饭睡觉打豆豆1",//         isChecked: true//     },// ];var list = store.fetch("miaov");var vm = new Vue({    el: ".main",    data: {        list: list,        todo: "",        editorTodos: "",//记录正在编辑的数据        beforeTitle:'',        visibility: "all",//通过属性值变化对数据进行筛选    },    watch:{        /*list: function () {//监控list数据，当这个            store.save("miaov",this.list);        }*/        list: {            handler: function () {                store.save("miaov",this.list);            },            deep: true        },    },    computed:{        noCheckedLength: function () {            return this.list.filter(function(item){                return !item.isChecked            }).length        },        filteredList: function () {            // 过滤的三种情况            var filter = {                all: function () {                    return list;                },                finished: function () {                    return list.filter(function(item){                        return item.isChecked;                    });                },                unfinished: function () {                    return list.filter(function(item){                        return !item.isChecked;                    });                }            };            return filter[this.visibility]?filter[this.visibility](list):list;        }    },    methods: {        addTodo(data,event) {            //添加任务            //向list中添加一项任务            /*                {                    title:                }             */            // console.log(event);            //事件处理函数中的this指向的是当前的根实例            // if(event.keyCode === 13){                this.list.push({                    title: this.todo,                    isChecked: false                });            // }            this.todo="";        },        deleteTodo(todo){            var index = this.list.indexOf(todo);            this.list.splice(index,1);        },        editorTodo(todo){//编辑任务            // console.log(todo);            this.beforeTitle = todo.title;            this.editorTodos = todo;            console.log(todo);            console.log(this.editorTodos);        },        editorTodoed(todo){//编辑成功            this.editorTodos='';        },        cancelTodo(todo){//取消编辑            todo.title = this.beforeTitle;            this.editorTodos='';            this.beforeTitle = '';        }    },    directives:{        "focus": {            update(el, binding){                // console.log(el);                // console.log(binding);                if(binding.value){                    el.focus();                }            }        }    }});function watchHashChange() {    var hash = window.location.hash.slice(1);    console.log(hash);    vm.visibility = hash;}watchHashChange();window.addEventListener("hashchange",watchHashChange);

1 0