基于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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
深入解析contentWindow, contentDocument
Jul 04 Javascript
iframe的父子窗口之间的对象相互调用基本用法
Sep 03 Javascript
JS中的form.submit()不能提交表单的错误原因
Oct 08 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
微信小程序switch组件使用详解
Jan 31 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
JS随机密码生成算法
Sep 23 Javascript
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
php类常量的使用详解
2013/06/08 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
改变状态栏文字的js代码
2014/06/13 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
javascript中call,apply,bind函数用法示例
2016/12/19 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
2017/01/13 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
2020/05/06 Javascript
如何实现小程序与小程序之间的跳转
2020/11/04 Javascript
Python中实现三目运算的方法
2015/06/21 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
在Django同1个页面中的多表单处理详解
2017/01/25 Python
python 文件操作删除某行的实例
2017/09/04 Python
利用信号如何监控Django模型对象字段值的变化详解
2017/11/27 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
django 多数据库及分库实现方式
2020/04/01 Python
Python 实现简单的客户端认证
2020/07/29 Python
python map比for循环快在哪
2020/09/21 Python
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
远程培训的心得体会
2014/09/01 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
2014年工人工作总结
2014/11/25 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
Mysql 用户权限管理实现
2021/05/25 MySQL
Python jiaba库的使用详解
2021/11/23 Python
python接口测试返回数据为字典取值方式
2022/02/12 Python