Vue's idea of componentization modifies todolist

January 9, 2019 21:35:27 Comment Reading (1821)

This article was last updated on January 9, 2019, and has not been updated for more than a year. If the article content or image resources are invalid, please leave a message for feedback, and we will deal with it in a timely manner, thank you!

A page is composed of many parts, such as carousel and content area. If we write business logic on a page, it is not conducive to maintenance. Components are equivalent to one part of the page. A page can be cut into many parts, which can improve the maintainability of code and facilitate development.

Modify todolist based on the idea of componentization

As shown in the figure above, when entering any content, we will put it in the red box below. Each list item is a part of the page. Since it is a part, we can split it into a component.

source code

< div id = "app" >
< input type = "text" v-model = "inputValue" />
< button v-on:click = "btnClick" > Submit </ button >
< ul >
< li v-for = "item in List" > {{item}} </ li >
</ ul >
</ div >
ipt >
var app = new Vue({
el:'#app',
data: {
List: [],
inputValue: ''
},
methods: {
btnClick: function () {
this. List.push(this.inputValue)
this.inputValue = ''
}
}
})
ript >

The current list item is through a loop LiLabel To show, now I want to LiLabel What should we do if the content of becomes a component as a whole?

Call a Component method The component is provided by vue for us to create Global Components The specific examples are as follows:

Vue.component( "TodoList" ,{ //Define global components, where the name can be abbreviated as todo list
props:['content'], //Receive content from parent component
template: "<li>{{content}}</li>" //Component template (to be called with interpolation expression)

Use the todo list component. The specific example is as follows:

< ul >
< todo-item v-bind:content = "item" v-for = "item in List" > </ todo-item >
</ ul >

When cycling the List, assign each value of the List to the item, and then the item is passed to the todo item subcomponent through the variable content through the v-bind syntax.

Last Code

< div id = "app" >
< input type = "text" v-model = "inputValue" />
< button v-on:click = "btnClick" > Submit </ button >
< ul >
< todo-item v-bind:content = "item" v-for = "item in List" > </ todo-item >
</ ul >
</ div >
<script >
Vue.component("TodoItem",{
props:['content'],
template:" < li > {{content}} </ li > "
})
var app = new Vue({
el:'#app',
data: {
List: [],
inputValue: ''
},
methods: {
btnClick: function () {
this. List.push(this.inputValue)
this.inputValue = ''
}
}
})
</script >

End.

WeChat applet

Internet development, lifelong learners, welcome your attention!

one	two	three	four	five	six	day
						one
two	three	four	five	six	seven	eight
nine	ten	eleven	twelve	thirteen	fourteen	fifteen
sixteen	seventeen	eighteen	nineteen	twenty	twenty-one	twenty-two
twenty-three	twenty-four	twenty-five	twenty-six	twenty-seven	twenty-eight	twenty-nine
thirty

Modify todolist based on the idea of componentization

source code

Last Code

Comment Cancel Reply