摘要：我們都知道，現(xiàn)在的前端開(kāi)發(fā)的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用寫(xiě)的一個(gè)的整個(gè)過(guò)程。

我們都知道，現(xiàn)在Vuejs的前端開(kāi)發(fā)的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用vue寫(xiě)的一個(gè)todolist的整個(gè)過(guò)程。

1.新建一個(gè)文件夾，配置環(huán)境變量

安裝的命令行有：
npm init -y
npm i -S todomvc-app-css underscore vue

2.新建一個(gè)HTML文件，復(fù)制格式化后的代碼段，網(wǎng)址：http://todomvc.com/examples/b...

將代碼段里邊的顯示內(nèi)容修改為中文

3.引入Vuejs css等文件

4.新建一個(gè)vue實(shí)例(框架)

5.實(shí)現(xiàn)的全過(guò)程

向data中的todoList中寫(xiě)入數(shù)據(jù)
data: {
  // 備忘錄數(shù)組
  todoList: [
    // 一個(gè)任務(wù)就是一個(gè)對(duì)象，text表示任務(wù)的名稱(chēng)，checked為true表示已完成，false表示未完成
    {
      text: "學(xué)習(xí)Vue",
      checked: false
    },
    {
      text: "學(xué)習(xí)React",
      checked: false
    }
  ]
},

6.給li元素加上v-for指令，代碼如下:

7.中顯示輸入的任務(wù)，代碼如下：

{{ todo.text }}

8.修改任務(wù)的checked值為true

{
  text: "學(xué)習(xí)React",
  checked: true
},

9.給li元素動(dòng)態(tài)綁定class,completed樣式的值，根據(jù)todo.checked, 如果todo.checked為 true時(shí)則有completed樣式，否則無(wú)completed的樣式

10.給checkbox加上v-model，值為todo.checked, checked屬性會(huì)自動(dòng)和todo.checked關(guān)聯(lián)

11.在data中新建任務(wù)

data: {
  // 新的備忘錄
  newTodo: "",
}

12.input元素綁定，回車(chē)事件和自動(dòng)除去前后空格的任務(wù)的添加

// 添加任務(wù)的方法,在methods中添加
addTodo() {
  // 去除前后的空格
  this.newTodo = this.newTodo.trim();
  //內(nèi)容為空
  if (this.newTodo.length < 1) {
    return;
  }
  // 新建的任務(wù)添加到數(shù)組,默認(rèn)狀態(tài)為未完成
  this.todoList.unshift({
    text: this.newTodo,
    checked: false
  });
  // 回車(chē)后清空輸入框的內(nèi)容
  this.newTodo = ""
}

13.添加一個(gè)計(jì)算屬性，判斷是否顯示任務(wù)列表

// 顯示列表，如果有任務(wù)，則任務(wù)列表大于1，顯示，如果沒(méi)有任務(wù)則不顯示
computed: {
  showList() {
    return this.todoList.length > 0;
  }
}

14.添加v-show:指令到section和footer

15.綁定刪除任務(wù)事件

引入underscore

16.刪除任務(wù)方法寫(xiě)在methods中

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

17.任務(wù)建立之后想要在任務(wù)上修改的方法

進(jìn)入編輯模式
添加一個(gè)數(shù)據(jù)項(xiàng)：
data: {
  // 正在編輯的任務(wù)索引
  editingIndex: -1,
}
綁定雙擊事件：
{{ todo.text }}
方法
methods: {
  // 編輯任務(wù)
  editTodo(index) {
    // 設(shè)置一下當(dāng)前正在編輯的索引
    this.editingIndex = index;
  }
}

18.在li中加上class

自定義指令,（寫(xiě)在script中）：
// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive("focus", {
  // 當(dāng)綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  },
  update(el) {
      el.focus();
  }
})

19.使用自定義指令

添加保存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)
    }
  }
}

20.未完成的數(shù)量

computed: {
  // 未完成的任務(wù)數(shù)量
  activeCount() {
    return this.todoList.filter(item => {
      return !item.checked
    }).length;
  }
}

21.數(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

在data中修改初始化數(shù)據(jù)：
data: {
  todoList: todoStorage.fetch()
}

22.在Vue實(shí)例中添加一個(gè)屬性變化觀(guān)察，全局

// 觀(guān)察屬性變化
watch: {
  todoList: {
    deep: true,
    handler: todoStorage.save
  }
},

23.全部完成功能的添加

添加計(jì)算屬性：
computed: {
  // 是否所有任務(wù)都完成
  allDone: {
    get() {
      // 未完成的數(shù)量為0表示全部完成,全部完成返回true
      return this.activeCount === 0;
    },
    set(value) {
      this.todoList.forEach(todo => {
        todo.checked = value
      });
    }
  }
}
使用v-model綁定全部完成功能：

24.實(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;
  },
}

25添加任務(wù)過(guò)濾的計(jì)算屬性：

computed: {
  ...
  // 過(guò)濾任務(wù)列表
  filteredTodoList: function () {
    return filters[this.visibility](this.todoList);
  }
}

在DOM當(dāng)中添加點(diǎn)擊事件，點(diǎn)擊的時(shí)候修改visiblity屬性即可

  所有


  未完成


  已完成

26、列表渲染的循環(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,
  ...
}

27.點(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)
  }
}

28、DOM元素綁定事件，以及v-show:

清空已完成

以上就是整理的所有內(nèi)容，有寫(xiě)的不好的或者錯(cuò)誤的，請(qǐng)及時(shí)告訴我改正