首页 / VUE / 利用vue写todolist单页应用
利用vue写todolist单页应用
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了利用vue写todolist单页应用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3429字，纯文字阅读大概需要5分钟。
内容图文
网上有很多关于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来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理
<!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">
<form class="form-horizontal" role="form">
<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>
</form>
</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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的利用vue写todolist单页应用全部内容，希望文章能够帮你解决利用vue写todolist单页应用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。