一周一个小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经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...
随机推荐
- Maven 远程仓库下载慢的的解决方案
配置很简单,修改conf文件夹下的settings.xml文件,添加如下镜像配置: 我直接去设置maven目录下面的setttings文件 添加镜像站点 <mirrors> <mir ...
- HTML5 Canvas核心技术 图形、动画与游戏开发学习总结
save 和 restore 函数的应用 保存canvas和恢复canvas clip函数的应用 文字的绘制 背景图片的绘制 离屏canvas 基于时间的运动
- 高阶篇：4.4）FMEA手册的疑问与不足(个人观点)
本章目的:如题,述说FMEA手册第四版的疑问与不足. 1.前言 作者接触FMEA,并真正将其作为可靠性设计方法,也是在近几年的时候,所以不能说算是一个FMEA专家吧. 但作者也有一些自己的优势,就是自 ...
- 简易APB4 slave实践
一个简易的(不完整的)APB4 slave的可以没有PREADY和PSLVERR,这两个信号都被赋予常数,以及没有PPROT. 两种不同类型的寄存器: 图: 普通寄存器电路图 图: 带读写控制寄存器电 ...
- 获取select标签选中的值
js获取select标签选中的值 var obj = document.getElementById(”testSelect”); var index = obj.selectedIndex; var ...
- 漫谈TCPIP协议原理
一.每次说道TCPIP协议,有能说会道者,总爱说三次握手,什么意思? 顾名思义,假设有两个机器A和B 1.当A发送给B一个包的时候,B接收到了,这个时候,B有两个选择,要么将包数据放入缓存,等待处理, ...
- Revit二次开发_快速显示隐藏剖面框
最近遇到一种状况需要经常切换剖面框的可见性,于是想将剖面框的显示与隐藏做成一个按钮,方便切换. 其他类似元素想做成快速切换可见性应该可以使用类似做法. 这次的隐藏对象是剖面框,所以我直接就隐藏元素了. ...
- 在W3C SCHOOL网站上发现一个关于Schema的错误
原地址是http://www.w3school.com.cn/schema/schema_complex_empty.asp 下面这个例子是不正确的 xmlspy报错. 因为<xs:restri ...
- D3介绍
D3介绍 D3是用来做web页面可视化的组件,其官方网址为http://d3js.org 安装 D3类库的文件只有一个d3.js.下载后直接在html的<script>标签中引用此js就可 ...
- 在VIM中添加行号的方法
VIM编辑器是可以显示行号的.但是,有时候我们需要在整个代码的行首添加行号.怎么实现呢?实现的方法有很多,这里就介绍我知道的一种吧. 在每行行首添加某个字符串 :%s/^/your_string/ 在 ...