要求：实现基本的增删查改
第一步：新建一个项目
成功创建的样子：
项目目录如图所示：
运行效果如下所示：(该有的功能都实现了，视频暂时传不上来
footer代码：
<template>
<div class="todo-footer">
<label>
<input type="checkbox" v-model="isCheck"/>
</label>
<span>
<span>已完成{{finishedCount}}件</span> / 总计{{todos.length}}件
</span>
<button class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button>
</div>
</template>
<script>
export default{
name:"Footer",
props:{
todos:Array,
selectedAll:Function,
delFinishedTodos:Function
},
computed:{
finishedCount(){
return this.todos.reduce((total,todo)=>total + (todo.finished ? 1 : 0),0)
},
isCheck:{
get(){
return this.finishedCount === this.todos.length && this.todos.length > 0
},
set(value){
this.selectedAll(value)
}
}
}
}
</script>
<style scoped>
/*尾部*/
.todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
.todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
}
.todo-footer button {
float: right;
margin-top: 5px;
}
</style>
header代码：
<template>
<div class="todo-header">
<input
type="text"
placeholder="请输入今天的任务清单，按回车键确认"
v-model="title"
@keyup.enter="addItem"
/>
</div>
</template>
<script>
export default{
name:"Header",
props:{
addTodo:Function
},
data(){
return{
title:''
}
},
methods:{
addItem(){
//1,1判断是否合理
const title = this.title.trim();
if(!title){
alert('输入内容不能为空');
return;
}
//1,2生成一个todo对象
const todo = {title,finished:false};
//1.3调用方法
this.addTodo(todo);
//1.4清空输入框
this.title = ''
}
}
}
</script>
<style scoped>
/*头部*/
.todo-header input{
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
outline: none;
}
.todo-header input:focus{
outline: none;
border-color: rgba(255,0,0,0.8);
box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075),0 0 8px rgba(255, 0, 0, 0.6);
}
</style>
Item代码：
<template>
<li
@mouseenter="dealShow(true)"
@mouseleave="dealShow(false)"
:style="{background:bgColor}"
>
<label>
<input type="checkbox" v-model="todo.finished"/>
<span>{{todo.title}}</span>
</label>
<button v-show="isShowDelButton" @click="delItem">删除</button>
</li>
</template>
<script>
export default{
name:"Item",
props:{
todo:Object,
index:Number,
delTodo:Function
},
data(){
return {
bgColor:'#fff',
isShowDelButton:false
}
},
methods:{
dealShow(flag){
this.bgColor = flag ? '#ddd' : '#fff';
this.isShowDelButton = flag;
},
delItem(){
if(window.confirm(`确定删除${this.todo.title}吗？`)){
this.delTodo(this.index)
}
}
}
}
</script>
<style scoped>
/*列表选项*/
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
background-color: orangered;
padding: 4px 10px;
border-radius: 5px;
color: #fff;
border: none;
float: right;
margin-top: 3px;
outline: none;
cursor: pointer;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
</style>
List代码：
<template>
<ul class="todo-main">
<Item
v-for="(todo,index) in todos"
:key="index"
:index="index"
:todo="todo"
:delTodo="delTodo"
/>
</ul>
</template>
<script>
//1,引入
import Item from './Item'
export default{
name: "List",
props:{
todos:Array,
delTodo:Function
},
components:{
Item
}
}
</script>
<style scoped>
/*列表*/
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
</style>
App.vue代码：
<template>
<div id="app">
<div class="todo-container">
<div class="todo-wrap">
<Header :addTodo="addTodo"/>
<List :todos="todos" :delTodo="delTodo"/>
<Footer :todos="todos" :selectedAll = "selectedAll" :delFinishedTodos="delFinishedTodos"/>
</div>
</div>
</div>
</template>
<script>
//1,引入
import Header from './components/Header'
import Footer from './components/Footer'
import List from './components/List'
export default{
name: "App",
data(){
return{
todos:[
{title:'学爵士', finished:false},
{title:'发SCI', finished:false},
{title:'蓝桥杯', finished:true},
]
}
},
//2,映射
components:{
Header,
Footer,
List
},
methods:{
//插入一条记录
addTodo(todo){
this.todos.unshift(todo);
},
//删除一条记录
delTodo(index){
// debugger;
this.todos.splice(index,1);
},
//选中所有计划
selectedAll(isCheck){
this.todos.forEach(todo=>{
todo.finished = isCheck
})
},
delFinishedTodos(){
this.todos = this.todos.filter(todo => !todo.finished)
}
}
}
</script>
<style scoped>
/*主面板*/
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
main.js代码：
// // The Vue build version to load with the `import` command
// // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
// import App from './App'
// Vue.config.productionTip = false
// /* eslint-disable no-new */
// new Vue({
// el: '#app',
// components: { App },
// template: '<App/>'
// })
import Vue from 'vue'
import App from './App'
import './assets/css/base.css'
new Vue({
el:'#app',
components:{
App
},
template:'<App/>'
});