Vue component compiling-todolist component instance details, vuetodolist

Vue component compiling-todolist component instance details, vuetodolist

We insert a todolist sub-component on the topNav page.

I don't know what's going on. The markdown code here is always serial .. So the code looks uncomfortable. Sorry, I will put the Source Code address of github at the end.

1. Add the parent component to topNav and introduce the child component.

<Template> <div> <p> the following line is the defined component name </p> <todo-list> </todo-list> <router-view> </router -view> </div> </template> <script> /*

1. import our sub-component drawerLayout through import

2. Introduce the sub-component, obtain the todoList name again, and then in the components Group

3. Use components in the form of html tags in our template. todoList is <todo-list>

Note:

(1) The sub-component name does not matter, but the sub-component name todoList we introduced must be capitalized in the first letter of the second word (otherwise you will step on it)

(2) When tags are used, todoList is todo-list, which is written as the camper name (generally speaking, the first letter of the second word is changed to the lower-case form, then add "-" to the Front)

*/import todoList from '../components/todoList.vue' export default {  components: {   todoList  },  data() {   return {   };  } }</script>

2. First, let's look at the functions of the component.

First, let's look at what the component looks like, and then I will figure out how to write it.

First, we can see an input box. The default display is "edit...". When we do not add data, "NO content" is displayed below"

 

Next, we enter the data "first example" and press enter to display a line of list

List includes a single vertex, text, and a delete button.

 

How can we delete it? Now that we have to do a little more functions, we will use some internal commands. The deletion rule we set is

Select the list first, click Delete, and the record will no longer exist. If the list is no longer available after the data is deleted, the "no content" will be displayed.

3. I started to write our todo sub-component.

I put the style in the code at the end, so you can ignore some class

We first set up the general framework of todolist, and then add functions to it.

<Template> <div class = "ex1"> <div class = "input-text"> <label for = "inputNum"> enter: </label> <input type = "text" id = "inputNum" name = "inputNum" placeholder = "edit .. "> <! -- List content --> <ul> <li> <input type = "checkbox"> <span> dd </span> <button> Delete </button> </li> </ul> <p class = "empty" v-if = "! InputList. length "> NO content </p> </div> </template> <script> export default {data () {return {inputList: [], inputItem: {content: '', finished: false, deleted: false }}, methods: {// Add the data in the input box to the list addItem: function () {}// change the selected status changeState: function (index) {}, // Delete the list element deleteItem: function (index) {}}</script>

 

Next, I will not update the code for every small step. Because the length is too large, I will write more function blocks (I will be very detailed)

First, we should clarify the following ideas:

Enter data in the input box, and press enter to display a list (including a single region, input data, and blue operation buttons)

Bind the value of the input box to inputItem. content in both directions.

Bind the carriage return event (@ keydown.13) to the addItem method in the input box. Each time you enter the carriage return event, add the data in the input box to the list (in the inputList array)

Use the v-for command to traverse the value in inputList and display

If you select a single sequence, the content of the list changes to the delete effect (the middle line is crossed), and the blue OPERATION button changes to the red delete button. click the button to delete the list of columns.

Bind the checked of a single shard to the finished of inputItem. After binding, you can use this finished to do something else.

The list button added to the list is a blue OPERATION button, if we want to add and remove a class (that is, the delete effect described above) for the content sub-object through the selected or not state of a single queue, and change the button to a red delete button, then you can bind the changeState Method for operations.

What about the delete function? First, select the row list and click Delete to delete the row, right. Therefore, we bind the button to the deleteItem method. The method first checks whether the finished of the row is true. If it is true, we will delete the row of data.

Let's first complete the Add function: enter data in the input box, press enter, and a list of rows (including single-row, input data, and delete button) will be displayed below)

<Template> <div class = "ex1"> <div class = "input-text"> <label for = "inputNum"> enter: </label> <! -- @ Keydo1_13 indicates the carriage return event --> <! -- V-model is used to make the input data and inputItem. content synchronization --> <input type = "text" id = "inputNum" name = "inputNum" placeholder = "edit .. "@ keydown.13 =" addItem "v-model =" inputItem. content "class =" edit "> <! -- List content --> <ul class = "task"> <li v-for = "(key, item) in inputList"> <input type = "checkbox ": checked = "item. finished "> <span >{{ key. content }}</span> <button class = "del"> Delete </button> </li> </ul> <p class = "empty" v-if ="! InputList. length "> NO content </p> </div> </template> <script> export default {data (){... omitted}, methods: {addItem: function () {this. inputList. push (this. inputItem);/* why should we initialize inputItem again? A: each time you input data in the input box, the content attribute of inputItem is changed at the same time. Then, we press enter to add the entire inputItem object to the inputList. In normal logic, the content in inputList has no connection with inputItem. If we do not initialize inputItem again at this time, we will find that when you input data in the input box again, the value of the list below will be changed at the same time, so you can simply remove the initialization code, run it! */This. inputItem = {content: '', finished: false, deleted: false };}, // change the selected status changeState: function (index) {}, // Delete the list element deleteItem: function (index) {}}</script>

Let's first look at the code of the list content.

<! -- List content --> <ul class = "task"> <li v-for = "(item, index) in inputList"> <! -- An item is bound to a single queue. finished, a click event --> <input type = "checkbox": checked = "item. finished "@ click =" changeState (index) "> <! -- Use item. finished value to dynamically bind class --> <span: class = "{'finish ': item. finished} ">{{ item. content }}</span> <! -- The color of the button is implemented by dynamically adding class, and then the text of the button is implemented by changing isDel, isDel changes are also operated through the changeState Method --> <button @ click = "deleteItem (index)" class = "del": class = "{'native ': item. finished = true} ">{{ isDel }}</button> </li> </ul> <p class =" empty "v-if = "! InputList. length "> NO content </p>

Then we will explain the changeState method.

// Change the selected status changeState: function (index) {// this. inputList [index]. finished = true error: So if you click the second time and cannot return to false, the status will remain true. this. inputList [index]. finished =! This. inputList [index]. finished; // modify the isDel value based on the finished value. The isDel value is the text of the button if (this. inputList [index]. finished) {this. isDel = 'delete'} else {this. isDel = 'operation'}, // Delete the list element deleteItem: function (index) {if (this. inputList [index]. finished) {his. inputList. splice (index, 1 );}}

Summary

The above is a detailed description of the todolist component instance compiled by the vue component introduced by Alibaba Cloud. I hope it will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!