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 相关文章推荐
slice函数的用法 之不错的应用
Dec 29 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
AngularJS实现DOM元素的显示与隐藏功能
Nov 22 Javascript
详解js前端代码异常监控
Jan 11 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
Apr 12 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
angularjs1.X 重构controller 的方法小结
Aug 15 Javascript
微信小程序基于高德地图查找位置并显示文字
Oct 30 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
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
简单的PHP多图上传小程序代码
2011/07/17 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
PHP实现创建一个RPC服务操作示例
2020/02/23 PHP
js 利用className得到对象的实现代码
2011/11/15 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
AngularJS入门心得之directive和controller通信过程
2016/01/25 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
layui实现二维码弹窗、并下载到本地的方法
2019/09/25 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
Python中的Numpy入门教程
2014/04/26 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
中国高端鲜花第一品牌:roseonly(一生只送一人)
2017/02/12 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
高一自我鉴定
2013/12/17 职场文书
大学生志愿者感言
2014/01/15 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
创业计划书之养殖业
2019/10/11 职场文书
vue中data改变后让视图同步更新的方法
2021/03/29 Vue.js