todo 小案例

Posted 2020-12-01 fang-1207

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了todo 小案例相关的知识，希望对你有一定的参考价值。

1. todo 小案例完成
 需求分析
使用 vuejs 完成一个todo小项目，todo应用主要是用于记录用户要做的事情。
 参考原型
http://todomvc.com/examples/vue/

实现的功能
1. todo 展示
2. todo 删除
3. 筛选

代码实操源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!--1. 引入 bootstrap-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.0.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <style type="text/css">
        /*<!--代表已经完成的项目-->*/
        .del {
            text-decoration: line-through;
            color: #ccc;
        }
    </style>

</head>
<body>
<!--2. 导航-->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                Vuejs_TODO
            </a>
        </div>
    </div>
</nav>

<!--pannel-->
<div class="container" id="app">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-success">

                <div class="panel-heading">
                    <h3 class="text-danger">-_-, 还有 {{ unDoDataTotal }} 件事未完成</h3>
                    <!--确保用户按下回车的时候，进行存储 监控回车按键-->
                    <!--按键修饰符: 13这个是回车键的键码，代表用户按下了回车键-->
                    <!--收集数据时候也可以使用修饰符-->
                    <input type="text" v-model.trim="title" @change.13="changeHandler" class="form-control">
                </div>

                <div class="panel-body">

                    <ul class="list-group">

                        <!--注意：在写模型变量的时候，单词的大小写，还有顺序不要写错-->
                        <!--能复制不要手写-->
                        <!--todos  toods  tods-->
                        <!--展示筛选后的数据-->
                        <li class="list-group-item" :class="{del: todo.isCompleted}" v-for="todo in newTodos">
                            <input type="checkbox" v-model="todo.isCompleted"> {{ todo.title }}
                            <button type="button" class="btn btn-danger btn-xs pull-right"
                                    @click="removeItemHandler(todo)">&times;
                            </button>
                        </li>

                    </ul>

                </div>
                <div class="panel-footer">
                    <!--要实现筛选功能：前台是要监控得到用户点击的是哪个筛选条件：可以使用到 window.onhashchange 这个事件, 当页面的锚点发生变化的时候，触发-->
                    <ul class="nav nav-pills">
                        <li :class="{active: hash ==‘#/all‘}"><a href="#/all">全部</a></li>
                        <li :class="{active: hash ==‘#/finish‘}"><a href="#/finish">已完成</a></li>
                        <li :class="{active: hash ==‘#/unfinish‘}"><a href="#/unfinish">未完成</a></li>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="./js/uuid.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            hash: ‘#/all‘, // 默认全部选中
            title: ‘‘,
            todoskey: ‘keys‘,

            todos: [
                {
                    id: 1,
                    title: ‘睡觉‘,
                    isCompleted: false,
                },
                {
                    id: 2,
                    title: ‘吃饭‘,
                    isCompleted: true,
                },
                {
                    id: 3,
                    title: ‘打豆豆‘,
                    isCompleted: false,
                },
            ],
            //  在 使用 watch 的时候，存在一个监视的层级问题：默认是浅检测，只会监视模型变量的第一层的变化 开启深度检测
            newTodos: [],

        },
        // 页面一加载，函数自动触发
        created: function () {

            var key = ‘todosKey‘;

            this.todos = localStorage.getItem(key) ? JSON.parse( localStorage.getItem(key) ): [];

            window.addEventListener(‘hashchange‘, () => {
                console.log(location.hash);
                this.hash = location.hash;
            }, false);

        },
        methods: {
            generaterId: function () {
                var uuid = uuidv1();
                return uuid.replace(/-/g, ‘‘);

            },
            changeHandler: function () {

                if (this.title.length <= 0) {
                    alert(‘请填写待做事情！‘);
                    return;
                }

                this.todos.push({
                    id: this.generaterId(),
                    title: this.title,
                    isCompleted: false,
                });

                this.title = ‘‘;// 清空
            },
            removeItemHandler: function (todo) {
                this.todos = this.todos.filter((item) => {
                    return item !== todo;
                    // 当前如果不等于传过来的待删除的条目，则保留
                });

            }
        },
        // 展示待做项
        computed: {
            unDoDataTotal: function () {
                // 返回还没有完成的事情 isCompleted： false
                return this.newTodos.filter((item) => {
                    return !item.isCompleted;
                }).length;
            },


        },
        watch: {
            hash: function (newVal, oldVal) {
                if (newVal === ‘#/finish‘) {
                    this.newTodos = this.todos.filter((item) => {
                        return item.isCompleted;
                    })

                } else if (newVal === ‘#/unfinish‘) {

                    this.newTodos = this.todos.filter((item) => {
                        return !item.isCompleted;
                    })
                } else {
                    // 代表默认的操作，全部的数据
                    this.newTodos = this.todos;
                }

            },
            todos: {
                handler: function () {
                    var key = ‘todosKey‘;
                    console.log(‘this‘, this);
                    // 自己定义的模型变量不能使用下划线（vuejs默认会认为是私有属性）
                    // vuejs 里面特性 set get
                    console.log(‘this.todoskey‘, this.todoskey);
                    localStorage.setItem(key, JSON.stringify(  this.todos  ));
                    this.newTodos = this.todos;
                },
                deep: true,
            },
        }
    })
