用vue写todolist单页应用

最新推荐文章于 2023-11-14 15:04:20 发布

yy211zhu

最新推荐文章于 2023-11-14 15:04:20 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签：模板引擎框架

本文链接：https://blog.csdn.net/yy211zhu/article/details/53648091

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的，这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。

vue是啥？
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。简单说是一个模板引擎，做过后端的应该很清楚，以前靠服务器端渲染的dom，放在浏览器端端渲染，vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的，数据驱动，数据双向绑定，赋予了用户很好的体验，以及快速的开发，应用的项目的益于维护等。。
下面开始代码吧，提前引入vue.js,以及bootstrap。由于没采用vue单文件开发。所以只有一个html文件.
为了方便你可以使用cdn来引入你需要的文件。demo使用了localstorage来存放数据。所以你必须开启web端口来浏览。未了方便你可以使用webstorm来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>vue版todolist</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script src="src/vue.js"></script>
</head>
<style>
    .isFinish {
        background-color: #d58512 !important;
    }

    .itemcount {
        display: block;
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
        float: left;
        background-color: #d9edf7;
    }
</style>
<body>
<div class="container text-center" id="app">

    <h2>{{title}}</h2>
    <div class="row">
        <div class="col-md-7">

                <div class="form-group">
                    <label for="toitem">添加任务事项</label>
                    <input class="form-control" type="text" id="toitem" v-model="newitem" @keyup.enter="addItem()">
                </div>
                <!--   <div class="form-group text-left">
                       <button class="btn btn-primary btn-sm">确认添加</button>
                   </div>-->
                <div class="list-group text-left form-group" style="margin-top: 2em;">
                    <a href="#" class="list-group-item active text-left">
                        任务清单：
                    </a>

                    <a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)">
                        <span class="itemcount">{{item.id}}</span>
                        {{item.lable}}
                        <span class="badge" v-bind:class="{isFinish:item.isFinish}">√</span>
                    </a>

                </div>

        </div>
        <div class="col-md-5">
            <div class="panel panel-default">
                <div class="panel-heading">任务计划：</div>
                <div class="panel-body">
                    请在一周内完成这些计划！
                </div>
                <div class="panel-footer text-right">
                    <button class="btn btn-info btn-sm" @click="clearItem">清空任务计划</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //该网站的localStorage的键值，用于存放数据
    var todoList = 'todolist';
    //对localStorage的封装
    var lsp = (function () {
        return ({
            add: function (dataval) {
                //添加数据，键为todolist
                localStorage.setItem(todoList, JSON.stringify(dataval));
            },
            get: function () {
                //读取键为todolist的数据
                return JSON.parse(localStorage.getItem(todoList));
            },
            remove: function () {
                //移除该站点下键为todolist的数据
                localStorage.removeItem(todoList);
            },
            clear: function () {
                //清空该站点下的所有localStorage的数据
                localStorage.clear();
            }
        });
    })();
    var app = new Vue({
        el: '#app',
        data: {
            title: '任务清单demo',
            items: lsp.get() || [],//读取数据。如果没有数据赋值为数组[]
            newitem: '' //要添加的数据
        },
        methods: {
            addItem: function () {
                var that = this;
                this.items.push({
                    id: that.items.length + 1,
                    lable: that.newitem,
                    isFinish: false
                });
                lsp.add(this.items);
                this.newitem = '';
            },
            toogleFinsih: function (item) {
                item.isFinish = !item.isFinish;
            },
            clearItem: function () {

                this.items = [];

            }
        }
    })
</script>
</body>

</html>

github:demo

yy211zhu

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用vue写todolist单页应用

网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的，这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。vue是啥？ Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。简单说是一个模板引擎，做过后端的应该很清楚，以前靠服务器端渲染的dom，放在浏览器端端渲染，v
复制链接

扫一扫