vue实现todolist单页面应用


Posted in Javascript onApril 11, 2017

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

效果:

vue实现todolist单页面应用

功能:

在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

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

Javascript 相关文章推荐
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
JavaScript设置body高度为浏览器高度的方法
Feb 09 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 Javascript
详解vue中使用transition和animation的实例代码
Dec 12 Vue.js
JavaScript实现显示和隐藏图片
Apr 29 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
Apr 11 #Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
Apr 11 #Javascript
javascript数组去重常用方法实例分析
Apr 11 #Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 #Javascript
vuejs绑定class和style样式
Apr 11 #Javascript
vue监听滚动事件实现滚动监听
Apr 11 #Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
PHP下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
php异步:在php中使用fsockopen curl实现类似异步处理的功能方法
2016/12/10 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
很棒的vue弹窗组件
2017/05/24 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
用vue写一个日历
2020/11/02 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python打开网页和暂停实例
2014/09/30 Python
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
详解pandas中MultiIndex和对象实际索引不一致问题
2019/07/23 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
全球最大的在线旅游公司:Expedia
2017/11/16 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
博柏利美国官方网站:Burberry美国
2020/11/19 全球购物
2014年幼儿园园长工作总结
2014/12/17 职场文书
vue-element-admin项目导入和导出的实现
2021/05/21 Vue.js
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫
聊聊基于pytorch实现Resnet对本地数据集的训练问题
2022/03/25 Python