前端基础-TodoList 案例

cwl_java

发布于 2020-03-26 16:23:50

1.3K0

发布于 2020-03-26 16:23:50

文章被收录于专栏：cwl_Javacwl_Java

第4章 TodoList 案例

上市产品： ToDoList 、奇妙清单、滴答清单

学习练手项目： TodoMVC 、 Vue官方示例

为什么选择这样的案例：

产品功能简洁，需求明确，所需知识点丰富；实现基本功能容易，涵盖所学基础知识；而可扩展性强，完善所有功能比较复杂，所需技术众多；在学习中，可以灵活取舍；

4.1 项目初始化

在项目目录中执行 npm install 命令，下载所需静态资源 ; 将Vue.js框架代码，复制到 js 目录，在index.html中引入 vue : <script src="./js/vue.js"></script>

同时在 index.html 最下方，项目引入了app.js ; 而我们要写的 vuejs 代码，都放在这个文件中；

4.2 数据遍历

const list_data = [
    {id:1,title:'吃饭',stat:true},
    {id:2,title:'睡觉',stat:false},
    {id:3,title:'打豆豆',stat:true},
]

new Vue({
    el:'#todoapp',
    data:{
        // list_data:list_data,
        list_data,// es6属性简写
    }
})

<ul class="todo-list">
    <li v-for="(val,key) in list_data">
        <div class="view">
            <input class="toggle" type="checkbox" v-model="val.stat">
            <label>{{val.title}}</label>
            <button class="destroy"></button>
        </div>
        <input class="edit" value="Rule the web">
    </li>
</ul>

4.3 展示无数据状态

标签及内容都是在 section footer 两个标签中的，当 list_data 中没有数据时，我们只需要隐藏这个两个标签即可：

<section v-if="list_data.length" class="main">
……
</section>
<footer v-if="list_data.length" class="footer"> 
……
</footer>

两个标签都有 v-if 判断，因此我们可以使用一个 div 包裹两个标签，使 div 隐藏即可：

<div v-if="list_data.length">
    <section  class="main">
    ……
    </section>
    <footer  class="footer"> 
    ……
    </footer>
</div>

如果有内容，那么 DOM 书中就会多出一个 div 标签，那么我们可以选择使用 template (vue中的模板标识)，有内容时，浏览器渲染不会有此节点；

<template v-if="list_data.length">
    <section  class="main">
    ……
    </section>
    <footer  class="footer"> 
    ……
    </footer>
</template>

4.3 添加任务

绑定 enter 键盘事件:

<input @keyup.enter="addTodo" class="new-todo" placeholder="请输入" autofocus>

new Vue({
    el:'#todoapp',
    data:{
        // list_data:list_data,
        list_data,// es6属性简写
    },
	//添加事件处理器    
    methods:{
        // addTodo:function(){}
        // 简写形式
        addTodo(){
            console.log(123);
        }
    }
})

修改代码完成任务添加：

methods: {
    // 添加任务
    // addTodo:function(){}
    // 简写形式 
    addTodo(ev) {
        // 获取当前触发事件的元素
        var inputs = ev.target;
        // 获取value值，去除空白后判断，如果为空，则不添加任务
        if (inputs.value.trim() == '') {
            return;
        }
        // 组装任务数据
        var todo_data = {
            id: this.list_data.length + 1 + 1,
            title: inputs.value,
            stat: false
        };
        // 将数据添加进数组
        this.list_data.push(todo_data);
        // 清空文本框内容
        inputs.value = '';
    }
}

4.4 任务的全选与反选

点击文本框左边的下箭头，实现全选和反选操作

为元素绑定点击事件：

<input @click="toggleAll" id="toggle-all" class="toggle-all" type="checkbox">

添加处理程序：

toggleAll(ev){
   // 获取点击的元素 
    var inputs = ev.target;
    // console.log(inputs.checked);
    // 循环所有数据为状态重新赋值
    // 因为每个元素的选中状态都是使用 v-model 的双向数据绑定，
    // 因此 数据发生改变，状态即改变，状态改变，数据也会改变
    for(let i=0;i<this.list_data.length;i++){
        this.list_data[i].stat = inputs.checked;
    }
}

4.5 完成任务

如果任务完成，状态改为选中， li 的 class 属性为 completed 时文字有中划线；

<li v-for="(val,key) in list_data" v-bind:class="{completed:val.stat}">

4.6 删除任务

绑定点击事件，将当前索引值传入事件处理程序：

<button @click="removeTodo(key)" class="destroy"></button>

按照索引，删除相应的数据：

removeTodo(key){
    this.list_data.splice(key,1);
},

4.7 删除已完成的任务

绑定事件

<button @click="removeAllDone" class="clear-completed">Clear completed</button>

循环遍历所有数据，删除已被标记为完成的任务：

removeAllDone(){
    for(let i=0;i<list_data.length;i++){
        if(list_data[i].stat == true){
            this.list_data.splice(i,1);
        }
    }
}

循环的代码看起来很不舒服, Array.prototype.filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

var arr = [1,4,6,2,78,23,7,3,8];
// 原始写法
// var new_arr = arr.filter(function(v){
//     // if(v>8){
//     //     return true;
//     // }
//     return v>8;
// })

// 箭头函数写法
// var new_arr = arr.filter((v)=>{
//     return v>8;
// })

// 精简写法
var new_arr = arr.filter((v)=> v>8);

console.log(new_arr);

修改项目代码：

removeAllDone(){
    // 原始循环判断用法
    // for(let i=0;i<list_data.length;i++){
    // 	if(list_data[i].stat == true){
    // 		this.list_data.splice(i,1);
    // 	}
    // }
	
    // 上面是循环删除符合条件的数据
    // 下面是保留不符合条件的数据
    
    // 原始标准库对象方法
    // this.list_data = this.list_data.filter(function(v){
    // 	if(v.stat == false){
    // 		return true;
    // 	}
    // })
	
    // 箭头函数方法
    // this.list_data = this.list_data.filter(function(v){
    // 	return !v.stat;
    // })
	
    // 精简方法
    this.list_data = this.list_data.filter((v)=>!v.stat);
},

TodoList案例暂时告一段落，我们并没有将产品做完，因为我们需要用到其他知识了；

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js