</script>
</html>

js代码如下:

!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).uuidv1=e()}}(function(){return function(){return function e(n,r,o){function t(u,f){if(!r[u]){if(!n[u]){var c="function"==typeof require&&require;if(!f&&c)return c(u,!0);if(i)return i(u,!0);var s=new Error("Cannot find module ‘"+u+"‘");throw s.code="MODULE_NOT_FOUND",s}var a=r[u]={exports:{}};n[u][0].call(a.exports,function(e){return t(n[u][1][e]||e)},a,a.exports,e,n,r,o)}return r[u].exports}for(var i="function"==typeof require&&require,u=0;u<o.length;u++)t(o[u]);return t}}()({1:[function(e,n,r){for(var o=[],t=0;t<256;++t)o[t]=(t+256).toString(16).substr(1);n.exports=function(e,n){var r=n||0,t=o;return[t[e[r++]],t[e[r++]],t[e[r++]],t[e[r++]],"-",t[e[r++]],t[e[r++]],"-",t[e[r++]],t[e[r++]],"-",t[e[r++]],t[e[r++]],"-",t[e[r++]],t[e[r++]],t[e[r++]],t[e[r++]],t[e[r++]],t[e[r++]]].join("")}},{}],2:[function(e,n,r){var o="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof window.msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto);if(o){var t=new Uint8Array(16);n.exports=function(){return o(t),t}}else{var i=new Array(16);n.exports=function(){for(var e,n=0;n<16;n++)0==(3&n)&&(e=4294967296*Math.random()),i[n]=e>>>((3&n)<<3)&255;return i}}},{}],3:[function(e,n,r){var o,t,i=e("./lib/rng"),u=e("./lib/bytesToUuid"),f=0,c=0;n.exports=function(e,n,r){var s=n&&r||0,a=n||[],d=(e=e||{}).node||o,l=void 0!==e.clockseq?e.clockseq:t;if(null==d||null==l){var p=i();null==d&&(d=o=[1|p[0],p[1],p[2],p[3],p[4],p[5]]),null==l&&(l=t=16383&(p[6]<<8|p[7]))}var v=void 0!==e.msecs?e.msecs:(new Date).getTime(),y=void 0!==e.nsecs?e.nsecs:c+1,m=v-f+(y-c)/1e4;if(m<0&&void 0===e.clockseq&&(l=l+1&16383),(m<0||v>f)&&void 0===e.nsecs&&(y=0),y>=1e4)throw new Error("uuid.v1(): Can‘t create more than 10M uuids/sec");f=v,c=y,t=l;var w=(1e4*(268435455&(v+=122192928e5))+y)%4294967296;a[s++]=w>>>24&255,a[s++]=w>>>16&255,a[s++]=w>>>8&255,a[s++]=255&w;var b=v/4294967296*1e4&268435455;a[s++]=b>>>8&255,a[s++]=255&b,a[s++]=b>>>24&15|16,a[s++]=b>>>16&255,a[s++]=l>>>8|128,a[s++]=255&l;for(var x=0;x<6;++x)a[s+x]=d[x];return n||u(a)}},{"./lib/bytesToUuid":1,"./lib/rng":2}]},{},[3])(3)});

注意:文件的路径哦,各位小可爱

效果截图如下:

以上是关于todo 小案例的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序案例TODO备忘录

夺命雷公狗-----React---22--小案例之react经典案例todos（上）

夺命雷公狗-----React---27--小案例之react经典案例todos（清除已完成）

小案例：实现对任务清单的CRUD接口服务

夺命雷公狗-----React---26--小案例之react经典案例todos（统计部分的完成）

夺命雷公狗-----React---25--小案例之react经典案例todos（单选框的修改）