摘要：我們都知道，現在的前端開發的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用寫的一個的整個過程。

我們都知道，現在Vuejs的前端開發的最火的三大框架之一，它極大地方便了我們的前端工作者的工作，這是筆者整理的一份用vue寫的一個todolist的整個過程。

1.新建一個文件夾，配置環境變量

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

2.新建一個HTML文件，復制格式化后的代碼段，網址：http://todomvc.com/examples/b...

將代碼段里邊的顯示內容修改為中文

3.引入Vuejs css等文件

4.新建一個vue實例(框架)

5.實現的全過程

向data中的todoList中寫入數據
data: {
  // 備忘錄數組
  todoList: [
    // 一個任務就是一個對象，text表示任務的名稱，checked為true表示已完成，false表示未完成
    {
      text: "學習Vue",
      checked: false
    },
    {
      text: "學習React",
      checked: false
    }
  ]
},

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

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

{{ todo.text }}

8.修改任務的checked值為true

{
  text: "學習React",
  checked: true
},

9.給li元素動態綁定class,completed樣式的值，根據todo.checked, 如果todo.checked為 true時則有completed樣式，否則無completed的樣式

10.給checkbox加上v-model，值為todo.checked, checked屬性會自動和todo.checked關聯

11.在data中新建任務

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

12.input元素綁定，回車事件和自動除去前后空格的任務的添加

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

13.添加一個計算屬性，判斷是否顯示任務列表

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

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

15.綁定刪除任務事件

引入underscore

16.刪除任務方法寫在methods中

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

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

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

18.在li中加上class

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

19.使用自定義指令

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

保存的方法
methods: {
  ...
  // 保存任務，因為是動態綁定的，不需要再保存，只需要把input框隱藏即可
  saveTodo(todo) {
    this.editingIndex = -1
    if (todo.text.trim().length < 1) {
      this.deleteTodo(todo)
    }
  }
}

20.未完成的數量

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

21.數據保存到本地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中修改初始化數據：
data: {
  todoList: todoStorage.fetch()
}

22.在Vue實例中添加一個屬性變化觀察，全局

// 觀察屬性變化
watch: {
  todoList: {
    deep: true,
    handler: todoStorage.save
  }
},

23.全部完成功能的添加

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

24.實現過濾所有，已完成，未完成的功能

在實例化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;
  },
}

25添加任務過濾的計算屬性：

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

在DOM當中添加點擊事件，點擊的時候修改visiblity屬性即可

  所有


  未完成


  已完成

26、列表渲染的循環語句修改：

添加一個變量，得到hash值：
var visibility = location.hash.substr(location.hash.indexOf("/")+1);
visibility = visibility === "" ? "all" : visibility
設置visibility屬性的值為當前的這個變量：
data: {
  visibility: visibility,
  ...
}

27.點擊清空已完成功能：

添加一個已完成的任務數量計算屬性：
computed: {
  ...
  // 已完成的任務數量
  completedCount() {
    return filters.completed(this.todoList).length;
  }
}

添加一個清空已完成的方法：
methods: {
  ...
  // 清空已完成的任務列表
  clearCompleted() {
    this.todoList = filters.active(this.todoList)
  }
}

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

清空已完成

以上就是整理的所有內容，有寫的不好的或者錯誤的，請及時告訴我改正