基于vuejs实现一个todolist项目


Posted in Javascript onApril 11, 2017

用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化:

基于vuejs实现一个todolist项目

完整代码:

App.vue

<template>
 <div id="app">
 <h1 v-html = "title"></h1>
 <input v-model="newItem" v-on:keyup.enter="addNew" ></input>
 <ul>
  <li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</li>
 </ul>
 </div>
</template>

<script>
import Store from './store'
export default {
 data:function(){
 return {
  title:"This Is A Todolist",
  items:Store.fetch(),
  newItem:""
 }
 },
 watch:{
 items:{
  handler:function(items){
  Store.save(items)
  },
  deep:true
 }
 },
 methods:{
 toggleFinish:function(item){
  item.isFinished = !item.isFinished
 },
 addNew:function(){
  this.items.push({
  label:this.newItem,
  "isFinished":false 
  })
  this.newItem=""
 }
 }
}
</script>

<style>
.finished{
 text-decoration:underline;
}
li{
 list-style:none;
 font-size:1.6em;
 margin-top:10px;
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
input{
 width:230px;
 height:40px;
 border-radius:20px;
 padding: 0.4em 0.35em;
 border:3px solid #CFCFCF;
 font-size: 1.55em;
}
</style>

store.js:

const STORAGE_KEY='todos-vuejs' 
export default {
 fetch:function(){
  return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');
 },
 save:function(items){
  window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
 }
}

详细解析

ES6的写法:

export default {
 name: 'hello',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 }
 }
}

export default 和 export 区别:

1).export与export default均可用于导出常量、函数、文件、模块等

2).你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用

3).在一个文件或模块中,export、import可以有多个,export default仅有一个

4).通过export方式导出,在导入时要加{ },export default则不需要

1.export

//demo1.js
export const str = 'hello world'
export function f(a){ return a+1}
对应的导入方式:

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次,导入的时候带花括号

2.export default

//demo1.js
export default const str = 'hello world'
对应的导入方式:

//demo2.js
import str from 'demo1' //导入的时候没有花括号

当最简单导入的时候,这个值是将被认为是”入口”导出值。

在App.vue中完成项目编写:

组件布局将在这里设置,.vue文件将由vue-loader进行加载,.vue内同时包含html、css、js源码,使组件的独立,组件之间可以尽可能地解耦,便于开发维护

先看一个简单示例:只要isFinished为true就加下划线,false就不加下划线:

<template>
 <div id="app">
 <h1 v-html = "title"></h1>
 <ul>
  <li v-for="item in items" v-bind:class="{finished:item.isFinished}">{{item.label}}</li>
 </ul>
 </div>
</template>

<script>
import Hello from './components/Hello'

export default {
 data:function(){
 return {
  title:"this is a todolist",
  items:[
  {
   label:"coding",
   "isFinished":false
  },
  {
   label:"walking",
   "isFinished":true
  }
  ]
 }
 }
}
</script>

<style>
.finished{
 text-decoration:underline;
}
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

对于class的控制如上:如果是数组的话则可以渲染多个。

再进一步完成功能:点击没有下划线的li就会加下划线,有下划线就会去除下划线。

需要绑定事件:

<li v-for="item in items" v-bind:class="{finished:item.isFinished}" v-on:click="toggleFinish(item)">{{item.label}}</li>

还要添加方法toggleFinish():

methods:{
 toggleFinish:function(item){
  item.isFinished = !item.isFinished
 }
 }

将input输入的值添加到列表下面

添加input:

<input v-model="newItem" v-on:keyup.enter="addNew" ></input>

data对象添加:

newItem:""

添加方法:

//addNew:function(){
// alert(this.newItem)
// this.newItem=""   //添加后加输入框清空
//}

addNew:function(){
 this.items.push({
 label:this.newItem,
 "isFinished":false 
 })
 this.newItem=""
}

使用localStorage来存储

使用store.js:

const STORAGE_KEY='todos-vuejs' 
export default {
 fetch:function(){
  return JSON.parse(window.localStorage.getItem(STORAGE_KEY)||'[]');
 },
 save:function(items){
  window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
 }
}

两个方法:一个设置,一个获取

导入:

import Store from './store'

打印一下Store,console.log(Store),可以看到:

基于vuejs实现一个todolist项目

由于加入代码中每次都需要添加还有删除等等,如果每次都用到store的方法,这就有点麻烦了,所以这里就要用到watch观察。

watch:{
 items:{
  handler:function(val,oldVal){
  console.log(val,oldVal)
  },
  deep:true
 }
 },

可以看到打印出:

基于vuejs实现一个todolist项目

使用save()方法:

watch:{
 items:{
  handler:function(items){
  Store.save(items)
  },
  deep:true
 }
 },

基于vuejs实现一个todolist项目

一有变化就会触发。

将fetch()方法也加进去:

<script>
import Store from './store'
export default {
 data:function(){
 return {
  title:"<span>?</span>this is a todolist",
  items:Store.fetch(),
  newItem:""
 }
 },
 watch:{
 items:{
  handler:function(items){
  Store.save(items)
  },
  deep:true
 }
 },
 methods:{
 toggleFinish:function(item){
  item.isFinished = !item.isFinished
 },
 addNew:function(){
  this.items.push({
  label:this.newItem,
  "isFinished":false 
  })
  this.newItem=""
 }
 }
}
</script>

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

Javascript 相关文章推荐
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
Dec 04 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
Oct 24 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Angular 4.X开发实践中的踩坑小结
Jul 04 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
Jun 13 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
vue实现todolist单页面应用
Apr 11 #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
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
第1次亲密接触PHP5(2)
2006/10/09 PHP
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
详解vue 中使用 AJAX获取数据的方法
2017/01/18 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
2018/08/10 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
2019/10/15 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python 计算文件的md5值实例
2017/01/13 Python
一份python入门应该看的学习资料
2018/04/11 Python
pandas去重复行并分类汇总的实现方法
2019/01/29 Python
总结python中pass的作用
2019/02/27 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
对python特殊函数 __call__()的使用详解
2019/07/02 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
详解用 python-docx 创建浮动图片
2021/01/24 Python
C语言50道问题
2014/10/23 面试题
简历中自我评价分享
2013/10/09 职场文书
国家助学金获奖感言
2014/01/31 职场文书
高中学生干部学习的自我评价
2014/02/21 职场文书
计划生育个人总结
2015/03/02 职场文书
心术观后感
2015/06/11 职场文书
MySQL数据库10秒内插入百万条数据的实现
2021/11/01 MySQL