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 相关文章推荐
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
js实现带圆角的多级下拉菜单效果
Aug 28 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
javascript RegExp 使用说明
May 21 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
JavaScript实现简单的四则运算计算器完整实例
Apr 28 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 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+jQuery制作的列表分页的功能模块
2014/10/14 PHP
CI框架的安全性分析
2016/05/18 PHP
[原创]php使用curl判断网页404(不存在)的方法
2016/06/23 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
js验证表单大全
2006/11/25 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
vue使用axios时关于this的指向问题详解
2017/12/22 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
在axios中使用params传参的时候传入数组的方法
2018/09/25 Javascript
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Python绘制三角函数图(sin\cos\tan)并标注特定范围的例子
2019/12/04 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python 异步async库的使用说明
2020/05/04 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
公司培训心得体会
2014/01/03 职场文书
校庆筹备方案
2014/03/30 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
奖学金个人总结
2015/03/04 职场文书
毕业设计致谢词
2015/05/14 职场文书
师范生教育见习总结
2015/06/23 职场文书
结婚纪念日感言
2015/08/01 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python