专栏首页codingvue 构建 todo 项目系列1

vue 构建 todo 项目系列1

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

初始化项目

todomvc 提供了多种技术栈实现方案,可以直接下载源码学习,也可以下载 静态资源模板, 然后自己写业务逻辑代码

$ git clone https://github.com/tastejs/todomvc-app-template.git

$ cnpm install

访问主页,效果如下:

image

接下来要在项目中初始化 vue

首先在 index.html 中引入 vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<section id="todoapp" class="todoapp">
    <h1>{{ title }}</h1>
    <!-- ... -->
</section>

然后将 app.js 改为:

// 自调用匿名函数的最大用处就是封装作用域
(function (vue) {
    let app = new Vue({
        el: "#todoapp",
        data: {
            title: 'Todotest'
        },
        methods: {

        }
    })
})(Vue);

访问页面,可看到 vue 可成功引入, 页面标题已被 vue 绑定

image

源码

任务展示

app.js 中添加模拟数据:

    // 模拟数据
    const list_data = [
        {id: 1, title: 'one', stat: true},
        {id: 2, title: 'two', stat: false},
        {id: 3, title: 'three', stat: true},
    ]
    let app = new Vue({
        el: "#todoapp",
        data: {
            title: 'Todotest',
            list_data
        }
    })

index.html 展示数据,并根据是否有数据加载节点

<!-- 数据存在时才加载以下节点 -->
<template v-if="list_data.length">
    <section class="main">
        <!-- .... -->
        <!-- 遍历数据 -->
        <li v-for="(v,k) in list_data" class="completed">
            <div class="view">
                <input class="toggle" type="checkbox" checked>
                <label>{{ v.title }}</label>
                <button class="destroy"></button>
            </div>
            <input class="edit" value="Create a TodoMVC template">
        </li>
    </section>
    <!-- .... -->
</template>

image

源码

添加任务

index.html 绑定 enter 事件

<input class="new-todo" @keyup.enter="addTodo" placeholder="What needs to be done?" autofocus>

app.js 将新增的数据追加到数组中

methods: {
    addTodo(ev) {
        // 获取节点对象的文本框内容
        let title = ev.target.value
        let id = this.list_data[this.list_data.length - 1]['id'] + 1
        let stat = false
        this.list_data.push({id, title, stat})
        // 重置文本框
        ev.target.value = ''
    }
}

image

源码

任务的全选与全不选

image

index.html 绑定 click 事件

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

<li v-for="(v,k) in list_data" class="completed">
    <!-- 选中状态的双向绑定 -->
    <input class="toggle" type="checkbox" v-model="v.stat">
</li>

app.js 新增以下方法

// 任务的状态与全选按钮的状态一致
toggleAll(ev) {
    for (let i=0; i<this.list_data.length; i++) {
        this.list_data[i].stat = ev.target.checked
    }
}

源码

不同状态下的任务样式

image

不同状态下的任务样式是不同的,根据 stat 属性进行判断,修改 index.html:

<li v-for="(v,k) in list_data" :class="{completed: v.stat}">
    <!--  -->
</li>

源码

删除任务

image

index.html 绑定 click 事件

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

app.js 删除数据

removeAllDone() {
    // 删除任务的几种实现方式
    // for 循环
    // for (let i=0; i<this.list_data.length; i++) {
    //  if (this.list_data[i].stat === true) {
    //      this.list_data.splice(i, 1)
    //  }
    // }

    // 过滤器
    // this.list_data = this.list_data.filter(function(item) {
    //  if (item.stat === false) {
    //      return item
    //  }
    // })

    // es6 简写语法
    this.list_data = this.list_data.filter((v)=>!v.stat)
}

源码

空字符串不触发任务添加

现在的程序有个 bug, 添加任务时如果直接按 enter 或者只输入空格,都能触发任务添加,需要在数据添加前进行过滤

index.html 绑定 enter 事件

<input class="new-todo" @keyup.enter="addTodo" placeholder="What needs to be done?" autofocus>

app.js 过滤数据

addTodo(ev) {
    // 获取节点对象的文本框内容
    let title = ev.target.value.trim()
    if (title === '') {
        return ;
    }
    // ...
}

源码

原文:https://www.itshutong.com/347.html

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • MyBatis操作Oracle批量插入 ORA-00933: SQL 命令未正确结束

    最近在使用MyBatis操作Oracle数据库的时候,进行批量插入数据,思路是封装一个List集合通过Myabtis

    Arebirth
  • .net core使用配置文件

    在 .net core中,配置文件的读取是通过IConfiguration来提供的,程序集是Microsoft.Extensions.Configuration...

    thz
  • 用css3实现惊艳面试官的背景即背景动画(高级附源码)

    这篇文章参考《css揭秘》这本书,并作出了自己的总结,希望能让大家更有收获,也强烈推荐大家看看这本书,你值得拥有。我们将学到

    徐小夕
  • java后端学习路线建议

    你是想要进大厂,还是想进小公司呢? 对于一个普通本科生,很可能真正步入学习的时间不多。并且能够掌握的知识的广度和深度也是有限度的,还要考虑学习环境的影响。要慎重...

    用户4372098
  • 不仅会用@Async,我把源码也梳理了一遍(上)

    说起异步化,很多人会想起异步线程、消息队列等,消息队列不是文章的主题,今天我们来聊聊spring对异步化的支持@EnableAsync&@Async。

    java思维导图
  • 虚拟现实前传-Three.js实现管壳式换热器3D模型在线查看

    使用threejs实现3D模型加载和显示。3D编程就像拍大片,几个关键东西如下所列:

    周星星9527
  • ASP.NET Core 2.2 : 二十三. 深入聊一聊配置的内部处理机制

    上一章介绍了配置的多种数据源被注册、加载和获取的过程,本节看一下这个过程系统是如何实现的。(ASP.NET Core 系列目录)

    FlyLolo
  • MyBatis之foreach

         foreach 元素是非常强大的,它允许你指定一个集合,声明集合项和索引变量,它们可以用在元素体内。它也允许你指定开放和关闭的字符串,在迭代之间放置分...

    Arebirth
  • python笔记42-http请求命令行工具(httpie)

    通常我们需要快速的测试某个接口通不通,一般linux上用curl去发http请求,但是这个命令行工具语法有点复杂了,不够直观。 python有一个给人类使用的r...

    上海-悠悠
  • Castle DynamicProxy基本用法(AOP)

    本文介绍AOP编程的基本概念、Castle DynamicProxy(DP)的基本用法,使用第三方扩展实现对异步(async)的支持,结合Autofac演示如何...

    thz

扫码关注云+社区

领取腾讯云代金券