利用vue写todolist单页应用
网上有很多关于vue的todolist小程序。大多是利用vue-cli脚手架工具开发的，这个官网的文档也不支持新手从单文件开始学习。所以用大家熟悉的开发方式写了这个todolist,希望和大家一起学习。
1、vue是啥？
Vue.js（读音/vjuː/,类似于view）是一套构建用户界面的渐进式框架。简单说是一个模板引擎，做过后端的应该很清楚，以前靠服务器端渲染的dom，放在浏览器端端渲染，vue拿到数据渲染成dom.当然vue不仅仅是用来干这个的，数据驱动，数据双向绑定，赋予了用户很好的体验，以及快速的开发，应用的项目的益于维护等。。
2、下面开始代码吧，提前引入vue.js,以及bootstrap。由于没采用vue单文件开发。所以只有一个html文件.
3、为了方便你可以使用cdn来引入你需要的文件。demo使用了localstorage来存放数据。所以你必须开启web端口来浏览。未了方便你可以使用webstorm来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1">
<title>vue版todolist</title>
<linkrel="stylesheet"href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<scriptsrc="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>
<divclass="containertext-center"id="app">
<h2>{{title}}</h2>
<divclass="row">
<divclass="col-md-7">
<formclass="form-horizontal"role="form">
<divclass="form-group">
<labelfor="toitem">添加任务事项</label>
<inputclass="form-control"type="text"id="toitem"v-model="newitem"@keyup.enter="addItem()">
</div>
<!--<divclass="form-grouptext-left">
<buttonclass="btnbtn-primarybtn-sm">确认添加</button>
</div>-->
<divclass="list-grouptext-leftform-group"style="margin-top:2em;">
<ahref="#"class="list-group-itemactivetext-left">
任务清单：
</a>
<ahref="#"v-for="iteminitems"class="list-group-item"v-on:click="toogleFinsih(item)">
<spanclass="itemcount">{{item.id}}</span>
{{item.lable}}
<spanclass="badge"v-bind:class="{isFinish:item.isFinish}">√</span>
</a>
</div>
</form>
</div>
<divclass="col-md-5">
<divclass="panelpanel-default">
<divclass="panel-heading">任务计划：</div>
<divclass="panel-body">
请在一周内完成这些计划！
</div>
<divclass="panel-footertext-right">
<buttonclass="btnbtn-infobtn-sm"@click="clearItem">清空任务计划</button>
</div>
</div>
</div>
</div>
</div>
<script>
//该网站的localStorage的键值，用于存放数据
vartodoList='todolist';
//对localStorage的封装
varlsp=(function(){
return({
add:function(dataval){
//添加数据，键为todolist
localStorage.setItem(todoList,JSON.stringify(dataval));
},
get:function(){
//读取键为todolist的数据
returnJSON.parse(localStorage.getItem(todoList));
},
remove:function(){
//移除该站点下键为todolist的数据
localStorage.removeItem(todoList);
},
clear:function(){
//清空该站点下的所有localStorage的数据
localStorage.clear();
}
});
})();
varapp=newVue({
el:'#app',
data:{
title:'任务清单demo',
items:lsp.get()||[],//读取数据。如果没有数据赋值为数组[]
newitem:''//要添加的数据
},
methods:{
addItem:function(){
varthat=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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。