用vue写todolist单页应用

来源：互联网发布：n反斜杠百分之d c语言编辑：程序博客网时间：2024/06/05 03:33

网上有很多关于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

0 0