一周一个小demo — vue.js实现备忘录功能
这个vue实现备忘录的功能demo是K在github上找到的，K觉得这是一个用来对vue.js入门的一个非常简单的demo，所以拿在这里共享一下。
（尊重他人劳动成果，从小事做起~ demo原github地址：https://github.com/vuejs/vue）
一、实现效果
二、代码展示
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>备忘录</title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<style>[v-cloak] { display: none; }</style>
</head> <body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo"
autofocus autocomplete="off"
placeholder="What needs to be done?"
v-model="newTodo"
@keyup.enter="addTodo">
</header>
<section class="main" v-show="todos.length" v-cloak>
<input class="toggle-all" type="checkbox" v-model="allDone">
<ul class="todo-list">
<li v-for="todo in filteredTodos"
class="todo"
:key="todo.id"
:class="{ completed: todo.completed, editing: todo == editedTodo }">
<div class="view">
<input class="toggle" type="checkbox" v-model="todo.completed">
<label @dblclick="editTodo(todo)">{{ todo.title }}</label>
<button class="destroy" @click="removeTodo(todo)"></button>
</div>
<input class="edit" type="text"
v-model="todo.title"
v-todo-focus="todo == editedTodo"
@blur="doneEdit(todo)"
@keyup.enter="doneEdit(todo)"
@keyup.esc="cancelEdit(todo)">
</li>
</ul>
</section>
<footer class="footer" v-show="todos.length" v-cloak>
<span class="todo-count">
<strong>{{ todos.length }}</strong> {{ remaining | pluralize }} left
</span>
<ul class="filters">
<li><a href="#/all" :class="{ selected: visibility == 'all' }">All</a></li>
<li><a href="#/active" :class="{ selected: visibility == 'active' }">Active</a></li>
<li><a href="#/completed" :class="{ selected: visibility == 'completed' }">Completed</a></li>
</ul>
<button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
Clear completed
</button>
</footer>
</section>
<footer class="info">
<p>双击编辑一条备忘录</p>
</footer> </body> <script language="JavaScript" src="js/director.js"></script>
<script language="JavaScript" src="js/vue.js"></script>
<script language="JavaScript" src="js/index_vue.js"></script> </html>
// 本地缓存设置
// 防止页面关闭后，数据全部丢失的问题
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = { // 获取本地存储中的内容
fetch:function(){
// JSON.parse()解析一个json字符串
// localStorage.getItem 从本地存储中获取STORAGE_KEY字段的值
var todos = JSON.parse(localStorage.getItem(STORAGE_KEY)||'[]');
// foreach遍历todos，两个参数分别为遍历出的每一个子单元及对应的索引
todos.forEach(function(todo,index){
todo.id = index;
})
todoStorage.uid = todos.length;
return todos;
}, // 保存时将内容写进本地存储
save:function(todos){
// localStorage.setItem 将todos转化成字符串存入本地存储，键名为STORAGE_KEY
localStorage.setItem(STORAGE_KEY,JSON.stringify(todos))
} } // 可视化状态过滤设置
// 包括全选（all）、选择未完成（active）、选择已完成（completed）
var filters = {
all:function(todos){
return todos;
}, // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
active:function(todos){
return todos.filter(function(todo){
return !todo.completed;
})
}, completed:function(todos){
return todos.filter(function(todo){
return todo.completed;
})
}
} // vue实例化
var app = new Vue({ // data 参数设置
data:{
todos:todoStorage.fetch(),
newTodo:'',
editedTodo:null,
visibility:'all'
}, // watch 监视todos在本地储存中的变化
watch:{
todos:{
handler:function(todos){
todoStorage.save(todos)
},
deep:true
}
}, // computed 检测数据发生变动时执行函数
computed:{ filteredTodos:function(){
return filters[this.visibility](this.todos)
}, remaining:function(){
return filters.active(this.todos).length
}, allDone:{
get:function(){
return this.remaining === 0
}, set:function(value){
this.todos.forEach(function(todo){
todo.completed = value
})
} }
}, // methods 方法设置
methods:{
addTodo:function(){
var value = this.newTodo && this.newTodo.trim()
if(!value){
return;
}
this.todos.push({
id:todoStorage.uid++,
title:value,
completed:false
})
this.newTodo = ''
}, removeTodo:function(todo){
this.todos.splice(this.todos.indexOf(todo),1)
}, editTodo:function(todo){
this.beforeEditCache = todo.title;
this.editedTodo = todo
}, doneEdit:function(todo){
if(!this.editedTodo){
return;
};
this.editedTodo = null;
todo.title = todo.title.trim()
if(!todo.title){
this.removeTodo(todo)
}
}, cancelEdit:function(todo){
this.editedTodo = null;
todo.title = this.beforeEditCache
}, removeCompleted:function(){
this.todos = filters.active(this.todos)
}
}, directives:{
'todo-focus':function(el,binding){
if(binding.value){
el.focus()
}
}
}
}) // hashchange URL的片段标识符更改触发
function onHashChange(){
var visbility = window.location.hash.replace(/#\/?/, '');
if(filters[visbility]){
app.visibility = visbility
}else{
window.location.hash = '';
app.visbility = 'all'
}
} window.addEventListener('hashchange',onHashChange)
onHashChange() // mount 手动挂载
app.$mount('.todoapp')
一周一个小demo — vue.js实现备忘录功能的更多相关文章
- 一周一个小demo — 前端后台的交互实例
这一周呢,本K在大神的指导下,完成了一个利用ajax与php文件上传处理相结合的一个留言板功能的小实例,下面就让本K来带大家瞅瞅如何实现这一种功能. 一.界面概览 首先我们来看一下这个小demo的具体 ...
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- java线程间通信：一个小Demo完全搞懂
版权声明:本文出自汪磊的博客,转载请务必注明出处. Java线程系列文章只是自己知识的总结梳理,都是最基础的玩意,已经掌握熟练的可以绕过. 一.从一个小Demo说起 上篇我们聊到了Java多线程的同步 ...
- Visual Studio 2017 - Windows应用程序打包成exe文件（2）- Advanced Installer 关于Newtonsoft.Json，LINQ to JSON的一个小demo mysql循环插入数据、生成随机数及CONCAT函数 .NET记录-获取外网IP以及判断该IP是属于网通还是电信 Guid的生成和数据修整（去除空格和小写字符）
Visual Studio 2017 - Windows应用程序打包成exe文件(2)- Advanced Installer Advanced Installer :Free for 30 da ...
- CI 结合 vue.js 的搜索功能模块
CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...
- 原生JS写了一个小demo，根据输入的数字生成不同背景颜色的小方块儿~
昨天练习写了这个小demo,个人觉得通过设置定位元素left和top的值,来实现换行的功能,这种方法很巧妙~ 另外,如下代码中的随机颜色的获取,还请各位前辈多多指教:需要改进的地方:或者有没有更好的方 ...
- 一个简单的 vue.js 实践教程
https://segmentfault.com/a/1190000006776243?utm_source=tuicool&utm_medium=referral 感觉需要改善的地方有: ( ...
- 学习react，动手实现一个小demo（仿知乎问答）
学习react也有一周的时间,最近自己做了个仿知乎问答的小demo,项目源码在github上:https://github.com/yang302/reactQa 使用技术:bower+gulp+re ...
- 从一个小demo开始，体验“API经济”的大魅力
写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...
随机推荐
- windows 安装python问题总结
一.安装支持包 很多二进制包 NumPy-1.9+MKL 以及 Microsoft Visual C++ 2008 (x64, x86, and SP1 for CPython 2.6 and 2.7 ...
- Oracle PL/SQL学习之你需要知道的快捷键
1.格式化sql语句 Ctrl+A 然后 Ctrl+F7 2.窗口最大化最小化 首选项-->快捷键-->Maximize Toggle,然后修改成自己熟悉的快捷键设置.
- NavigatorIOS
使用 NavigatorIOS,我们需要给他指定一个路由,这样它才能知道显示哪个页面 实例化 Navigator 需要2个必要的属性 —— initialRoute 和 renderSence,它们的 ...
- git的使用（入门）
针对linux系统,全部采用shell命令的方式实现 一.查看相关信息 which -a git 查看git的安装位置git version 查看git的版本git help 学习相关的命令 二.gi ...
- RSAUtils非对称加密
import org.bouncycastle.jce.provider.BouncyCastleProvider; import org.bouncycastle.util.encoders.Bas ...
- 用servlet进行用户名和密码校验01
用servlet进行用户名和密码校验01 编写一个servlet进行用户名和密码校验,获取登录页面的用户名密码,并显示出来 1.工作目录结构 2.首先是一个login.html,包含非常简单的登录表单 ...
- 迁移-Mongodb时间类数据比较的坑
背景: 拦截件监控时,对于签收的数据需要比较签收时间和实际同步数据的时间来判断 同步时间是在签收前还是签收后.在比较时,用到同步时间syncTime和signTime, signTime从Q9查单获 ...
- U盘拷贝大文件提示文件过大无法拷贝解决方案
工具: 计算机 windows操作系统 U盘 原因:由于U盘的格式问题导致的,当期的磁盘格式是FAT32类型的,无拷贝过大的文件 方法:接下来修改U盘类型,且不格式化U盘 1.键盘win+R快捷键弹出 ...
- 安装 VMware Tools
参考帮助文档 错误#1: tar: vmware-tools-distrib: Cannot mkdir: Read-only file system 解决方法: mkdir /mnt/cdrom m ...
- day1-Python擅长的领域+学习内容
Python擅长的领域 WEB开发 Django Pyramid Tornado Bottle Flask WebPy 网络编程 Twisted Re ...