一周一个小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经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...
随机推荐
- QRCode简介（收藏）
一.什么是二维码:二维码 (2-dimensional bar code),是用某种特定的几何图形按一定规律在平面(二维方向上)分布的黑白相间的图形记录数据符号信息的. 在许多种类的二维条码中,常 ...
- http、tcp及从请求到渲染的过程
http.tcp及从请求到渲染的过程 https://blog.csdn.net/pambassador/article/details/88539478 http请求的结构内容 https://ww ...
- EndNote同步功能<Sync>
EndNote的同步功能Sync可以把本地文献和网络云文献进行同步,如何进行同步,同步过程中需要注意什么,本文就EndNote的同步功能Sync作一图文说明. 一直对EndNote的同步功能Sync不 ...
- TensorFlow GPU 的使用
一.TensorFlow 设备分配 1.设备分配规则 If a TensorFlow operation has both CPU and GPU implementations, the GPU d ...
- 2019.4.2 HTML相关
HTML页面的基本结构 html标签 页面的设置和文件的导入(页面标题) 要显示在页面上的标签 标签 h1---h6:一到六级标题 hr:分割线 br:换行 p:段落 em:斜体 strong:加粗 ...
- python迭代、可迭代对象、迭代器及生成器
迭代 通常意义上的迭代是指:重复执行一系列运算,从前面的量依次推出后面的量的过程,每一次迭代的结果,会作为下一次迭代的初始值. 在c.c++.java等编程语言中的for循环语句,就是一个迭代过程,例 ...
- centsos 查看系统版本信息
[root@hostuser gitlab]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch:cxx-4.1-amd64:cx ...
- 1、The Fctory Pattern（工厂模式：解决对象创建问题）
The Fctory Pattern 处理对象创建,客户端可以申请一个对象而不用知道对象被那个class创建.可以方便地解耦对象的使用和创建,有两种实现,工厂方法和抽象工厂. Method(工厂方法 ...
- php中die(),exit(),return的区别
die()停止程序运行,输出内容exit是停止程序运行,不输出内容return是返回值die是遇到错误才停止exit是直接停止,并且不运行后续代码,exit()可以显示内容.return就是纯粹的返回 ...
- Win中同时安装python2和python3及SulimeText3的python IDE搭建
一.下载安装Sublime Text3,初衷是不想忍受pycharm的打开速度,想享受下飞的质感.Sublime Text3的安装已经久远,请自行google. 二.安装python2.7与pytho ...