1 <template>
2 <div class="todo-header">
3 <
input
4 type="text"
5 placeholder="请输入今天的任务清单，按回车键确认"
6 v-model="title"
7 @keyup.enter="addItem"
8 />
9 </div>
10 </template>
11
12 <script>
13 export
default {
14 name: "Header"
,
15 data(){
16 return {
17 title: ''
18 }
19 },
20 methods: {
21 addItem(){
22 // 1. 判断是否为空
23 const title =
this.title.trim();
24 if(!
title){
25 alert('输入的任务不能为空！'
);
26 return;
27 }
28 // 2. 生成一个todo对象
29 let todo = {title, finished:
false};
30 // 3. 调用父组件的插入方法
31 // this.addTodo(todo);
32 this.$emit('addTodo'
, todo);
33
34 // 4. 清空输入框
35 this.title = ''
;
36 }
37 }
38 }
39 </script>
40
41 <style scoped>
42 .todo-
header input {
43 width: 560px;
44 height: 28px;
45 font-
size: 14px;
46 border: 1px solid #ccc;
47 border-
radius: 4px;
48 padding: 4px 7px;
49 outline: none;
50 }
51
52 .todo-
header input:focus {
53 outline: none;
54 border-color: rgba(255, 0, 0, 0.8
);
55 box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6
);
56 }
57 </style>
1 <template>
2 <div class="todo-container">
3 <div class="todo-wrap">
4 <Header ref="header"/>
5 <List :todos="todos" :delTodo="delTodo"/>
6 <Footer>
7 <input slot="isCheck" type="checkbox" v-model="isCheck"/>
8 <span slot="finish">已完成{{finishedCount}}件 / 总计{{todos.length}}件</span>
9 <button slot="delete" class="btn btn-warning" @click="delFinishedTodos">清除已完成任务</button>
10 </Footer>
11 </div>
12 </div>
13 </template>
14
15 <script>
16 // 引入组件
17 import Header from './components/Header'
18 import List from './components/List'
19 import Footer from './components/Footer'
20
21 // 引入工具类
22 import localStorageUtil from './utils/localStorageUtil'
23 import PubSub from 'pubsub-js'
24
25 export
default {
26 name: 'app'
,
27 data() {
28 return {
29 todos: localStorageUtil.readTodos()
30 }
31 },
32 computed: {
33 finishedCount() {
34 return this.todos.reduce((total, todo) => total + (todo.finished ? 1 : 0), 0
);
35 },
36 isCheck: {
37 get() {
38 return this.finishedCount ===
this.todos.length &&
this.todos.length > 0
39 },
40 set(value) {
41 this.selectedAllTodo(value);
42 }
43 }
44 },
45 components: {
46 Header,
47 List,
48 Footer
49 },
50 mounted(){
51 // 绑定自定义事件（addTodo）监听
52 this.$refs.header.$on('addTodo',
this.addTodo);
53 // 订阅消息（delTodo）
54 PubSub.subscribe('delTodo', (msg, token)=>
{
55 // console.log(msg, token);
56 this.delTodo(token);
57 });
58 },
59 methods:{
60 // 插入一条数据
61 addTodo(todo){
62 this.todos.unshift(todo);
63 },
64 // 根据索引删除一条记录
65 delTodo(index){
66 this.todos.splice(index, 1
);
67 },
68 // 是否选中所有的任务
69 selectedAllTodo(isCheck){
70 this.todos.forEach(todo =>
{
71 todo.finished =
isCheck
72 })
73 },
74 delFinishedTodos(){
75 this.todos =
this.todos.filter(todo=> !
todo.finished)
76 }
77 },
78 watch: {
79 // 深度监视
80 todos: {
81 handler: localStorageUtil.saveTodos,
82 deep:
true,
// 深度监视
83 // immediate: true
84 }
85 }
86 }
87 </script>
88
89 <style>
90 .todo-
container {
91 width: 600px;
92 margin: 0
auto;
93 }
94
95 .todo-container .todo-
wrap {
96 padding: 10px;
97 border: 1px solid #ddd;
98 border-
radius: 5px;
99 }
100 </style>
转载于:https://www.cnblogs.com/zhangzhengyang/p/11279411.html
相关资源：数据结构—成绩单生成器
