todos
    
  
  

    
    
    

      

        

          
          {{ todo.title }}
          
        
        
      
    
  
  

//       ，        ，  vlaue   
var STORAGE_KEY = 'todos' 
var todoStorage = {
  fetch: funciton (){
  //      
  var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  todos.forEach(function (todo, index){ //    todo  
    todo.id = index  
  //todo   index  --id  0 1 2 3   
  //:key="todo.id"
    
   })
   
   todoStorage.uid = todos.length
   return todos
  
  
},
  //     todos    localStorage,     string
  save: function (todos){  
    localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }

}


//   
var filters= {
  //      
   all: function (todos){ 
       return todos
   },
  //        
  active: function(todos){
      return todos.filter(function (todo){
        //       ，             
        return !todo.completed    
        
      })
  },
  //       
  completed: function (todos){
      return todos.filter(function(todo){
        return todo.completed
      })
  }
}


var app = new Vue({
  data: {
    //       
    todos: todoStorage.fetch(),
    //
    newTodo: '',
   //          
    visibility: 'all',
    editedTodos: null
   
  },
  //  data  
  //   todos     ，          ，      todos    
  watch: {
    todos:{
      //  todos  ，          ，     
      handler: function(todos){
          todoStorage.save(todos)
      },
      deep: true
    }
  },
  
  
  computed: {
    filteredTodos: function() {
      return filters[this.visibility](this.todos)
    },
    remianing: function() {
      return filters.active(this.todos).length
    },
    allDone: function() {
      get: function() {
        return this.remiaing === 0
      },
        set: function() {
          this.todos.forEach(function(todo){
            //???????   value  ---v-model     data       comple     
            todo.completed = value
          })
        }
    }
  
  },
  
  //   item  
  filters: {
    
    pluralize: function(n) {
       return n=== 1 ? 'item': 'items'
    }
    
  },
  
  
  methods: {
    //            
    addTodo : function(){
      var value = this.newTodo && this.newTodo.trim()
      //    ：        return
      if(!value){
        return
      }
      //    ,   todos  
      this.todos.push({
        id: todoStorage.uid++,
        title: value,
        completed: false
      })
      //      ，      
      this.newTodo = ''
    },
    //   x，  li                    
    
    removeTodo: function(todo) {
      // splice(2,1)          2     
      //indexOf()                  
      this.todos.splice(this.todos.splice(todo),1)
    },
    
    editTodo: function(todo) {
      
    },
    
    
    doneTodo: function(todo) {
        if(!this.editedTodo){
          return 
        }
      this.editedTodo = null
      
    },
    //      esc      
    cancelEdit: function() {
      
    },
    //     
    removeCompleted: function() {
      
    } 
    


//        
 editTodo: function (todo) {
      this.beforeEditCache = todo.title
      this.editedTodo = todo
    },
// ????    ，    （    ）       enter    
    doneEdit: function (todo) {
      if (!this.editedTodo) {
        return
      }
      this.editedTodo = null
      todo.title = todo.title.trim()
      if (!todo.title) {
        this.removeTodo(todo)
      }
    },
 //      esc      
    cancelEdit: function (todo) {
      this.editedTodo = null
      todo.title = this.beforeEditCache
    },
//    
    removeCompleted: function () {
      this.todos = filters.active(this.todos)
    }

  }
  
})






//    

function  onHashChange() {
  //         ，       url  hash
  // hash === all actived completed
  var visibility = window.location.hash.replace(/#\/?/, '') 
  //hash　  , all actived completed      ，　  ｖｕｅ    ｄａｔａ-visibility
  if(filters[visibility]){
    app.visibility = visibility
    
  }else {
    //    hash      ，      all
    window.location.hash = ''
    app.visibility = 'all'
  }
}


//      
//           value   ，      
  directives: {
    'todo-focus': function (el, binding) {
      if (binding.value) {
        el.focus()
      }
    }
  }
})

//  hashchange  ，     onHashChange

window.addEventListener('hashchange', onHashChange)
onHashChange()

app.$mount('.todoapp')

[v-cloak] { display: none;}