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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
Apr 02 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
vue.js 表格分页ajax 异步加载数据
Oct 18 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
打印json对象的内容及JSON.stringify函数应用
2013/03/29 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
如何在node的express中使用socket.io
2014/12/15 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
vue集成百度UEditor富文本编辑器使用教程
2018/09/21 Javascript
JS实现小米轮播图
2020/09/21 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
Python程序员开发中常犯的10个错误
2014/07/07 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
Python爬虫包BeautifulSoup学习实例(五)
2018/06/17 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
Html5页面中的返回实现的方法
2018/02/26 HTML / CSS
香港草莓网土耳其网站:Strawberrynet TR
2017/03/02 全球购物
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
销售顾问工作计划书
2014/08/15 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2014教师评职称工作总结
2014/11/10 职场文书
2014年采购员工作总结
2014/11/18 职场文书
教师节感谢信
2015/01/22 职场文书
标枪加油稿
2015/07/22 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
python随机打印成绩排名表
2021/06/23 Python