Todomvc.com/

The preparatory work

  1. In the project directoryRight click, the choice ofOpen in the integration terminal:

  1. Clone the project template from Github.
git clone https://github.com/tastejs/todomvc-app-template.git
Copy the code

First, make sure you have Git installed on your computer. For git installation, see juejin.cn/post/700549…

After the installation is complete, the following structure appears:

  1. Go to the project directory and install the project dependencies
CD Project directory NPM installCopy the code

  1. Install the Vue. Js
npm install vue
Copy the code

After the installation, here is the vUE:

Demand analysis

  1. Item list presentation

• Matters

• No event

  1. Status bar Display

• Number display

• Unit processing

  1. Item Status switch

• Switching a single event

• Switch multiple items

  1. The matters of new

• Content detection

• Enter new

  1. Items to delete

• Delete a single event

• Completed items are deleted

  1. Item editor

• Trigger editing

• Unedit

• Save the edit

  1. Item screening

• Click to switch display categories

• Updated rendering of all items

  1. Transaction data persistence

• Read local storage

• Update local storage

Function implementation

In the template, the file in which we write js is app.js, and the page in which we write the home HTML is index.html

Structure display:

Item list presentation

• Import vue. Js file, create vue instance to set mount element, bind EL to #app.

• Set toDOS in data to store initial data

new Vue({
		el:"#app".data: {
			// todos is used to summarize all item information
			todos: [{id: 1.title: "Instance Content 1".completed: true},
				{id: 2.title: "Example Content 2".completed: true},
				{id: 3.title: "Example Content 3".completed: false},
				{id: 4.title: "Example Content 4".completed: true},]}})Copy the code

Set the event view in Main:

  • Write a

      and then use v-for to determine how many

    • will be generated.

  • Bind a unique ID with :key

  • :class can bind objects. In templates, class=”complated” indicates that something has been done.

  • The represents the check box in front of the power content, and we can use the V-Model to bind the selected state of the event. The selected states of individual checkboxes are represented by booleans, so we can use todo.completed here to achieve bidirectional binding of data.

Set the display state when there are no items:

  • The event body section main and the following status bar footer should be set to show whether or not the event is displayed.

  • V-show is suitable for scenarios with frequent state changes.

  • When todos has no events, todos.length is 0, which can be implicitly converted to false, and is then hidden.

Display status bar information

The functions to be implemented are as follows:

• Number display

• Unit processing

Number display:

Two ways:

  • The calculation attribute is used because: If the number of selected items does not change, the previous cache can be used to improve efficiency.

  • The evaluated property must have a return value, so use return! todo.completed; Todo.com pleted = false is available.

  • The idea is to iterate through toDOS, get its Completed property for each incoming TODO, return the item if it is false, and finally use the length method to get the length of all returned items, which is the number.

Finally, call the property name of the calculated property in the response.

<span class="todo-count"><strong>{{ remaining }}</strong> item left</span>
Copy the code

Unit processing:

When called from a view:

<span class="todo-count"><strong>{{ remaining }}</strong> {{ pluralize() }} left</span>
Copy the code

or

<span class="todo-count"><strong>{{ remaining }}</strong> {{ pluralize('item') }} left</span>
Copy the code

Note that parentheses are used in the following sections, otherwise there will be problems.

Note The parameter must be enclosed in quotation marks; otherwise, the parameter will be undefined

Item Status switch

Click on the items below to complete the selection

If the number of remaining items is 0, it is selected.

Click All to select all items

After v-Model is set, the active operation of toggle-all is equivalent to setting allDone data, and setters for allDone need to be set for processing.

  • Value is the state of toggle-all, selected or unselected.

The matters of new

The functions to be implemented are as follows:

• Input box content binding

• Enter new items

Input box content binding

Set newTodo in data to store data and bind it to the new input box.

<input class="new-todo" placeholder="What needs to be done?" autofocus v-model="newTodo">
Copy the code

Enter New items

When entering the box enter, detect the content, and add items to TODOS according to the input content.

Add the following methods to methods:

  • I’m just doing a little bit of id processing here, so I don’t have to be able to guarantee that I don’t repeat it at all. If no repetition is required, you can use random numbers or timestamps.

  • If is used to determine whether the data is null

  • this.newTodo = “”; To clear out the contents of the input field

In the View section add:

  • Trim =”newTodo”; trim.. trim mouse modifier is used to automatically filter Spaces at the beginning and end of user input.

  • Add a carriage return event and bind the addTodo method.

<input class="new-todo" placeholder="What needs to be done?" 
autofocus v-model.trim="newTodo" @keyup.enter="addTodo">
Copy the code

Improvements to improve efficiency

