vue实现todolist单页面应用
发布于 2017-06-17 07:14:17 | 212 次阅读 | 评论: 0 | 来源: 网友投递
Vue.js 轻量级 JavaScript 框架
Vue.js 是构建 Web 界面的 JavaScript 库，提供数据驱动的组件，还有简单灵活的 API，使得 MVVM 更简单。
这篇文章主要为大家详细介绍了vue实现todolist单页面应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
刚学习vue的小伙伴不知道从哪入手，很多网上的教程一来就搭建脚手架环境，可以新手更本看不懂，建议还是用引入script的方式引入vue.js，然后看官网的教程，再拿那这个demo练练手，也可以看看官网的demo，然后再去熟悉安装，搭建单页面应用。
效果：
功能：
在input输入文字点击按钮或者enter，下面会添加一个带复选框和文字还有删除按钮的li
用到的vue函数：
data，methods，watch，还有localstorage
页面非常简单：
先写外面的盒子，这里用到v-model双向绑定input的值和js里的inputValue
<div id="vue-todolist" class="todolistDiv">
<span> todolist</span>
<input class="ipt" type="text" v-model="inputVaule" />
</div>
然后在js绑定：
var vm=new Vue({
el: '#vue-todolist',
data: {
inputVaule:""
}
})
页面添加ul和button：
<div id="vue-todolist" class="todolistDiv">
<span> todolist</span>
<input class="ipt" type="text" v-model="inputVaule" v-on:keyup.enter="add"/>
<button v-on:click="add" class="btn">add</button>
<ul >
<li v-for="item in items" >
<div class="liDiv">
<label>{{item.text}}</label>
</div>
</li>
</ul>
</div>
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，便于识别。
<li v-for="item in items" >
<div class="liDiv">
<input type="checkbox" v-model="item.completed">
<label v-bind:class="{ complete:item.completed }">{{item.text}}</label>
<button v-on:click="removeTodo(item)" class="btn">x</button>
</div>
</li>
js这里添加了completed属性，还添加了removeTodo方法用于删除指定item：
var vm=new Vue({
el: '#vue-todolist',
data: {
items:[{text:'1',completed:true},{text:'2',completed:false}]
inputVaule:""
},
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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持phperz。