<input type="text" class="todos_add" placeholder="What needs to be done?" 
@keyup.enter="addTodo($event.target)" //綁定enter事件
ref="currentInput">//操作input元素使enter一下之后清空輸入框內容

data() {//一些初始化數據
 return {
 todolists: [],
 dataStatus: ["All", "Active", "Completed"],
 dataStatusIndex: 0,
 whichShow: true,
 defaultShow: true
 }
},
addTodo(e) { //添加todo
 var val = e.value
 if (val === "") {return} //如果輸入內容為空則立即返回
 this.todoLists = this.todoLists.concat({//使用concat這個api添加todo
 value: val, //輸入內容
 isEditing: false, //是否在編輯狀態
 isActive: false, //刪除X圖標是否激活
 isChecked: false //是否已完成
 })
 this.$refs.currentInput.value = "" //按下enter添加todo之后把輸入框value清零
 window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存儲數據
},

 <li class="content_todoList"
 v-for="(list,index) in todoLists" 
 @mouseover="list.isActive = true" //鼠標移入todo改變對應todo的isActive狀態
 @mouseleave="list.isActive=false" //鼠標移出todo改變對應todo的isActive狀態
 <span class="el-icon-close content_todoList_delete" 
 :class="{show: list.isActive}" //動態綁定class使鼠標移動到某一todo顯示X圖標
 @click="deleteTodo(index)"> //綁定刪除單條todo事件
 </span>
</li>

deleteTodo(index) { //刪除單條todo
 this.todoLists.splice(index, 1)//使用splice的api
 window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存儲數據//localStorage存儲數據
},

<input type="checkbox" class="checkBox" 
v-model="list.isChecked">//雙向綁定isChecked

<div class="content_todoList_main" 
@dblclick="toEdit(list)" //雙擊事件
v-show="!list.isEditing" //切換元素
:class="{deleted:list.isChecked}"> //動態綁定class該表已完成todo樣式
{{list.value}}
</div>

<input type="text" class="content_todoList_main main_input" 
v-model="list.value" //雙向綁定可輸入value
v-show="list.isEditing" //切換元素
v-todo-focus="list.value" //自定義指令，雙擊之后自動focus對焦
@blur="unEdit(list)"> //綁定blur失去焦點事件

methods: {
 toEdit(obj) { //使添加的todothing可編輯
 obj.isEditing = true
 },
 
 unEdit(obj) { //使添加的todothing不可編輯
 obj.isEditing = false
 },
}

directives: { //自定義focus指令,需要一個binding參數做判斷
 "todo-focus": function (el, binding) {
 if (binding.value) {
 el.focus()
 }
 }
}

<span 
class="icon-down el-icon-arrow-down" //使用element庫做向下箭頭icon
v-show="todoLists.length>0" //通過todoLists控制是否顯示向下箭頭icon
@click="selectAllTodos"></span> //全部已完成事件

selectAllTodos() { //設置所有todo為已完成,使用map的api通過todo的isChecked屬性操作
 this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}

<div class="data_times" v-show="times === 0"> //times為0顯示item，大于0顯示items，細節注定成敗
 <span>{{times}}</span>  item left
</div>
<div class="data_times" v-show="times > 0">
<span>{{times}}</span>  items left</div>

computed: {
 times() { //使用計算屬性計算待辦todos的次數 
 let todoArr = this.todoLists
 let times = 0
 for (let i = 0; i < todoArr.length; i++) {
 if (todoArr[i].isChecked === false) {
 times++
 }
 }
 return times
 }
},

<div class="data_clearTodos" 
@click="clearTodos" 
v-show="times < todoLists.length"> //如果待辦事件次數小于總todoLists長度就顯示“clear completed”
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
</div>

<div class="data_clearTodos" 
@click="clearTodos" 
v-show="times === todoLists.length"> //如果待辦事件次數等于總todoLists長度就顯示“clear completed”
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
</div>

clearTodos() { //清空已完成的todoLists，使用filter的api進行篩選
 this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
 window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存儲數據
},

