Vue_簡(jiǎn)單項(xiàng)目todolist

Richard_Gao 發(fā)布于2019-08-21 17:35 / 2076人閱讀

摘要：強(qiáng)大的漸進(jìn)式渲染引擎使得我們?cè)絹?lái)越不需要手動(dòng)控制數(shù)據(jù)的變化，那么下面我們來(lái)看一看。上面所有的依賴(lài)在下面引入就可以了。

Vue強(qiáng)大的漸進(jìn)式渲染引擎使得我們?cè)絹?lái)越不需要手動(dòng)控制數(shù)據(jù)的變化，那么下面我們來(lái)看一看。如何用Vue寫(xiě)一個(gè)todolist。

開(kāi)始

首先，創(chuàng)建一個(gè)文件夾，用命令行初始化
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對(duì)數(shù)組進(jìn)行操作。
上面所有的依賴(lài)在下面引入就可以了。

新建實(shí)例

新建vue的實(shí)例
寫(xiě)一個(gè)默認(rèn)的任務(wù)：todoList: [{}]



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

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

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

保存的方法
methods: {
  ...
  // 保存任務(wù)，因?yàn)槭莿?dòng)態(tài)綁定的，不需要再保存，只需要把input框隱藏即可
  saveTodo(todo) {
    this.editingIndex = -1
    if (todo.text.trim().length < 1) {
      this.deleteTodo(todo)
    }
  }
}
未完成的數(shù)量
computed: {
  ....
  // 未完成的任務(wù)數(shù)量
  activeCount() {
    return this.todoList.filter(item => {
      return !item.checked
    }).length;
  }
}
數(shù)據(jù)持久化到本地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

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

實(shí)現(xiàn)過(guò)濾所有，已完成，未完成的功能
在實(shí)例化Vue對(duì)象外面放一個(gè)普通的過(guò)濾對(duì)象：
// 一個(gè)普通的過(guò)濾的對(duì)象, 用來(lái)過(guò)濾任務(wù)列表
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;
    });
  }
};
添加一個(gè)屬性visibility 來(lái)表示我們要顯示所有，還是顯示未完成，或已完成
data: {
  visibility: "all",
}
修改一下未完成的數(shù)量這個(gè)計(jì)算屬性，使用上面的filters對(duì)象去過(guò)濾
computed: {
   // 未完成的任務(wù)數(shù)量
  activeCount() {
    return filters.active(this.todoList).length;
  },
}
添加任務(wù)過(guò)濾的計(jì)算屬性：
computed: {
  // 過(guò)濾任務(wù)列表
  filteredTodoList: function () {
    return filters[this.visibility](this.todoList);
  }
}
在DOM當(dāng)中添加點(diǎn)擊事件，點(diǎn)擊的時(shí)候修改visiblity屬性即可
  所有
  未完成
  已完成
列表渲染的循環(huán)語(yǔ)句修改：

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

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