“Vue2.0”跟俺一起全面入坑 —— 自定义便签

前言:看了网上的教程,写一个建议的便签(当然你也可以叫它留言板)
功能描述:
  1. 可在input输入框输入文字内容,按回车按键进行发布;
  2. 可点击单选按钮,来指定“朕已阅”的便签;
  3. 可删除指定“不顺眼”的便签。
    html代码布局:
<body>
    <div class="page-top">
        <div class="page-content wrap">
            <h2>计划任务表</h2>
        </div>
    </div>
    <div class="main wrap">
        <h3 class="big-title">添加任务:</h3>
        <input
                @keyup.enter = "addTodo"
                v-model="todo"
                type="text"
                placeholder="例如:吃饭睡觉打豆豆:   提示:+回车即可添加任务"
                class="task-input" />  <!-- addTodo(123,$event)行间传参的时候,vue里面还要用事件对象的话就用$event-->
        <ul class="task-count clearFix">
            <li class="fl" style="color: #ff8000;margin-left: 20px;">
                <!--{{
                    list.filter(function(item){
                        return !item.isChecked
                    }).length
                }}-->
                {{ noCheckLength }}
                个未完成任务
            </li>
            <li class="action fr">
                <a href="#all" class="fl" :class="{active:false}">所有任务</a>
                <a href="#unfinished" class="fl">未完成任务</a>
                <a href="#finished" class="fl">已完成任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表:</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <!--<span class="no-task-tip tip-toggle">
                <input type="checkbox" checked="" class="toggle" />
                <span>全部标记为已完成</span>
            </span>-->
            <ul class="todo-list" v-show="list.length">
                <li class="todo" :class="{completed: item.isChecked,editing: item === editorTodos}" v-for="item in filterList">
                    <div class="view">
                        <input class="fl" type="checkbox" v-model="item.isChecked"  class="toggle"><!-- 将单选按钮的数据进行双向绑定,选中与不选中传值 -->
                        <!--<label class="fl" for=""><a href="javascript:;" v-text="item.title"></a></label>-->
                        <label class="fl" for=""><a href="javascript:;" @dblclick="edtorTodo(item)">{{ item.title }}</a></label>
                        <a href="javascript:;" class="destroy fr" @click="delTodo(item)">删除</a>
                    </div>
                    <input @blur="edtorTodoed(item)" @keyup.13="edtorTodoed(item)" @keyup.esc="cancelTodo(item)" v-focus="editorTodos === item" type="text" class="edit" v-model="item.title" />
                </li>
            </ul>
        </div>
    </div>
</body>

css样式设置:

*{margin: 0;padding: 0}
li{list-style: none;}
a{text-decoration: none;color: #333;}
img {border: none;display: block;}
.clearFix:after{
    content: '';
    display: block;
    clear: both;
    height: 0;
    width: 0;
}
.clearFix{zoom: 1}
.fl{float: left;}
.fr{float: right;}
.wrap{
    width: 980px;
    margin: 0 auto;
}
/**************************/
.page-top{
    background-color: #e8593c;
    height: 40px;
    border-top: 1px solid #b56553;
    border-bottom: 1px solid #b56553;
}
.page-top .page-content h2{
    width: 100%;
    line-height:40px;
    color: #fff;
    text-align: center;
    font-size: 22px;
}
/***********************/
.main{
    margin-top: 10px;
}
.main .big-title{
    font-size: 18px;
}
.main .task-input{
    margin-top: 15px;
    width: calc(100% - 20px);
    height: 30px;
    padding-left: 20px;
    font-size: 12px;
}
.task-count{
    margin-top: 10px;
}
.task-count .action a{
    padding: 5px 20px;
}
.task-count .action a.active{
    border:1px solid #ff8000;
}
.tasks {
    margin-top: 10px;
}
.tasks .no-task-tip{
    display: block;
    color: #ccc;
    margin-left: 25px;
    font-size: 12px;
    margin-bottom: 10px;
}
.todo-list .todo{
    height: 40px;
    border: 1px solid #999;
    margin-bottom: 5px;
    position: relative;
}
.tasks .todo-list .editing .edit{display: block;}
.todo-list .completed .view label a{
    color: #ccc;
    font-size: 22px;
    text-decoration: line-through;
}
.todo-list .todo .edit{
    position: absolute;
    left: 0;
    top: 0;
    display: none;
    width: calc(100% - 50px);
    height: 40px;
    border: none;
    padding-left: 50px;
    font-size: 24px;
}
.todo .view input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin-left: 20px;
    margin-top: 13px;
    margin-right: 10px;
}
.todo .view label a{
    font-size: 24px;
    line-height:40px;
    color: #000;
}
.todo .view .destroy{
    height: 40px;
    width: auto;
    line-height:40px;
    margin-right: 20px;
    font-size: 14px;
    color: #f00;
    border: none;
    background-color: #fff;
    cursor: pointer;
}

