Morioh
Login
Jack Downson

Jack Downson

3 years ago

Todomvc-vue Project Summary

todomvc-vue project summary

1. Project initialization

1. Download the template

Execute in the directory where the project is stored:

git clone  https://github.com/tastejs/todomvc-app-template.git

2. Installation dependencies

Enter the project directory

cd todomvc-vue

Install dependencies in the project directory

yarn

3. Introduce vue

Install vue

yarn add vue

In index.htmlintroducing the vue

<script src="node_modules/vue/dist/vue.js"></script>

In the app.jscreation vue object

( function  ( Vue )  { 
    new  Vue ( { 
        el : "#todoapp" , 
    } ) 
} ) ( Vue )

And index.htmlmount it to the DOM element in ( #todoapp)

<section class="todoapp" id="todoapp">...</section>

After completing the above operations, open it with a browser index.html. If the interface is as follows, the project initialization is successful .

2. Function realization and thinking

1. List data rendering

  • Creating data and add Vue instance of dataan object
let  todos  =  [ 
    // First write two fake data to test it 
    {  id : 1 ,  content : "Ababa" ,  completed : true  } , 
    {  id : 2 ,  content : "Macamaca" ,  completed : false  } 
]

 new  Vue ( {
    ...
    data  ( )  { 
      return  { 
        all : all 
      } 
    } , 
  } )
  • When there is no data
  • .mainAnd .footerhide: v-ifconditions rendering
<section class="main" v-if="todos.length">...</section>

<section class="footer" v-if="todos.length">...</section>

  • Thoughts : Why is used here v-ifinstead of v-showit? What is their difference?

  • In common : their functions are conditions rendered .

  • Different points : v-showthe principle is to modify cssthe display attributes, and no operating domelements.

  • v-ifThe principle is based on conditions, dynamically add or destroy domelements. But v-ifalso inert

  • If the initial conditions false, do nothing, wait until the conditions for truethe re-start rendering.

  • Therefore , v-ifthere is a higher switching overhead, but v-showthere is a higher initial rendering overhead. If you need to switch frequently, it is recommended v-show. If you don’t need to switch frequently, you can use it v-if. And here .mainand .footerdoes not frequently switch state, use v-if.

  • ​

  • When there is data

  • Dynamic rendering data list: v-forlist rendering

  • Bind the class in the corresponding state: :classclass binding

  • Checkbox selected state switch: v-modeltwo-way data binding

  • Label content rendering: Mustachesyntax

<ul class="todo-list">
        <li v-for="(item,index) in todos"
            :key="item.id"
            :class="{completed:item.completed}">
          <div class="view">
            <input class="toggle"
                   type="checkbox"
                   v-model="item.completed">
            <label>{{ item.content }}</label>
            <button class="destroy"></button>
          </div>
          <input class="edit" value="Create a TodoMVC template">
        </li>
</ul>
  • Thinking :
  1. Why use v-forhave to use :key?
  2. Vue update use v-forwhen rendering the list of elements, will use a place multiplexing strategy, try as much as possible in-place modification / reuse the same type elements. And :keyit gives each node a unique identifier , so that the algorithm correctly identified Diff virtual nodes in the DOM, so reuse and reorder existing elements, and thus more efficiently update the virtual DOM .
  3. v-model The principle?
  4. v-model Two-way binding for form data is essentially syntactic sugar.
  5. It does two operations behind it:
  6. v-bindBind a value attribute v-onto bind the input event to the current element.
<input v-model="something"></input>
The above operation is equivalent to
< input  :value =" something " @input =" something = $event.target.value " > </ input > 
First bind a something attribute, and pass it through the event by monitoring the input event when the user changes the input box data The target in the incoming event object finds the event source, and value represents the value of the event source, thereby achieving the effect of two-way data binding.

2. Add a new todo

  • Press Enter, the input is not empty, add one todo :

  • @keyup.enterEnter the keyboard and monitor events of vue methods add the appropriate method

  • Creating newTodoa data object, data acquisition, data model and todosthe same

  • With pushthe newTodoaddition of todothe

  • Do nothing if the content is empty

  • After adding, the content of the input box is cleared

<input class="new-todo"
       placeholder="What needs to be done?"
       autofocus
       @keyup.enter="addTodo">
</input>
methods: { 
      addTodo  ( $event )  { 
        // Create newTodo object and get data 
        const  newTodo  =  { 
          id : this . todos . length  +  1 , 
          content : $event . target . value . trim ( ) , 
          completed : false 
        } 
        // If the content is empty, do nothing 
        IF  ( ! newTodo . content . length )  return
        // If the content is not empty, add newTodo to todos 
        this . Todos . Push ( newTodo ) 
        console . Log ( todos ) 
        // Clear the content of the input box 
        $event . Target . Value  =  '' 
      } 
    }

3. Delete todo

  • Click .destroyto delete where todo:

  • @clickMonitoring button click event and the vue methods add the appropriate method

  • An array of splicemethods to removetodo

 <button class="destroy" @click="destroyTodo(index)"></button>
methods: {
      ...
      destroyTodo  ( index )  { 
        // Use the splice method to find the todo to be deleted through the parameter index, and delete an item of 
        this.todos.splice(index, 1)
      }
}

​

4. Edit todo

  • Double click labelto enter edit mode

  • @dblclick Monitor labeldouble-click event

  • :classWhere to libind the class.editing

  • This sets an intermediate variable currentEditing(like the one state), when listening to labelyou double-click an event, currentEditing = itemand when item === currentEditing, the where give libinding class

<li v-for="(item,index) in todos" :key="item.id"
    :class="{ completed: item.completed , editing: item === currentEditing }">
</li>
<label @dblclick="currentEditing = item">{{ item.content }}</label>
  • Local custom instruction directivesallows automatic input box acquired focus
<input class="edit" 
       :value="item.content"
       v-editing-focus="item === currentEditing">
</input>

  directives: { 
    // update is called when the VNode (virtual node) of all components is updated, but it may happen before its child VNode is updated. 
  	update ( el , binding ) { 
      // el: used to manipulate the element DOM 
      // binding.value: the binding value of the instruction here is item === currentEditing 
  		if ( binding . value ) { 
  			el . focus ( ) 
  		} 
  	} 
  }
  • After typing the transport or out of focus, the original todocontent to replace the content of the input
  • @keyup.enterMonitor keyboard enter event; @blurmonitor defocus event
<input class="edit"
       :value="item.content"
       v-editing-focus="item === currentEditing"
       @keyup.enter="saveEditing(item,index,$event)"        		 	                      @blur="saveEditing(item,index,$event)">
  • In the vue methods add the appropriate method
saveEditing (item, index, $event) { 
        // Save the entered content to the newContent variable 
        const  newContent  =  $event . Target . Value . Trim ( ) 
        // delete todo 
        if the  content is empty if ( ! NewContent )  this . DestroyTodo ( index ) 
        // change the original content Replace with the entered content 
        item . content  =  newContent 
        //By setting currentEditing, remove .editing and exit the editing mode. 
        this . currentEditing  =  null 
      }
  • :valueTo inputbind content
<input class="toggle"
       type="checkbox"
       v-model="item.completed"
       :value="item.content">
  • Press esc to exit the editing mode
  • @keyup.escEnter the keyboard and monitor events of vue methods add the appropriate method
<input class="edit"
       :value="item.content"
       v-editing-focus="item === currentEditing"
       @keyup.enter="saveEditing(item,index,$event)"        		 	                      @blur="saveEditing(item,index,$event)"
       @keyup.esc="quitEditing">
quitEditing () { 
        // removed off by setting currentEditing .editing exit the edit mode 
        the this . CurrentEditing  =  null 
      }

5. State switching

6. Count

7. Clear all completed items

8. Three state data filtering

9. Data Persistence

Download Details:

Author: Nicklaus6

Source Code: https://github.com/Nicklaus6/todomvc-vue

#vuejs #vue #javascript

Todomvc-vue Project Summary
3.05 GEEK