vue-cli构建TodoList项目

//main.js
import Vue from 'vue'
import TodoList from './TodoList'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
components: { TodoList },
template: '<TodoList/>'
})

//TodoList.vue
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</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'
export default {
components: {
'todo-item': TodoItem
},
data () { // data是一个数据
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit () {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete (index) {
this.list.splice(index, 1)
}
}
}
</script>

//components/TodoItem.vue
<template>
<li class="item" @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content', 'index'],
methods: {
handleDelete () {
this.$emit('delete', this.index)
}
}
}
</script>
<style scoped>  // scoped只对这个组件生效，不加全局生效
.item {
color: red;
}
</style>