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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
在网页中屏蔽快捷键
Sep 06 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
如何创建一个JavaScript弹出DIV窗口层的效果
Sep 25 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
原生js简单实现放大镜特效
May 16 Javascript
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
validform表单验证的实现方法
Mar 08 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 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后台程序与Javascript的两种交互方式
2009/10/25 PHP
php防止sql注入简单分析
2015/03/18 PHP
php_pdo 预处理语句详解
2016/11/21 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
vue 清空input标签 中file的值操作
2020/07/21 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[53:18]Spirit vs Liquid Supermajor小组赛A组 BO3 第三场 6.2
2018/06/03 DOTA
给Python初学者的一些编程技巧
2015/04/03 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
Python切片工具pillow用法示例
2018/03/30 Python
浅谈keras使用预训练模型vgg16分类,损失和准确度不变
2020/07/02 Python
python设置表格边框的具体方法
2020/07/17 Python
Visual Studio code 配置Python开发环境
2020/09/11 Python
Python中Selenium模块的使用详解
2020/10/09 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
python函数超时自动退出的实操方法
2020/12/28 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
社区七一党员活动方案
2014/01/25 职场文书
前处理组长岗位职责
2014/03/01 职场文书
广告学专业求职信
2014/06/19 职场文书
商场周年庆活动方案
2014/08/19 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2015年毕业实习工作总结
2014/12/12 职场文书