<li class="content_todoList" 
v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">

<div class="data_status">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
 :class="{active: index === dataStatusIndex}" //動態class實現tab切換
 v-for="(item ,index) in dataStatus" v-for循環
 @click="switchStatus(index)" //切換不同tab顯示內容
 :key="index">
 {{item}}
 </a>
</div>

switchStatus(index) { //通過if條件判斷操作
 this.dataStatusIndex = index
 if (this.dataStatus[index] === "Active") {
 this.defaultShow = false
 this.whichShow = false
 } else if (this.dataStatus[index] === "Completed") {
 this.defaultShow = false
 this.whichShow = true
 } else if (this.dataStatus[index] === "All") {
 this.defaultShow = true
 }
},

<style>
 * {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 }

 input {
 outline: none;
 }

 ul,
 li,
 ol {
 list-style: none;
 }

 #app {
 width: 800px;
 height: 900px;
 margin: 0 auto;
 text-align: center;
 background-color: rgb(245, 245, 245);
 padding: 24px 0;
 }

 #app .header {
 font-size: 48px;
 }

 .content {
 width: 72%;
 margin: 0 auto;
 box-shadow: 0 3px 3px 2px rgba(0, 0, 0, 0.25);
 position: relative;
 }

 .icon-down {
 position: absolute;
 font-size: 24px;
 top: 16px;
 left: 16px;
 cursor: pointer;
 }

 #app .content .todos_add {
 width: 100%;
 height: 56px;
 padding: 16px 56px;
 font-size: 24px;
 border: 1px solid transparent;
 }

 .content_todoLists {
 position: relative;
 z-index: 3;
 }

 .content_todoList {
 display: flex;
 flex-direction: row;
 border-top: 1px solid #ccc;
 font-size: 24px;
 padding: 8px;
 background-color: white;
 align-items: center;
 }

 .checkBox {
 width: 20px;
 height: 20px;
 margin-left: 10px;
 }

 .content_todoList_main {
 flex: 1;
 text-align: left;
 margin-left: 16px;
 font-size: 20px;
 padding: 6px 0;
 }

 .main_input {
 position: relative;
 z-index: 1;
 }

 .content_todoList_delete {
 position: absolute;
 right: 16px;
 color: rgb(252, 55, 55);
 font-weight: 500;
 display: none;
 cursor: pointer;
 }

 .show {
 display: block;
 }

 .deleted {
 text-decoration-line: line-through;
 color: #bbb;
 }

 .show:hover {
 color: rgb(255, 0, 0);
 font-weight: 700;
 }

 ::-moz-placeholder {
 color: rgb(221, 218, 218);
 }

 ::-webkit-input-placeholder {
 color: rgb(221, 218, 218);
 }

 :-ms-input-placeholder {
 color: rgb(221, 218, 218);
 }

 .data {
 display: flex;
 justify-content: space-between;
 padding: 8px;
 font-size: 14px;
 font-weight: 300;
 color: rgb(145, 145, 145);
 }

 a {
 text-decoration: none;
 color: rgb(145, 145, 145);
 }

 .data_times {
 width: 73px;
 }

 .data_clearTodos {
 width: 142px;
 }

 .data_status a {
 display: inline-block;
 border: 1px solid transparent;
 border-radius: 2px;
 padding: 1px 4px;
 margin: 0 2px;
 }

 .data_status a:hover {
 border-color: #bbb;
 }

 .data_clearTodos a:hover {
 text-decoration-line: underline;
 }

 .active {
 box-shadow: 0 0 1px black;
 }
</style>

