序:这是一个使用TODOLIST的反面教程!完全没明白怎么回事,繁琐而又闹心!
//这个是APP.vue文件里面的!
<template>
<div class="todo-container">
<div class="todo-wrap">
<Header/>
//这里有个列表,代表作的事情!
<List :todos="todos"/>
<Footer/>
</div>
</div>
</template>
<script>
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
export default {
name: 'App',
data(){
return{
//这个是数据,和前面的进行绑定!
todos:[
{title:'学习VUE组件通信',finished:true},
{title:'学习react组件',finished:false},
{title:'学习javascript组件通信',finished:false}
]
}
},
components: {
Footer,
List,
Header
}
}
</script>
<style scoped>
</style>
//这个是header.vue里面的内容!
<template>
<div class="todo-header">
<input type="text" placeholder="请输入今天的任务清单,按回车键确认!"/>
</div>
</template>
<script>
export default {
name: "Header"
}
</script>
<style scoped>
</style>
//这个是List.vue里面的内容!
<template>
<ul class="todo-main-list">
<Item
//下面为在todos里面遍历,其中,todo和todo是一个类型!
v-for="(todo,index) in todos"
:todo="todo"
/>
</ul>
</template>
<script>
import Item from "./Item";
export default {
name: "List",
components: {Item},
props:{
//这里面定义了todos为一个数组类型的数据。
todos: Array
}
}
</script>
<style scoped>
</style>
//这个是Item.vue里面的内容!
<template>
<li
@mouseenter="dealShow(true)"
@mouseleave="dealShow(false)"
:style="{backgroundColor:bgColor}"
>
<label>
//绑定了数据todo的finished显示出来为title
<input type="checkbox" v-model="todo.finished"/>
<span>{{todo.title}}</span>
</label>
<button class="btn btn-warning">删除</button>
</li>
</template>
<script>
export default {
name: "Item",
props:{
todo: Object
},
data(){
return{
isShowDelButton: false,
bgColor: '#fff'
}
},
methods:{
dealShow(isShow){
this.isShowDelButton=isShow;
this.bgColor = isShow ? '#ddd' : '#fff'
}
}
}
</script>
<style scoped>
</style>
//footer里面的内容。
<template>
<div class="todo-footer">
<label>
<input type="checkbox"/>
<span>已完成0件/总计2件</span>
</label>
<button class="btn btn-warning">清除已完成任务</button>
</div>
</template>
<script>
export default {
name: "Footer"
}
</script>
<style scoped>
</style>
这里面讲了个我不太懂的东西!父组件传给子组件,子组件再传给子组件!
下面依次为三个组件,祖父组件,父组件,子组件!
<List :todos="todos" :delTodo="delTodo"/>
data(){
return{
todos:[
{title:'学习VUE组件通信',finished:true},
{title:'学习react组件',finished:false},
{title:'学习javascript组件通信',finished:false}
]
}
methods:{
//根据1索引删除记录!数据在哪里,方法在哪里!
delTodo(index){
this.todos.splice(index,1)
}
}
<ul class="todo-main-list">
<Item
v-for="(todo,index) in todos"
:todo="todo"
:index="index"
:delTodo="delTodo"
/>
</ul>
props:{
todos: Array,
delTodo:Function
}
<button v-show="isShowDelButton" class="btn btn-warning" @click="delItem">删除</button>
props:{
todo: Object,
index:Number,
delTodo:Function
//当前任务在总任务数组下标位置
},
data(){
return{
isShowDelButton: false,
bgColor: '#fff'
}
},
methods:{
dealShow(isShow){
this.isShowDelButton=isShow;
this.bgColor = isShow ? '#ddd' : '#fff'
},
delItem(){
if (window.confirm(`您确认删除${this.todo.title}`)){
this.delTodo(this.index)
}
}
}
这个失败案例,只是写给我自己,没好好听课!还总是不专心,其次,太着急了!最后就是没怎么认真听,就开始实操,基础太差了!