github:https://github.com/1287642889/todolist.git
1溪王、構(gòu)建項(xiàng)目結(jié)構(gòu)
1磅叛、新建todolist文件夾抽高。
2、在該文件夾目錄下跛梗，cmd輸入命令：vue init webpack todolist
3寻馏、切換到todolist目錄下：cd todolist，然后輸入npm run dev開(kāi)啟服務(wù)核偿，在項(xiàng)目中輸入網(wǎng)址诚欠，即可看到效果。
項(xiàng)目結(jié)構(gòu)如下：
image.png
2漾岳、開(kāi)發(fā)TodoList項(xiàng)目轰绵，主要是修改以下幾個(gè)文件：
1、main.js
import Vue from 'vue'
import TodoList from './TodoList'
Vue.config.productionTip = false
new Vue({
el: '#app',
components: { TodoList },
template: '<TodoList/>'
})
2尼荆、TodoList.vue
<template>
<div id="app">
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
<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'
export default {
components:{
todo_item:TodoItem
},
data () {
return {
inputValue:'',
list:[]
}
},
methods:{
//handleSubmit(){}是 handleSubmit:function(){}的簡(jiǎn)寫
handleSubmit () {
this.list.push(this.inputValue);
this.inputValue = '';
},
//接收子組件傳遞過(guò)來(lái)的參數(shù)
handleDelete (index) {
this.list.splice(index,1);
}
}
}
</script>
<style scoped>
</style>
3左腔、TodoItem.vue
<template>
<div>
<li @click="handleDelete" class="item">{{content}}</li>
</div>
</template>
<script>
export default {
//props用來(lái)接收父組件傳遞過(guò)來(lái)的參數(shù)
props:['content','index'],
methods:{
handleDelete () {
//子組件與父組件通信
this.$emit('delete',this.index);
}
}
}
</script>
<!--scoped:該樣式是局部樣式，只對(duì)本文件有效-->
<style scoped>
.item {
color:red;
}
</style>
測(cè)試頁(yè)面
image.png
