vue.js实现备忘录功能的方法
程序员文章站
2023-02-25 13:36:41
这个vue实现备忘录的功能demo是k在github上找到的，k觉得这是一个用来对vue.js入门的一个非常简单的demo，所以拿在这里共享一下。
（尊重他人劳动成果，从...
这个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" rel="external nofollow" />
<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" rel="external nofollow" :class="{ selected: visibility == 'all' }">all</a></li>
<li><a href="#/active" rel="external nofollow" :class="{ selected: visibility == 'active' }">active</a></li>
<li><a href="#/completed" rel="external nofollow" :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')
以上这篇vue.js实现备忘录功能的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。