【IMWeb训练营作业】之Todo List

【IMWeb训练营作业】之Todo List

很高兴参加腾讯课堂IMWeb训练营学习Vue，这篇文章是我提交的第一个作业，用Vue完成Todo List。

此次作业涉及的技术要点：

1. 使用独立版本的vue.js，下载后通过script标签在html文件中引用；
2. 作业中使用的vue指令：
   （1）v-model：表单数据双向绑定，v-model=”todo”；
   （2）v-on：绑定事件，缩写为“@”，v-on:keyup.enter=”addInfo”，按enter键执行addInfo函数
   （3）v-show：条件渲染，元素存在，控制display，v-show=”info.length”，info非空时元素显示；
   （4）v-if：条件渲染，条件不成立时元素不存在，v-show=”info.length”，info非空时元素显示，为空时html结构不存在该元素；
   （5）v-bind：Class与Style绑定，缩写为“:”，v-bind:class=”{ completed: item.isChecked}”,item.isChecked为true时元素添加completed这个class；
   （6）v-for：列表渲染，v-for=”item in info”，遍历变量info中的每个元素进行列表渲染；

作业代码：

CSS并非作业主要考察部分，暂时不提交CSS代码。

HTML：（在head中引入vue.js文件，这里不做体现）

<header>
    <div class="w-600">Todo List</div>
</header>
<article>
    <div class="main w-600">
        <div class="top">
            <h3>添加任务:</h3>
            <input type="text" name="" placeholder="在此输入，例如：学习。（提示：按enter键即可添加任务）" 
            @keyup.13="addInfo" v-model="todo" />
            <!--todo双向绑定，按enter键时执行addInfo()-->
        </div>
        <ul class="count-list" v-show="info.length">
            <!--info非空时显示.count-list未完成任务统计等-->
            <li class="undone">
                {{ noCheckedLength }}个任务未完成

            </li>
            <li class="count">
                <a href="#all">所有任务</a>
                <a href="#unfinished">未完成任务</a>
                <a href="#finished">已完成任务</a>
            </li>
        </ul>
        <h3>任务列表:</h3>
        <p v-show="!info.length">还没有添加任何任务</p>
        <!--info为空时显示“还没有添加任何任务”-->
        <ul class="list">
            <li class="todo" v-bind:class="{ completed: item.isChecked,editing:item===editTodo }" 
            v-for="item in filterInfo">
                <!--列表渲染；isChecked为true时class添加completed；
                    item等于editTodo时class添加editing-->
                <div @dblclick="editInfo(item)" class="item">
                    <!--双击时执行editInfo()，传item-->
                    <input type="checkbox" class="toggle" v-model="item.isChecked">
                    <!--checkbox的选中状态双向绑定-->
                    <label>{{ item.title }}</label>
                    <i class="iconfont icon-delete del" @click="deleteInfo(item)"></i>
                    <!--点击时执行deleteInfo()，传item-->
                </div>
                <input v-focus="editTodo===item" @blur="edited(item)" 
                @keyup.enter="edited(item)" @keyup.esc="cancelEdit(item)" 
                type="text" name="edit" class="edit" v-model="item.title">
                <!--自定义指令focus，editTodo===item时执行钩子函数；
                    失去焦点||按enter键执行edited()，传item；
                    按esc键执行cancelEdit()，传item；
                    双向绑定item.title-->
            </li>
        </ul>
    </div>

</article>
<script src="index.js"></script>

JavaScript：

var store = {
    save(key, value) { // 存localstorage
        localStorage.setItem(key, JSON.stringify(value));
    },
    fetch(key) { // 取localstorage
        return JSON.parse(localStorage.getItem(key)) || [];
    }
};
var filter = { //过滤函数
    all: function(info) {
        return info;
    },
    finished: function(info) {
        return info.filter(function(item) {
            return item.isChecked
        })
    },
    unfinished: function(info) {
        return info.filter(function(item) {
            return !item.isChecked
        })
    }
};
var info = store.fetch("imweb");
var vm = new Vue({
    el: ".main", //挂载元素
    data: { //数据
        info: info,
        todo: "",
        editTodo: "", //记录正在编辑的数据
        beforeTitle: "", //记录修改前的title
        visibility: "all" //通过这个属性筛选数据
    },
    watch: { //监控info这个属性，当这个属性对应的值发生变化，就会执行函数store.save
        info: {
            handler: function() {
                store.save("imweb", this.info);
            },
            deep: true //深度监控
        }
    },
    computed: {//计算属性
        noCheckedLength: function() { //计算未选中的数量
            return this.info.filter(function(item) {
                return !item.isChecked
            }).length
        },
        filterInfo: function() { //通过hash过滤数据
            return filter[this.visibility] ? filter[this.visibility](info) : info;
        }
    },
    methods: {
        addInfo(ev) { //添加
            this.info.push({
                title: this.todo,
                isChecked: false
            });
            this.todo = "";
        },
        deleteInfo(todo) { //删除
            var index = this.info.indexOf(todo);
            this.info.splice(index, 1);
        },
        editInfo(todo) { //双击编辑
            this.beforeTitle = todo.title; //编辑时先记录编辑前的title
            this.editTodo = todo;
        },
        edited(todo) { //input失去焦点完成编辑
            this.editTodo = ""; //置空editTodo，div失去editing这个class
        },
        cancelEdit(todo) { //取消编辑
            todo.title = this.beforeTitle; //将编辑前的title赋给todo.title
            this.beforeTitle = "";
            this.editTodo = "";
        }
    },
    directives: { //自定义指令
        focus: {
            update(el, binding) { //updata为钩子函数，el为元素，binding是表达式的值
                if (binding.value) {
                    el.focus();
                }
            }
        }
    }
});
watchHashChange(); //进入页面先执行watchHashChange
window.addEventListener("hashchange", watchHashChange); //hash值发生变化的时候执行watchHashChange
function watchHashChange() { //检测hash值变化
    var hash = window.location.hash.slice(1); //取#后的值
    vm.visibility = hash; //把hash值赋给visibility属性
}

运行效果图