0
点赞
收藏
分享

微信扫一扫

简易版ToDoList

野见 2022-02-07 阅读 72

学了前端Vue框架也有点时间了,想要写个小东西,想来检验下学习成果,于是就做了简易版ToDoList。

在敲代码的过程,我发现自己还是有很多不太会熟悉,还是要看着视频中的代码敲,慢慢的加功能,遇到不会的就百度,这也是刚开始学,还不是很熟练,先模仿再创新。

还有就是我在敲代码的时候,有点过于追求细节了,以至于主要功能没有完成,效率不高。我觉得以后写项目,先分析清除要做些什么功能出来,分析清楚之后,把主要功能代码先实现,之后在求细节美化,这能很好的提高效率。

一步一步来吧,脚踏实地的去学!!!

效果展示:

ToDoList


代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <style>
        body {
            margin: 20px 20px;
        }
        
        li {
            font-size: 20px;
            margin: 10px 5px;
        }
        
        li a {
            margin-left: 90px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="panel panel-info">
            <!-- Default panel contents -->
            <div class="panel-heading">简易版ToDoList</div>
            <div class="panel-body">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="exampleInputName2">ToDo</label>
                        <input type="text" class="form-control" placeholder="请输入代办事项" v-model="todo" v-focus v-color="'#00FF00'">
                    </div>
                    <input type="button" value="添加" class="btn btn-primary" @click="add()">
                </form>
            </div>

            <ol>
                <!-- 添加了动画 -->
                <li v-for="item in list" class="animate__animated animate__bounceInRight">{{item.todo}}
                    <a href=" # " @click="del(item.todo) ">完成</a>
                </li>
            </ol>
        </div>
    </div>


    <script>
        //定义全局指令
        //输入框自动聚焦
        Vue.directive('focus', {
                inserted: function(el) { //inserted 表示元素插入到DOM中的时候,会执行 inserted函数[触发1次]
                    el.focus()
                }
            }),
            //设置输入框输入内容的颜色
            Vue.directive('color', {
                bind: function(el, bingding) {
                    el.style.color = bingding.value; //字体颜色
                }
            })
            //创建Vue实例
        var vm = new Vue({
            el: '#app',
            data: {

                todo: '',
                list: []
            },
            methods: {
                //添加代办事项
                add() {
                    console.log("ok ");
                    var todoNew = { //v-model自动更新id和todo,获取更新后的数据给todoNew

                            todo: this.todo
                        }
                        //添加到数组中
                    this.list.push(todoNew)
                        //输入框清空
                    this.todo = ''
                },
                //事项完成后删除
                del(obj) {
                    var index = this.list.findIndex(item => {
                            if (item.todo == obj) { //找到后,返回ture,终止
                                return true;
                            }
                        })
                        //删除序号为index那行数据,只删除1行
                    this.list.splice(index, 1)
                }
            }
        })
    </script>
</body>

</html>

举报

相关推荐

0 条评论