<body>
 <div id="app">
 <header class="header">todos</header>
 <div class="content">
 <span class="icon-down el-icon-arrow-down" 
 v-show="todoLists.length>0" 
 @click="selectAllTodos">
 </span>
 <input type="text" class="todos_add" placeholder="What needs to be done?" 
 @keyup.enter="addTodo($event.target)" 
 ref="currentInput">
 <ul class="content_todoLists">
 <li v-for="(list,index) in todoLists" class="content_todoList" 
 @mouseover="list.isActive = true" 
 @mouseleave="list.isActive=false"
 v-show="defaultShow || (whichShow?list.isChecked:!list.isChecked)">
 <input type="checkbox" class="checkBox" v-model="list.isChecked">
 <div class="content_todoList_main" @dblclick="toEdit(list)" v-show="!list.isEditing" :class="{deleted:list.isChecked}">
 {{list.value}}
 </div>
 <input type="text" class="content_todoList_main main_input" 
 v-model="list.value" 
 v-show="list.isEditing" 
 v-todo-focus="list.value"
 @blur="unEdit(list)">
 <span class="el-icon-close content_todoList_delete" :class="{show: list.isActive}" @click="deleteTodo(index)"></span>
 </li>
 </ul>
 <div class="data" v-show="todoLists.length>0">
 <div class="data_times" v-show="times === 0">
 <span>{{times}}</span> item left
 </div>
 <div class="data_times" v-show="times > 0">
 <span>{{times}}</span> items left
 </div>
 <div class="data_status">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" :class="{active:index === dataStatusIndex}" v-for="(item,index) in dataStatus" @click="switchStatus(index)" :key="index">
 {{item}}
 </a>
 </div>
 <div class="data_clearTodos" @click="clearTodos" v-show="times < todoLists.length">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >clear completed</a>
 </div>
 <div class="data_clearTodos" @click="clearTodos" v-show="times === todoLists.length">
 <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
 </div>
 </div>
 </div>
 </div>
</body>
<script>
 let vm = new Vue({
 el: "#app",
 data() {
 return {
 todoLists: [],
 dataStatus: ["All", "Active", "Completed"],
 dataStatusIndex: 0,
 whichShow: true,
 defaultShow: true
 }
 },
 computed: {
 times() { //使用計算屬性計算待辦todos的次數 
 let todoArr = this.todoLists
 let times = 0
 for (let i = 0; i < todoArr.length; i++) {
 if (todoArr[i].isChecked === false) {
 times++
 }
 }
 return times
 }
 },
 methods: {
 toEdit(obj) { //使添加的todo可編輯
 obj.isEditing = true
 },
 unEdit(obj) { //使添加的todo不可編輯
 obj.isEditing = false
 },
 addTodo(e) { //添加todo
 var val = e.value
 if (val === "") {
 return
 } //如果輸入內容為空則立即返回
 this.todoLists = this.todoLists.concat({ //使用concat這個api添加todo
 value: val, //輸入內容
 isEditing: false, //是否在編輯狀態
 isActive: false, //刪除X圖標是否激活
 isChecked: false //是否已完成
 })
 this.$refs.currentInput.value = "" //按下enter添加todo之后把輸入框value清零
 window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //使用localStorage以JSON格式存儲數據
 },
 deleteTodo(index) { //刪除todo
 this.todoLists.splice(index, 1)
 window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲數據
 },
 switchStatus(index) { //試下下方三個狀態切換，略麻煩
 this.dataStatusIndex = index
 if (this.dataStatus[index] === "Active") {
 this.defaultShow = false
 this.whichShow = false
 } else if (this.dataStatus[index] === "Completed") {
 this.defaultShow = false
 this.whichShow = true
 } else if (this.dataStatus[index] === "All") {
 this.defaultShow = true
 }
 },
 clearTodos() { //清空已完成的todoLists
 this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
 window.localStorage.setItem("content", JSON.stringify(this.todoLists)) //以json格式存儲數據
 },
 selectAllTodos() { //設置所有todo為已完成
 this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
 }
 },
 directives: { //自定義focus指令
 "todo-focus": function (el, binding) {
 if (binding.value) {
 el.focus()
 }
 }
 },
 created() {
 let myStorage = window.localStorage.getItem('content')
 this.todoLists = JSON.parse(myStorage) || [] //因為todoLists初始值是null,使用或運算符，如果為null設為空數組
 }
 })
</script>