美文网首页IT@大前端我爱编程Web 前端开发
Vue做一个史上最简单的todolist

Vue做一个史上最简单的todolist

作者: 从小就很瘦 | 来源:发表于2018-06-21 23:14 被阅读16次

用vue做一个简单的todolist应用,这应该是初学vue必经的阶段了,因为一个小小的demo里包含了挺多的vue常用的知识点。
这里,我们不用vue-cli搭建,不用那些乱七八糟的工具,直接引入官网上的cdn,做一个最简单的demo。
1.搭建基本的html结构,引入cdn,和我们的js。


image.png

2.写我们的js.用v-model双向绑定input和data里的inputValue,给input和button添加v-on事件。


image.png
image.png

这样就完成了最基本的添加事件。


image.png
3.v-for遍历list数组,双向绑定到li上面。给删除按钮添加删除事件remove
image.png
直接删除此项todo就可以了。
image.png

给checkbox绑定布尔值,来切换完成状态,span绑定class来显示完成状态。


image.png
image.png
image.png

好了,到了这里基本完成了添加,删除,改变完成状态这几个功能了。但是如果关闭了网页,之前添加的记录都会被删除。此时我们就可以用localStrorage来保存我们之前记录的数据。除非主动去删除,否则这些记录就会被一直保存着。
localStorage的用法如下:
localStorage.setItem(key, val)存储变量名为key,值为val的变量。key,val均为字符串。
localStorage.getItem(key)提取变量名为key的值
如果val为数组或者对象咋办,用JSON.stringify()将其转换成字符串。

function set(key, val) {
  localStorage.setItem(key, JSON.stringify(val));
}
function get(key) {
  return JSON.parse(localStorage.getItem(key));
}
var myStorage = {
  set: set,
  get: get
};

分别将两种方法封装,直接调用即可。
用watch函数监控list的变化。

 watch: {
    list: {
      deep: true,
      handler: function (newVal, oldVal) {
        if(newVal) {
          myStorage.set('list', newVal)
        }else{
          myStorage.set('list', oldVal)
        }
      }
    }
  }

在钩子函数中调用myStorage.get()方法,赋值给data里的list即可达到保存list数据的目的。

  mounted: function(){
    this.list = myStorage.get('list') || [];
  },

好,到这里基本完成了一些简单的功能,用到了v-model,v-on,v-for,v-bind指令。data,mounted,methods,watch函数。html5的localStorage技术。这算是一个史上最简单明了的vue-todolist了。当然里面bug很多。比如输入框不输入任何东西也能添加记录。本人知识有限,这个也仅仅是个练手demo。这些等以后再慢慢更新。过段时间我会写个更加完善更加美观的todolist。

相关文章

网友评论

    本文标题:Vue做一个史上最简单的todolist

    本文链接:https://www.haomeiwen.com/subject/rfpzeftx.html