vue2的todolist怎么用

今天就跟大家聊聊有關vue2的todolist怎么用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

項目用到了vue.js vue.cli webpack ES6 node環境，完成項目后會對這些技術棧有了些了解。

準備開發環境

$ npm install -g vue-cli
$ vue init ，比如 vue init webpack todolist
$ cd todolist
$ npm install
$ npm run dev

1. 安裝谷歌插件vue.js devtools

2. 下載vue.js的webpack模板

3. 下載todomvc的模板 (提供html和css)（也可以直接$ git clone https://github.com/tastejs/todomvc-app-template.git 來下載）

4. 把todomvc的index.html拖到todolist文件夾去覆蓋里面的index.html

5. 打開todomvc的json文件，會看到 “todomvc-app-css”: “^2.0.0”,就是要你 npm install todomvc-app-css -S 從而下載該css

6. 刪點todolsit index.html的默認css，js引用，src文件夾下的main.js引入模板css（import‘todomvc-app-css/index.css'）

7. 引入vue（import Vue form ‘vue'）

8. 等寫完代碼后 $npm run build 一鍵打包構建，會看到dist文件夾
   

main.js的代碼

//后面的為注釋講解， ~表示串聯index.html的對應內容

import 'todomvc-app-css/index.css'
import Vue from 'vue'
//添加localStorage
var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
 fetch: function () {
  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  todos.forEach(function (todo, index) {
   todo.id = index
  })
  todoStorage.uid = todos.length
  return todos
 },
 save: function (todos) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
 }
}
//用過濾器篩選出三種狀態
var filters = {
 all(todos) {
  return todos
 },
 active(todos) {
  return todos.filter((todo) => {
   return !todo.completed
  })
 },
 completed(todos) {
  return todos.filter((todo) => {
   return todo.completed
  })
 },
}
let app = new Vue({
 el: '.todoapp',  // ~ <section class="todoapp">
 data: {
  msg: 'hello world',
  title: '待做清單',  // 渲染標題 ~ {{title}}
  newTodo: '',
   todos: todoStorage.fetch(), // ~ v-show="todos.length" ； ~ {{todos.length>1?'items':'item'}} 渲染 li ~ v-for="(todo,index) in filteredTodos" 
  editedTodo: '',  // 空的編輯對象
  hashName: 'all'  
 },
 
 watch: {
  todos: {
   handler: function (todos) {
    todoStorage.save(todos)
   },
   deep: true
  }
 },
 
 computed: {
  remain() {
   return filters.active(this.todos).length  //未完成事項的數量 ~ {{remain}}
  }, 
  isAll: {   // ~ v-model="isAll"
   get() {
    return this.remain === 0
   },
   set(value) {
    this.todos.forEach((todo) => {
     todo.completed = value
    })
   }
  },
  filteredTodos() {  //用hashName過濾出當前頁面的todos ~ v-for="(todo,index) in filteredTodos" 
   return filters[this.hashName](this.todos)
  }
 },
 methods: {
  addTodo(e) { //輸入值為空時，不添加（trim去除前后空格） ~ v-model.trim="newTodo" 
   if (!this.newTodo) {
    return
   }
   this.todos.push({
    id: todoStorage.uid++,
    content: this.newTodo,
    completed: false //結合v-model 根據completed狀態綁定樣式 ~:class="{completed:todo.completed； ~ v-model="todo.completed"
   })
   this.newTodo = ''
  },
  removeTodo(index) {  //綁定x樣式，點擊刪除該todo ~ @click="removeTodo(index)"
   this.todos.splice(index, 1)
  },
  editTodo(todo) {     //編輯 ~ @dblclick="editTodo(todo)"
   this.editCache = todo.content //儲存編輯前的內容
   this.editedTodo = todo // 點擊編輯里面的內容而不是只是空文本框~ editing:todo==editedTodo}"
  },
  doneEdit(todo, index) { //失去焦點后 ~ @blur="doneEdit(todo)"；@keyup.enter="doneEdit(todo)"
   this.editedTodo = null //不存在編輯了或者說編輯已完成
   if (!todo.content) { //如果編輯后沒有內容了，刪除該todo
    this.removeTodo(index)
   }
  },
  cancelEdit(todo) {  //按esc鍵取消此次編輯操作 ~ @keyup.esc="cancelEdit(todo)">
   this.editedTodo = null   
   todo.content = this.editCache //當esc取消編輯時，還原編輯前的內容
  },
  clear() { //點擊清除已完成的功能 ~ @click="clear"
   this.todos = filters.active(this.todos) //獲取并渲染未完成的事項 ~ 
  }
 },
 directives: {  //自定義屬性 ~ v-focus="todo == editedTodo"
  focus(el, value) { //文本框雙擊獲取焦點
   if (value) {
    el.focus()
   }
  }
 }
})
//hash（url地址中#以及之后的字符）
function hashChange() { 
// ~ :class="{selected:hashName=='all'}"；:class="{selected:hashName=='active'}"；:class="{selected:hashName=='completed'}"
 let hashName = location.hash.replace(/#\/?/, '') //正則表達式去除#/？，獲取如all，active，completed
 if (filters[hashName]) {  //如果過濾狀態的hashName存在
  app.hashName = hashName //給整個app變量里的hashName賦上那個值
 } else {
  location.hash = ''  //取消
  app.hashName = 'all' //否則就賦值‘all'，回到全部事項的頁面
 }
}
window.addEventListener('hashchange', hashChange) //全局監聽hash

看完上述內容，你們對vue2的todolist怎么用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。