专栏首页cwl_Java前端基础-TodoList 案例

前端基础-TodoList 案例

第4章 TodoList 案例

上市产品: ToDoList奇妙清单滴答清单

学习练手项目 : TodoMVCVue官方示例

为什么选择这样的案例:

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

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 完成任务

如果任务完成,状态改为选中, liclass 属性为 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案例暂时告一段落,我们并没有将产品做完,因为我们需要用到其他知识了;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端基础-重构TodoList案例

    修改:<button @click.stop="removeTodo(key,val.id)" class="destroy"></button>

    cwl_java
  • 大数据-WordCount在一堆给定的文本文件中统计输出每一个单词出现的总次数

    cwl_java
  • 快速学习-Mybatis框架入门

    通过前面的学习,我们已经能够使用所学的基础知识构建自定义的 Mybatis 框架了。这个过程是基本功的考验,我们已经强大了不少,但现实是残酷的,我们所定义的 M...

    cwl_java
  • vue 构建 todo 项目系列1

    todo 即个人事务管理项目,很适合 vue 练手,本系列课程将从零开始演示如何用 vue 构建一个简易的 todo 项目

    章鱼喵
  • SpringBoot进阶

    spring-boot-starter-web:springBoot的场景启动器,里面很多依赖如:spring-web、spring-webmvc、jackso...

    Howl
  • 18、webpack从0到1-结语

    Ewall
  • Springboot之启动原理

    SpringBoot为我们做的自动配置,确实方便快捷,但是对于新手来说,如果不大懂SpringBoot内部启动原理,以后难免会吃亏。所以这次博主就跟你们一起一步...

    用户3467126
  • 【漫画】Java中的父子类的执行顺序到底是怎么一回事?

    乔戈里
  • Kotlin Vocabulary | 枚举和 R8 编译器

    学习或使用一门新的编程语言时,了解这门语言所提供的功能,以及了解这些功能是否有相关联的开销,都是十分重要的环节。

    Android 开发者
  • 架构设计 | 接口幂等性原则,防重复提交Token管理

    编程中一个幂等操作的特点是其任意多次执行所产生的影响均与一次执行的影响相同。就是说,一次和多次请求某一个资源会产生同样的作用影响。

    知了一笑

扫码关注云+社区

领取腾讯云代金券