Home > Developer > Web Develop
Main file directory:
File code:
Root instance, initialize Vue:
<!--index.html, website portal page, and main.jsp form a set of. vue files, including
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Viewport"content= "width=device-width,initial-scale=1.0"> <title>ToDoList</title> </Head> <Body> <DivID= "App"></Div> <!--built files would be auto injected - </Body></HTML>
// main.jsimport vue from ' Vue'./todollist ' //reference the first parent component //import router from './ Router 'false/**/new Vue ({' #app ' ,//root node, mount point // router, Components : {todolist},//Component ' <TodoList/> '//template is Component })First. Vue template file, which is the first parent component
<!--todoitem.vue--><template> <div> <div> <input v-model= "Inputvalue"/> <bu Tton @click = "Handlesubmit" > Submit </button> </div> <ul> <todo-Item v- for= "(item,index) of list": Key= "Index": Content= "Item": Index= "Index" @Delete= "Handledelete" ></todo-item> </ul> </div></template><script>Import TodoItem from'./components/todoitem '//reference sub-componentsExportdefault{components: {' Todo-item ': TodoItem},//in Vue-cli, data is a function //data:function () { //return { //inputvalue: ", // } // }, //Shorthand in ES6data () {return{inputvalue:‘‘, List: []}, methods: {Handlesubmit () { This. List.push ( This. Inputvalue) This. Inputvalue = "}, Handledelete (index) { This. List.splice (Index, 1) } } }</script><style></style>
The second. Vue template file, which is a sub-component under the parent component
<!--todoitem--><template> <li @click = "Handledelete" >{{content}}</li></template ><script> default { props: [' content ', ' index '], methods: { Handledelete () { This,Index)} }} this Component only--><style scoped></style>Page output:
You can control the ToDoList implementation of the components in the "vue.js2.5"--vue of the 02 MU class network
04 Mu class NET "vue.js2.5"--VUE-CLI development todolist
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
