一周一个小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经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...
随机推荐
- Scrapy 抓取股票行情
安装scrapy会出现错误,我们选择anaconda3作为编译环境,搜索scrapy安装(有错误自查) 创建scrapy爬虫项目: 调出cmd,到相应目录:输入: scrapy startprojec ...
- 2.Bootstrap CSS
Bootstrap CSS 一.Bootstrap CSS概览 移动设备优先 移动设备优先是 Bootstrap 3 的最显著的变化. 在之前的 Bootstrap 版本中(直到 2.x),您需要手动 ...
- nginx克隆之后问题
[alert] kill(2942, 1) failed (No such process) 背景:虚拟机克隆之后启动service nginx reload报这个错,而且没有日志 根据这个博文htt ...
- webform的导出
呃 怎么说呢 我这个是公司大佬写好的 我直接调用 和以前写的百度上面的都不大一样 感觉很Nice 插个眼 说不定以后还得回来参考参考 具体是这样的 你先写好一个模板 就是你要导出的数据应该在Ex ...
- python自动化 协程函数、二分查找、模块搜索
协程函数 yiled: 把函数的执行结果封装好__iter__和__next__得到一个迭代器 与return功能类似,都可以返回值,但是return只能返回一次只 def fun(count): p ...
- Linux下Python3.5使用pyqt5.11报错 ImportError: /usr/local/lib/python3.5/dist-packages/PyQt5/QtCore.so: undefined symbol: PySlice_AdjustIndices 解决方法
我用的Linux自带的是Python3.5版本,运行pip3 install PyQt5, 下载的是PyQt5.11,运行PyQt5程序会报错: ImportError: /usr/local/lib ...
- user agent stylesheet -- 浏览器默认样式
user agent stylesheet 从字面意义上很容易理解他表示用户浏览器的样式表. 今天在做项目时,无意间发现一个元素我并没有设置li的text-align:center : 但其中的img ...
- MySQL限制查询结果返回的数量limit
1限制查询结果 [limit {[offset,] row_count | row_count offset}] row_count 起始行(第一行是0) offset 偏移量 输出几行记录
- 怎么用代码弹回 UITableView 中左滑出来的删除按钮
点击取消,让删除按钮弹回去 [tableView setEditing:NO] 初学 ios 真是大菜鸟,这么简单的一个问题搞了 3 个小时
- 自己用的opensuse源
utsc_oss http://mirrors.ustc.edu.cn/opensuse/distribution/13.1/repo/oss/utsc_non_oss ...