简易版ToDoList

最新推荐文章于 2024-06-01 09:35:09 发布

*neverGiveUp*

最新推荐文章于 2024-06-01 09:35:09 发布

阅读量438

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_48701993/article/details/122815141

版权

学了前端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>

*neverGiveUp*

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
简易版ToDoList

学了前端Vue框架也有点时间了，想要写个小东西，想来检验下学习成果，于是就做了简易版ToDoList。在敲代码的过程，我发现自己还是有很多不太会熟悉，还是要看着视频中的代码敲，慢慢的加功能，遇到不会的就百度，这也是刚开始学，还不是很熟练，先模仿再创新。还有就是我在敲代码的时候，有点过于追求细节了，以至于主要功能没有完成，效率不高。我觉得以后写项目，先分析清除要做些什么功能出来，分析清楚之后，把主要功能代码先实现，之后在求细节美化，这能很好的提高效率。一步一步来吧，脚踏实地的去学！！！效果展示：
复制链接

扫一扫