主要文件目录：
文件代码：
根实例，初始化vue：
<!--index.html，网站入口页面，和main.jsp组成一套.vue文件，包含-->
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>todolist</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
// main.js import Vue from 'vue' import TodoList from './TodolList' //引用第一个父组件 //import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', //根节点，挂载点 //router, components: { TodoList }, //组件 template: '<TodoList/>' //模板就是组件 })
第一个.vue模板文件，是第一个父组件
<!--TodoItem.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
},
//在vue-cli中data是一个函数
// data: function () {
// return {
// inputValue: '',
// }
// },
//ES6中的简写
data() {
return {
inputValue: '',
list: []
}
},
methods: {
handleSubmit() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete(index) {
this.list.splice(index, 1)
}
}
}
</script>
<style>
</style>
第二个.vue模板文件，是父组件下的一个子组件
<!--TodoItem-->
<template>
<li class='item' @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props: ['content', 'index'],
methods: {
handleDelete() {
this.$emit('delete', this.index)
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--scoped 该样式的作用域只在这个组件中,去掉scoped则为全局样式-->
<style scoped>
.item={
color: red
}
</style>
页面输出：
可以对照02慕课网《vue.js2.5入门》——Vue中的组件 的todolist实现