Vue_簡單項目todolist

Richard_Gao 發布于2019-08-21 17:35 / 2066人閱讀

摘要：強大的漸進式渲染引擎使得我們越來越不需要手動控制數據的變化，那么下面我們來看一看。上面所有的依賴在下面引入就可以了。

Vue強大的漸進式渲染引擎使得我們越來越不需要手動控制數據的變化，那么下面我們來看一看。如何用Vue寫一個todolist。

開始

首先，創建一個文件夾，用命令行初始化
npm init -y
然后安裝需要的插件
npm i -S underscore vue todomvc-app-css
在這里我們需要用到vue ，css樣式npm上的todo-app-css 插件html我們可以采用http://todomvc.com/examples/b...上面的html并將其格式化，然后下載underscore對數組進行操作。
上面所有的依賴在下面引入就可以了。

新建實例

新建vue的實例
寫一個默認的任務：todoList: [{}]



刪除任務方法
methods: {
  ...
  // 刪除任務
  deleteTodo(todo) {
    this.todoList = _.without(this.todoList, todo)
  }
}
編輯任務

添加一個數據項：
data: {
  // 正在編輯的任務索引
  editingIndex: -1,
  ...
}
綁定雙擊事件：
{{ todo.text }}
methods: {
  ...
  // 編輯任務
  editTodo(index) {
    // 設置一下當前正在編輯的索引
    this.editingIndex = index;
  }
}
加上class
  v-for="(todo,index) in todoList" :key=""todo-"+index" >```
自定義指令：
// 注冊一個全局自定義指令 v-focus
Vue.directive("focus", {
  // 當綁定元素插入到 DOM 中。
  inserted(el) {
    // 聚焦元素
    el.focus()
  },
  // 當綁定元素更新的時候
  update(el) {
    el.focus();
  }
})
使用自定義指令

添加保存todo, 實際上就是把input框取消

保存的方法
methods: {
  ...
  // 保存任務，因為是動態綁定的，不需要再保存，只需要把input框隱藏即可
  saveTodo(todo) {
    this.editingIndex = -1
    if (todo.text.trim().length < 1) {
      this.deleteTodo(todo)
    }
  }
}
未完成的數量
computed: {
  ....
  // 未完成的任務數量
  activeCount() {
    return this.todoList.filter(item => {
      return !item.checked
    }).length;
  }
}
數據持久化到本地localStorage
新建store.js
var STORAGE_KEY = "todoList"
window.todoStorage = {
    fetch() {
    try {
      return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]");
    } catch(error) {
      return [];
    }
    },
    save(todoList) {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(todoList));
    }
}
引入store.js

修改初始化數據：
data: {
  ...
  todoList: todoStorage.fetch()
}
在Vue實例中添加一個屬性變化觀察
// 觀察屬性變化
watch: {
  todoList: {
    deep: true,
    handler: todoStorage.save
  }
},
全部完成功能
添加計算屬性：
computed: {
  // 是否所有任務都完成
  allDone: {
    get() {
      // 未完成的數量為0表示全部完成,全部完成返回true
      return this.activeCount === 0;
    },
    set(value) {
      this.todoList.forEach(todo => {
        todo.checked = value
      });
    }
  }
}
使用v-model綁定：

實現過濾所有，已完成，未完成的功能
在實例化Vue對象外面放一個普通的過濾對象：
// 一個普通的過濾的對象, 用來過濾任務列表
var filters = {
  all: function (todos) {
    return todos;
  },
  active: function (todos) {
    return todos.filter(function (todo) {
      return !todo.checked;
    });
  },
  completed: function (todos) {
    return todos.filter(function (todo) {
      return todo.checked;
    });
  }
};
添加一個屬性visibility 來表示我們要顯示所有，還是顯示未完成，或已完成
data: {
  visibility: "all",
}
修改一下未完成的數量這個計算屬性，使用上面的filters對象去過濾
computed: {
   // 未完成的任務數量
  activeCount() {
    return filters.active(this.todoList).length;
  },
}
添加任務過濾的計算屬性：
computed: {
  // 過濾任務列表
  filteredTodoList: function () {
    return filters[this.visibility](this.todoList);
  }
}
在DOM當中添加點擊事件，點擊的時候修改visiblity屬性即可
  所有
  未完成
  已完成
列表渲染的循環語句修改：

添加一個變量，得到hash值：
var visibility = location.hash.substr(location.hash.indexOf("/")+1);
visibility = visibility === "" ? "all" : visibility
設置visibility屬性的值為當前的這個變量：
data: {
  visibility: visibility,
 }
點擊清空已完成功能：
添加一個已完成的任務數量計算屬性：
computed: {
  // 已完成的任務數量
  completedCount() {
    return filters.completed(this.todoList).length;
  }
}
添加一個清空已完成的方法：
methods: {
  // 清空已完成的任務列表
  clearCompleted() {
    this.todoList = filters.active(this.todoList)
  }
}
DOM元素綁定事件，以及v-show:

好了，到這里我們的功能基本就實現了，可以看看效果todolist.html,后面的話我們還可以加路由了解數據庫然后做成云端todolist，還可以上線。

GPU云服務器云服務器云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上阿里云服務器搭建vue項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89725.html

應用vue2+vuex+vue-router+webpack2+es6+express+mysql技

摘要：其實這里還是有漏洞的，坐等高手指出來微笑臉后臺沒有用生成一個完整的架構。來自不同視圖的行為需要變更同一狀態。最近對vue很感興趣，趁閑暇時間，模仿了wunderlist里面的部分功能，編寫了前后端分離的基于vue技術棧和express的todolist小項目。寫這篇博文來總結思考下。項目所在github,可以自行參考克隆。本人博客總體概覽整個項目最終做成的樣子如下： showI...

voidking 2019-08-20 16:09 評論0 收藏0
TodoList：適合初學者的vue+node小項目

摘要：一個簡單的項目，前端由實現，后端由，數據庫采用。路由項目啟動項目進入項目，安裝依賴安裝客戶端依賴安裝服務器端依賴啟動項目啟動服務器啟動客戶端開發模式瀏覽器訪問完整代碼點我，有用的話給個哦，謝謝 TodoList 一個簡單的vue + nodejs項目，前端由vue實現，后端由nodejs(express)，數據庫采用mongodb。 github項目地址在線效果展示 showI...

lovXin 2019-06-26 17:59 評論0 收藏0
vue的TodoMVC事例總結

摘要：縮寫為數據鍵盤事件添加事項指令指令監聽事件。這塊內容只會在指令的表達式返回值的時候被渲染。清空已辦事項全選取消全選方法用于調用數組的每個元素，并將元素傳遞給回調函數。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染數據鍵盤事件：添加事項鼠標點擊事件：移除事項顯示未辦事項數據全部事項、未辦事項、已辦事項狀態切換清除全部完成...

CKJOKER 2019-08-26 10:10 評論0 收藏0
用Vue搭建一個應用盒子（一）：todo-list

摘要：最近在研究的相關知識，最好的學習方法莫過于自己開發一個，這樣帶著問題來學習，進步自然飛速。在首頁里，我們會用寫一個導航，通過的路由導航到不同的應用。我們在文件夾里創建一個新的組件。最近在研究vue的相關知識，最好的學習方法莫過于自己開發一個SPA，這樣帶著問題來學習，進步自然飛速。于是邊查邊寫差不多花了2周寫完了一個todo-list，功能不夠完備，但是麻雀雖小，卻也是五臟俱全，基本...

MAX_zuo 2019-08-26 11:32 評論0 收藏0
簡單抽象工廠

摘要：抽象工廠模式定義抽象工廠模式是指當有多個抽象角色時，使用的一種工廠模式。抽象工廠模式定義：抽象工廠模式是指當有多個抽象角色時，使用的一種工廠模式。抽象工廠模式可以向客戶端提供一個接口，使客戶端在不必指定產品的具體的情況下，創建多個產品族中的產品對象優點： 1.它分離了具體的類 2.它使得易于交換產品系列 3.它有利于產品的一致性缺點：難以支持新種類的產品 showImg...

Tony 2019-08-23 18:00 評論0 收藏0