todomvc实现日程安排

官方演示链接 http://todomvc.com/examples/vue/#/all

sublimer代码折叠 ctrl +shift+{

取消折叠 ctrl +shift+}

1.启动案例

clone仓库

Vue代码模块化

//定义vue实例挂载到window对象的app属性
//匿名函数 自调用
(function(exports){
    exports.app=new Vue()
})(windos)

2.业务拆分

点击全选或者全不选

使用input标签绑定change事件，使得事件的完成状态与标签的选中状态相挂钩

注意联动切换

<input id="toggle-all" class="toggle-all" type="checkbox" @change="handelToggleAll">

//根据change事件循环改变事件的完成状态
methods:{
    handelToggleAll(e){
                var checked=e.srcElement.checked //获取全选的状态
                this.todos.forEach(item =>{
                    item.completed=checked
                })
            }
}

有无事件时的显示状态

根据数据的有无决定页脚的显示

            <footer class="footer" v-show="todos.length">
                <span class="todo-count">
                    <strong ></strong> 
                </span>
                <ul class="filters">
                    <li><a href="#/all" >All</a></li>
                    <li><a href="#/active" >Active</a></li>
                    <li><a href="#/completed" >Completed</a></li>
                </ul>
                <button class="clear-completed"> 
                </button>
            </footer>

在事件添加按钮中绑定回车按钮，用于事件的添加

<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodos" @keyup.enter="handleNewTodoKeyDown">
//事件处理函数
                handleNewTodoKeyDown(){
                //input 按下回车时添加新的数据
                var value=this.newTodos && this.newTodos.trim()
                if(!value){
                    return
                }
                this.todos.push(
                    {
                    id:this.todos.length+1,
                    title:value,
                    completed:false}
                    )
                this.newTodos=''
            }

双击进入编辑状态

使用中间变量对改变需要编辑的任务的样式

在循环输出时，加上一个input标签用于接收修改后的内容，这里巧妙在style的设定

<li class="todo" v-for="todo in todos" :key="todo.id" :class="{completed: todo.completed, editing: editedTodo == todo}">
        <div class="view">
    <input class="toggle" type="checkbox" v-model="todo.completed">
    <label @dblclick="editTodo(todo)">{{todo.title}}</label>
    <button class="destroy" v-on:click="removeTodo(todo)"></button>
        </div>
    //用于修改的input
<input class="edit" type="text" v-model="todo.title" >
</li>

当点击修改时，原始数据进入隐藏状态，而修改按钮进行显示状态
这里主要得益于css选择器，当进入编辑状态时因为在li上增加了一个编辑类

在vue中设计到的逻辑

esc按钮终止编辑
enter或者失去焦点blur时保存数据

在双击按钮时，将原先的数据保存到变量beforeEditeTitle中

editTodo(todo){
                this.beforeEditeTitle=todo.title
                this.editedTodo=todo

            },

            cancleEdite(todo){
                this.editedTodo = null;
                todo.title=this.beforeEditeTitle
            },

            doneEdite(todo){
                if(!this.editedTodo){
                    return
                }
                this.editedTodo=null
                todo.title=todo.title.trim()
                if(!todo.title){
                    this.removeTodo(todo)
                }
            }

显示未完成的数目

使用计算属性对数组进行过滤，同时先定义好了一个钩子对象用于显示未完成的条目的搜寻

//钩子对象
var filters={
    all:function(todos){
        return todos;
    },
    active:function(todos){
        return todos.filter(item=>!item.completed)
    },
    completed:function(todos){
        return todos.filter(item=>item.c)
    }
}
//计算属性
        computed:{
            reminds:function(){
              return filters.active(this.todos).length
            }
      }

在后面加上复数的字符

使用pluralize方法

联动切换

使用计算属性进行操作，计算属性中get方法，当访问计算属性的时候自动的调用get方法

//使用get访问计算属性，对todos的状态进行检查
toggleAllstat:{
                get(){
                    //所有的都为true才为true
                    return this.todos.every(todo=>(todo.completed))
                }
}
//将计算属性绑定到标签上
<input id="toggle-all" class="toggle-all" type="checkbox" v-:checked="toggleAllstat">

改进版本，使用v-model进行联动

        computed:{
          reminds:function(){
                return filters.active(this.todos).length
          },
            toggleAllstat:{
              get(){//访问计算属性时调用的方法
                    //所有的都为true才为true
                  return this.todos.every(todo=>(todo.completed))
                },
              set(){ //当计算属性发生改变时进行调用
                var checked=!this.toggleAllstat //获取变化后的值
                this.todos.forEach(item =>{
                    item.completed=checked
                })
                }
            }
        }
<input id="toggle-all" class="toggle-all" type="checkbox" v-model="toggleAllstat">

本地持久化

使用window.localStorage中的方法对数据对象进行存储
对vue实例中的数据对象进行监视，调用对应的setItem方法存储到本地
https://cn.vuejs.org/v2/api/#watch

//本地化对象
var todoStorage={
    fetch:function(){
        return JSON.parse(exports.localStorage.getItem('todos-vuejs') || '[]');
    },
    save:function(todos){
        exports.localStorage.setItem('todos-vuejs',JSON.stringify(todos))
    }
}
data:{
            todos:todoStorage.fetch(),
      },

watch:{ todos:{ deep:true, //对引用类型数据进行深度监视 handler:todoStorage.save //默认将新的值放在函数第一个参数位置，旧值在第二个位置 } },

按条件显示条目
- 定义一个钩子对象
- 定义一个状态变量
- 绑定点击事件,修改对应的状态变量

    //钩子函数
    var filters={
        all:function(todos){
            return todos;
        },
        active:function(todos){
            return todos.filter(item=>!item.completed)
        },
        completed:function(todos){
            return todos.filter(item=>item.completed)
        }
  }

  //应用到页面的计算属性
                filterTodos:{
                  get(){
                        return filters[this.filterText](this.todos);
                  }
                }

使用自定义指定，获得焦点

使用Vue.directive函数定义自定义指令，，然后将指令绑定到DOM元素上，尽可能的减少DOM的操作

// 注册全局指令
Vue.directive("focus",{
    inserted:function(el,bind){ //在被绑定元素插入到父元素时，调用聚焦事件
        el.focus()
    }

})

PreviousVue组建化 Next页面组件化

Last updated 4 years ago