核心部分js代码实现:

document.addEventListener('DOMContentLoaded',function () {
    //存取localStorage中的数据
    var store = {
        save(key,value) {
            localStorage.setItem(key,JSON.stringify(value));
        },
        fetch(key){//获取
           return JSON.parse(localStorage.getItem(key)) || [];
        }
    }
    /*var list = [
        {
            title: "吃饭睡觉",
            isChecked: false //状态为false,为不选中,任务未完成
        },
        {
            title: "web前端开发",
            isChecked: true //状态为true,为选中,任务已完成
        }
    ];*/
    var fiter = {
        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 list = store.fetch("datura_msg");
    var vm = new Vue({
        //这里面是选项对象,里面有很多值
        el: ".main",//挂在点,挂在到main上
        data: {
            list: list, //留言的内容数组,注意这里数组内每一条数据都是一个json
            todo: '',
            listMsg: {},
            editorTodos: '',//记录正在编辑的数据
            beforeTitle: '',//记录正在编辑的数据的title
            visibility: 'all'//通过这个属性值的变化对数据进行筛选
        },
        watch: {
           /* list: function () {//监听list这个属性,当这个属性对应的值发生变化就会执行函数
                store.save("datura_msg",this.list);
            }*/
           list: {
               handler:function () {
                   store.save("datura_msg",this.list);
               },
               deep:true
           }
        },
        computed: {
            noCheckLength:function () {
                return this.list.filter(function(item){
                        return !item.isChecked
                    }).length
            },
            filterList:function () {
                //过滤的时候有三种情况 all finished unfinished

                //return fiter[this.visibility](list);//函数调用
                //找到了过滤函数,就返回过滤后的数据,如果没有就返回所有数据
                return fiter[this.visibility]?fiter[this.visibility](list):list;
            }
        },
        methods: {
            addTodo(data,ev){  //添加任务  第二个参数接收一下事件对象
                //向list中添加一项任务
                //事件处理函数中的this,指向的的那个根实例
                /*if(ev.keyCode == 13){
                 this.list.push({
                 title:ev.target.value   //这里是操作dom了,影响性能
                 });
                 }*/
               /* this.list.push({   //向list中添加一项任务
                    title:this.todo,
                    isChecked:false
                });*/
                this.listMsg = {
                    title:this.todo,
                    isChecked:false
                }
                this.list.push(this.listMsg);
                this.todo = ''
            },
            delTodo(todo) {//删除任务
                //在数组中查找点击当前数据在list数组中的位置,找到其索引值
                var index = this.list.indexOf(todo);
                if(confirm("确定删除?")){
                    this.list.splice(index,1);
                }
            },
            edtorTodo(todo) {//编辑任务
                //编辑任务的时候。记录一下编辑这条任务的title,方便在取消编辑的时候重新给之前的title
                this.beforeTitle = todo.title;
                this.editorTodos = todo;
            },
            edtorTodoed(todo) {//任务编辑成功
                this.editorTodos = '';
            },
            cancelTodo(todo) {//取消编辑
                todo.title = this.beforeTitle;
                this.beforeTitle = '';
                //让div显示出来,input隐藏
                this.editorTodos = '';
            }
        },
        directives: {
            "focus": {
                update(el,binding) {
                   // console.log(el);//指绑定的元素,可以用来直接操作DOM =>  <input type="text" class="edit" />
                    //console.log(binding);
                    if(binding.value == true){
                        el.focus();//当前编辑元素获取焦点
                    }
                }
            }
        }
    });
    function watchHashChange() {
        //var hash = window.location.hash;
        var hash = window.location.hash.slice(1);
        vm.visibility = hash;
        //console.log(hash);
    }
    watchHashChange();
    window.addEventListener('hashchange',watchHashChange,false);
},false);

效果如图:


推荐阅读更多精彩内容