TODO....

原始html

      
          
          
                      
      
  
       
    
        
      
         
        
                
         
      
         
        
          
            todotitle           删除        
      
         
      
         
        
                                    
                    已完成/全部                
          清除已完成任务      
         
    
        
  
       
    
      
 
        

 

补充

当内部有嵌套div时  （回字结构）

onmouseenter  onmouseleave  仅对外层边界有触发

onmouseover  onmounseout   对内部边界也有触发

 

reduce  forEach  filter

 

 

1. step1 基本功能

index.html

main.js

/** * Created by infaa on 2018/9/19. */import Vue from 'vue'import App from './App'import './base.css'/* eslint-disable no-new */new Vue({  el: '#app',  components: {App},  template: '
      '})

base.css

body {  background: #fff;}.btn {  display: inline-block;  padding: 4px 12px;  margin-bottom: 0;  font-size: 14px;  line-height: 20px;  text-align: center;  vertical-align: middle;  cursor: pointer;  box-shadow: inset 0 1px 0 rgba(225, 225, 225, 0.2), 0 1px 2px rgba(0, 0, 0,0.15);  border-radius: 4px;}.btn-danger {  color: #fff;  background-color: #da4f49;  border: 1px solid #bd362f;}.btn-danger:hover {  color: #fff;  background-color: #bd362f;}.btn:focus {  outline: none;}

app.vue

components/TodoHeader.vue

components/TodoList.vue

components/TodoItem.vue

components/TodoFooter.vue

 

2. 本地存储

实现刷新后不消失，关闭浏览器重新打开依然有效。

保存于浏览器localstorage

app.vue

 由于todos是列表， 监听为deep，和python deepcopy  类似关注内部元素的内存地址。

 

把存储抽取为util

app.vue

storageUtil.js

/** * Created by infaa on 2018/9/20. */const TODO_KEY = 'todos_key'export default {  saveTodos(value) {    window.localStorage.setItem(TODO_KEY, JSON.stringify(value))  },  readTodos() {    return JSON.parse(window.localStorage.getItem(TODO_KEY) || '[]')  }}

 

 

 

 

vue组件通信方式

1. props

2. vue自定义事件

3. 消息订阅发布pusub库

4.slot

5 vuex