溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這個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">
<h2>todos</h2>
<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實現備忘錄功能的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
