vue实现todolist单页面应用

网友投稿 233 2023-05-24


vue实现todolist单页面应用

刚学习vue的小伙伴不知道从哪入手,很多网上的教程一来就搭建脚手架环境,可以新手更本看不懂,建议还是用引入script的方式引入vue.js,然后看官网的教程,再拿那这个demo练练手,也可以看看官网的demo,然后再去熟悉安装,搭建单页面应用。

效果:

功能:

在input输入文字点击按钮或者enter,下面会添加一个带复选框和文字还有删除按钮的li

用到的vue函数:

data,methods,watch,还有localstorage

页面非常简单:

先写外面的盒子,这里用到v-model双向绑定input的值和js里的inputValue

todolist

然后在js绑定:

var vm=new Vue({

el: '#vue-todolist',

data: {

inputVaule:""

}

})

页面添加ul和button:

todolist

button的点击事件为methods里的add方法v-for就是遍历items数组,将item的text显示

js里的data要加上items,还要有methods:

var vm=new Vue({

el: '#vue-todolist',

data: {

items:[{text:'1'},{text:'2'}]

inputVaule:""

},

methods:{

add:function(){

this.items.push({text:this.inputVaule});

this.inputVaule="";

}

}

})

点击按钮时,就添加input的值到items数组,并重置值。这样view就自动更新li添加一项,因为数据变化页面也会实时更新,vue的好处开始浮现

在li加上checkbox和delete,再给items添加completed这个属性,代表完成没有,使用v-bind:class,意思是item.completed是true,那么就会使用complete这个class,如果false,就没有class,complete这个class我们可以设置字体red,便于识别。

js这里添加了completed属性,还添加了removeTodo方法用于删除指定item:

var vm=new Vue({

el: '#vue-todolist',

data: {

items:[{text:'1',completed:true},{text:'2',completed:false}]

inputVaule:""

}BkaGBBhna,

methods:{

add:function(){

this.items.push({text:this.inputVaule});

this.inputVaule="";

},

removeTodo: function (todo) {

this.items.splice(this.items.indexOf(todo), 1)

}

}

})

现在已经完善的差不多了,可是我们发现,每次浏览器刷新,或者页面重新打开,我们新增加的li就会消失,那我们要保存我们添加的数据,要怎么做呢,很简单,html5为我们提供了localstorage这个东西,它保存数据在浏览器,使得页面刷新或者重新打开或者浏览器关闭也不会数据丢失。

我们一步步来看怎么实现

1.添加li时保存数据到localstorage:

var STORAGE_KEY = 'todos-vuejs'//名称

var todoStorage = {

save: function (todos) {

localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))

}

}

很简单,调用setItem传入key和我们的items数组即可,这时候我们要用到watch函数了,去监视items数组,如果items数组有变化即添加或者删除,我们都自动调用todostorage的save方法

watch:{

items:{

handler:function(items){

todoStorage.save(items)

},

deep:true//一定要加

}

}

我们打开浏览器的开发者选项的dom,然后添加几个li,可以看到localstorage里面已经保存了todos-vuejs,里面保存了我们添加的item数据

2.数据保存到浏览器的localstorage后,我们的items数组的数组源是不是也应该设置为localstorage的呢

添加fetch方法

var STORAGE_KEY = 'todos-vuejs'//名称

var todoStorage = {

fetch: function () {

var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')

todos.forEach(function (todo, index) {

todo.id = index

})

todoStorage.uid = todos.length

return todos

},

save: function (todos) {

localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))

}

}

还有我们data里的items:

data: {

items:todoStorage.fetch(),//直接从localstroage拿数据

inputVaule:""

},

到这里功能就齐全了,小伙伴可以再添加更多的功能,比如全部删除等,

最后附上源码:https://github.com/gdmec07140603/todolist.git


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Java中用Socket实现HTTP文件上传实例
下一篇:spring boot配合前端实现跨域请求访问
相关文章

 发表评论

暂时没有评论,来抢沙发吧~