当前位置:Gxlcms > JavaScript > 利用vue写todolist单页应用

利用vue写todolist单页应用

时间:2021-07-01 10:21:17 帮助过:29人阅读

网上有很多关于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来开发。否则你直接打开静态页是不能存取数据的。当然这些数据你可以换成从数据库来处理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>vue版todolist</title>
  7. <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  8. <script src="src/vue.js"></script>
  9. </head>
  10. <style>
  11. .isFinish {
  12. background-color: #d58512 !important;
  13. }
  14. .itemcount {
  15. display: block;
  16. width: 20px;
  17. height: 20px;
  18. text-align: center;
  19. line-height: 20px;
  20. border-radius: 10px;
  21. float: left;
  22. background-color: #d9edf7;
  23. }
  24. </style>
  25. <body>
  26. <div class="container text-center" id="app">
  27. <h2>{{title}}</h2>
  28. <div class="row">
  29. <div class="col-md-7">
  30. <form class="form-horizontal" role="form">
  31. <div class="form-group">
  32. <label for="toitem">添加任务事项</label>
  33. <input class="form-control" type="text" id="toitem" v-model="newitem" @keyup.enter="addItem()">
  34. </div>
  35. <!-- <div class="form-group text-left">
  36. <button class="btn btn-primary btn-sm">确认添加</button>
  37. </div>-->
  38. <div class="list-group text-left form-group" style="margin-top: 2em;">
  39. <a href="#" class="list-group-item active text-left">
  40. 任务清单:
  41. </a>
  42. <a href="#" v-for="item in items" class="list-group-item" v-on:click="toogleFinsih(item)">
  43. <span class="itemcount">{{item.id}}</span>
  44. {{item.lable}}
  45. <span class="badge" v-bind:class="{isFinish:item.isFinish}">√</span>
  46. </a>
  47. </div>
  48. </form>
  49. </div>
  50. <div class="col-md-5">
  51. <div class="panel panel-default">
  52. <div class="panel-heading">任务计划:</div>
  53. <div class="panel-body">
  54. 请在一周内完成这些计划!
  55. </div>
  56. <div class="panel-footer text-right">
  57. <button class="btn btn-info btn-sm" @click="clearItem">清空任务计划</button>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <script>
  64. //该网站的localStorage的键值,用于存放数据
  65. var todoList = 'todolist';
  66. //对localStorage的封装
  67. var lsp = (function () {
  68. return ({
  69. add: function (dataval) {
  70. //添加数据,键为todolist
  71. localStorage.setItem(todoList, JSON.stringify(dataval));
  72. },
  73. get: function () {
  74. //读取键为todolist的数据
  75. return JSON.parse(localStorage.getItem(todoList));
  76. },
  77. remove: function () {
  78. //移除该站点下键为todolist的数据
  79. localStorage.removeItem(todoList);
  80. },
  81. clear: function () {
  82. //清空该站点下的所有localStorage的数据
  83. localStorage.clear();
  84. }
  85. });
  86. })();
  87. var app = new Vue({
  88. el: '#app',
  89. data: {
  90. title: '任务清单demo',
  91. items: lsp.get() || [],//读取数据。如果没有数据赋值为数组[]
  92. newitem: '' //要添加的数据
  93. },
  94. methods: {
  95. addItem: function () {
  96. var that = this;
  97. this.items.push({
  98. id: that.items.length + 1,
  99. lable: that.newitem,
  100. isFinish: false
  101. });
  102. lsp.add(this.items);
  103. this.newitem = '';
  104. },
  105. toogleFinsih: function (item) {
  106. item.isFinish = !item.isFinish;
  107. },
  108. clearItem: function () {
  109. this.items = [];
  110. }
  111. }
  112. })
  113. </script>
  114. </body>
  115. </html>

github:demo

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行