Vue's TODOMVC use of the detailed

This time to bring you the TODOMVC use of Vue, Vue Todomvc The use of notes, the following is the actual case, together to see.

This example is modeled on the official Website sample style and function in my own way, basically no crossing net source, only refer to custom directives. Let's take a step-by-step approach. Website Demo

Features to implement

1. Single Add Todo

2. Single Delete Todo

3. Double-click Edit Todo

4. A single Todo has completed the corresponding style state change

5. All Todo is completed the corresponding style state changes

6. Clear all completed Todos

7. Todo Todos quantity display

8. All Todos, completed Todos, Todos filter not completed

Single Add Todo

<input type= "text" class= "Todos_add" placeholder= "What needs to is done?" @keyup. Enter= "Addtodo ($event. Target)"// Bind Enter Event ref= "currentinput" >//action INPUT element make input box empty after enter

Data () {////Some initialization information return {  todolists: [],  datastatus: ["All", "Active", "completed"],  datastatusindex:0,< C3/>whichshow:true,  defaultshow:true}},addtodo (e) {//Add todo var val = e.value if (val = = = "") {return}//If the input is empty Immediately return this.todolists = This.todoLists.concat ({//Use Concat this API to add Todo  value:val,//input content  Isediting:false,// Whether to edit the status  isactive:false,//delete the X icon is activated Ischecked:false//is  completed}) this. $refs. Currentinput.value = "" "// Press ENTER to add todo after the input box value clear 0 window.localStorage.setItem ("Content", Json.stringify (this.todolists))// Use Localstorage to store data in JSON format},

The corresponding state of each todo is in the same object, and will not be processed uniformly when the operation changes the TODO state, so that each todo has a separate state.

Single Delete Todo

<li class= "Content_todolist" v-for= "(List,index) in todolists"  @mouseover = "List.isactive = true"// Mouse-over TODO changes the isActive state of the corresponding Todo @mouseleave = "List.isactive=false"//mouse out Todo to change the isActive status corresponding Todo <span class= " El-icon-close content_todolist_delete "  : class=" {show:list.isActive} "//Dynamically bind class to move the mouse to a todo display x icon @click =" Deletetodo (Index) ">//Binding Delete a single Todo event </span></li>

Deletetodo (Index) {//delete a single todo  this.todoLists.splice (index, 1)//Use Splice API  Window.localStorage.setItem ( "Content", Json.stringify (todolists))//store data in JSON format//localstorage

Each Li element is bound with mouse-over and remove events to dynamically change the isactive of each TODO, and then use IsActive to dynamically display class.

Double-click Edit todo&& Single Todo completed

<input type= "checkbox" class= "checkbox" v-model= "list.ischecked" >//two-way binding ischecked<p class= "Content_ Todolist_main "@dblclick =" Toedit (list) "//double-click event v-show="!list.isediting "//Toggle element: class=" {deleted:list.isChecked} " >//Dynamic Binding class The table has finished Todo style {{list.value}}</p><input type= "text" class= "Content_todolist_main main_input" V-model= "List.value"//bidirectional binding can input valuev-show= "list.isediting"//Toggle Element v-todo-focus= "List.value"//Custom directives, Auto Focus Focus @blur= "Unedit (list)" >//Bind blur lose focus event after double click

Methods: {Toedit (obj) {//Make added todothing editable  obj.isediting = true},  Unedit (obj) {//Make added todothing non-editable  Obj.isediting = False},}directives: {//Custom focus instruction requires a binding parameter to determine "Todo-focus": Function (el, binding) {  if (Bindi Ng.value) {   el.focus ()}}  }

Control show and whether two states are editable through the Isediting property in each Todo, and then double-click p to change the current Todo's isediting to true, showing that Input,input loses focus and then changes to False by Blur event.

Change the style dynamically by using Todo's idchecked to control whether it is done.

All Todos completed

<span class= "Icon-down el-icon-arrow-down"//Use element library as down arrow iconv-show= "todolists.length>0"// Control whether the down arrow is displayed by Todolists icon@click= "Selectalltodos" ></span>//All completed events

Selectalltodos () {//Set all Todo as completed, use map's API to manipulate the IsChecked property of Todo this.todoLists.map (todo = todo.ischecked = Todo.ischecked? False:true)}

Todo Todos quantity display

<p class= "Data_times" v-show= "times = = 0" >//times for 0 Show item, greater than 0 show items, details doomed success <span>{{times}}</span >&NBSP Item left</p><p class= "Data_times" v-show= "Times > 0" ><span>{{times}}</span >&NBSP Items left</p>

Computed: {times () {//Use computed properties to calculate the number of Todos to be run   = Todoarr = This.todolists Let's  = 0 for  (let i = 0; i < T Odoarr.length; i++) {   if (todoarr[i].ischecked = = = False) {    times++   }} return times  }},

Computed attributes are used to calculate the todolists, and a for loop brush is used to select the sum of idchecked as true, and finally to return to times.

Clear all completed Todos

<p class= "Data_cleartodos" @click = "Cleartodos" v-show= "Times < Todolists.length" >// Show "Clear completed" <a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "if the number of events to be todolists is less than the total length External nofollow "rel=" external nofollow "rel=" external nofollow "rel=" external nofollow ">clear completed</a ></p><p class= "Data_cleartodos" @click = "Cleartodos" v-show= "times = = Todolists.length" >// Show "Clear completed" <a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "if the number of todolists is equal to the total length of the event External nofollow "rel=" external nofollow "rel=" external nofollow "rel=" External nofollow "></a></p>

Cleartodos () {//emptying completed todolists, filtering using filter's API this.todolists = this.todoLists.filter (Todo = todo.ischecked = = =) False) Window.localStorage.setItem ("Content", Json.stringify (this.todolists))//store data in JSON format},

If the times of the Todos are smaller than the todolists length, it proves that there is a completed Todo, which shows "clear completed", and if it is equal it means that there are no completed todo.

Three status filters

All Todos, completed Todos, Todos filter not completed

<li class= "content_todolist" v-show= "Defaultshow | | (whichshow?list.ischecked:!list.ischecked) "><p 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}"//Dynamic Class implementation Tab Toggle V-for= "(item, index) in Datastatus" v-for loop @click = " Switchstatus (Index) "//Toggle different tab display content: key=" index ">  {{item}} </a></p>

Switchstatus (Index) {//The operation is judged by the IF condition This.datastatusindex = Index if (this.datastatus[index] = = = "Active") {  This.defaultshow = False  This.whichshow = false} else if (this.datastatus[index] = = = "Completed") {  This.default Show = False  This.whichshow = true} else if (this.datastatus[index] = = = "All") {  this.defaultshow = true}},

I am here at the same time if conditional sentence judgment operation, a bit troublesome, currently did not want to come out of other programs. The LI element uses the ternary operator and OR operator to display todos of different states.

Full code

<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-inpu  T-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> <p id= "app" > 
Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

ANGULAR2 Parent-Child component communication mode

JavaScript code optimization in detail