Trim =”newTodo” if v-model.trim=”newTodo”, then trim will be called every time you type in the input field (before you hit Enter). In fact, you only need to trim the first and last Spaces when you press Enter to add data. So you can move the trim method inside the addTodo method:

<input class="new-todo" placeholder="What needs to be done?" 
autofocus v-model="newTodo" @keyup.enter="addTodo">
Copy the code

Items to delete

The functions to be implemented are as follows:

• Delete a single event

• Completed items are deleted

Single item deletion

When the Delete button in a single item is clicked, the corresponding object data in toDOS is deleted.

<button class="destroy" @click="reomoveTodo(todo)"></button>
Copy the code

Completed items are deleted

  1. The need for the Completed items button is displayed when there are completed items.
  • todos.length > remainingThe value is displayed only when the total number of items is greater than the number of remaining items. For example, if there are 5 items and 2 items are left, 3 items have been completed.
<! -- Hidden if no completed items are left ↓ -->
<button class="clear-completed" v-show=" todos.length > remaining">Clear completed</button>
Copy the code
  1. After the operation, only unfinished items are left in the item list.
  • filterThe return value of the method is an array containing all the elements that match the condition. It returns all of themcompletedProperties forfalseElement, which is reassigned tothis.todos.

  1. Add a click event to the relevant button:@click="removeCompleted"
<button class="clear-completed" v-show=" todos.length > remaining" 
@click="removeCompleted">Clear completed</button>
Copy the code

Item editor

The functions to be implemented are as follows:

• Trigger edit (double click)

• Unedit (click ESC)

• Save the edit (Enter/Lose focus)

Trigger edit (double click)

Double-click to record the toDO being edited and save the original TODO content.

  • EditingTodo records the contents of the toDO being edited, and because the data is bidirectionally bound, you will see it updated in the debug panel as the input edits retrieved change.

  • Todo. title retrieves the title before it was changed

  • TitleBeforeEdit records the title of the todo before the change

For example, if instance content 2 is changed to instance content 8, what happens to each part is as follows:

The li that is being edited needs to set the class name editing.

To ensure that the text you get after double-clicking is the text currently displayed, set v-model=”todo.title” to the edit box.

Automatic focus capture

It is not possible to set autofoucs directly to the input box, because the input box is hidden until you double-click it, even if you get focus.

<input class="edit" v-model="todo.title" autofocus>
Copy the code

So we need to use custom instructions. Since there is only one example here and there is no need to distinguish between global and local custom directives, we will use a local one as an example:

  • elIt refers to the element
  • bindingAre parameters passed to the element
  • binding.valueIs the value passed to the element if the value istrueThen focus

View to determine whether the current todo is focused based on whether the todo is being edited:

Unedit (click ESC)

Click F2 to cancel editing and restore the contents and status of the event

<input class="edit" v-model="todo.title" 
v-todo-focus="todo === editingTodo"  @keyup.f2="cancelEdit(todo)">
Copy the code

Save the edit (Enter/Lose focus)

Save the edit when you hit Enter or lose focus

  • Triggered when an element loses focusblurThe event

Note:

Todo should be deleted when editing content is empty, so add a judgment statement to it:

The carriage return will cause the carriage return to lose focus (but losing focus will not cause the carriage return to disappear), so there will be a deduplication situation (the current item and the last item will be deleted together), improve:

Item screening

The functions to be implemented are as follows:

• Record filtering categories

• Click change category

Declare in data the category of items currently displayed in the data store and change the category of items displayed when the Filter button is clicked:

Set up functions to filter different categories of items and store them uniformly.

Set the calculation property to handle todoType and set it to the view.

Set the calculation property to handle todoType and set it to the view.

The data filtering functions used previously can also be set uniformly through filters.

Transaction data persistence

The following functions are required: Obtain local storage and update local storage

  • The localStorage and sessionStorage properties allow key/value pair data to be stored in the browser.

  • LocalStorage is used to store the data of the entire website for a long time. The saved data does not expire until it is manually deleted.

  • The return value of localstorage.getitem is a storage object

Save data syntax:

localStorage.setItem("key", "value");
Copy the code

Syntax for reading data:

var lastname = localStorage.getItem("key");
Copy the code

Delete data syntax:

localStorage.removeItem("key");
Copy the code

Encapsulating functions for local storage data reads.

Change the event data to locally stored data.

Encapsulate the update functionality of local storage

Because multiple events require updating the local storage, a single setting is tedious and can be set uniformly through the listener.

In the writing of watch (handler function) : www.jianshu.com/p/2ed125e95…

  • The processing functionhandlerThe first argument to is the new value changed to. For an object, the new value is the same as the old value.
  • handlerThe value of the argument is equal to that passed toset

// Write ()
watch: {someValueHandler (newValue, oldValue) {handler (newValue, oldValue) {console.log (newValue)}}}Copy the code