Vue官网todoMVC示例

mgckid 发布于2019-08-26 11:30 / 2424人阅读

这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。官网demo

要实现的功能

单条添加todo

单条删除todo

双击编辑todo

单条todo已完成相应样式状态改变

全部todo是已完成相应样式状态改变

清除全部已完成todos

待办todos数量显示

所有todos，已完成todos，未完成todos筛选

单条添加todo

//操作input元素使enter一下之后清空输入框内容

data() {//一些初始化数据
    return {
        todolists: [],
        dataStatus: ["All", "Active", "Completed"],
        dataStatusIndex: 0,
        whichShow: true,
        defaultShow: true
    }
},

addTodo(e) { //添加todo
    var val = e.value
    if (val === "") {return} //如果输入内容为空则立即返回
    this.todoLists = this.todoLists.concat({//使用concat这个api添加todo
        value: val, //输入内容
        isEditing: false, //是否在编辑状态
        isActive: false, //删除X图标是否激活
        isChecked: false //是否已完成
    })
    this.$refs.currentInput.value = "" //按下enter添加todo之后把输入框value清零
    window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存储数据
},

把每条todo的对应状态都存在同一个对象当中，在操作改变todo状态的时候不会被统一处理，使得每条todo都有多带带的状态。

单条删除todo

  //绑定删除单条todo事件

deleteTodo(index) { //删除单条todo
        this.todoLists.splice(index, 1)//使用splice的api
        window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存储数据//localStorage存储数据
},

在每个li元素上绑定了鼠标移入和移除的事件来动态的改变每个todo的isActive，然后再使用isActive动态显示class。

双击编辑todo&&单条todo已完成

//双向绑定isChecked

 //动态绑定class该表已完成todo样式
{{list.value}}


 //绑定blur失去焦点事件

methods: {
    toEdit(obj) { //使添加的todothing可编辑
        obj.isEditing = true
    },
    
    unEdit(obj) { //使添加的todothing不可编辑
        obj.isEditing = false
    },
}

directives: { //自定义focus指令,需要一个binding参数做判断
    "todo-focus": function (el, binding) {
        if (binding.value) {
            el.focus()
        }
    }
}

通过每个todo里的isEditing属性控制show和是否可编辑两个状态，双击div之后改变当前todo的isEditing为true，从而显示为input，input失去焦点之后再通过blur事件改为false。
通过todo的idChecked来控制是否已完成，从而动态改变样式。

全部todos已完成

 //全部已完成事件

selectAllTodos() { //设置所有todo为已完成,使用map的api通过todo的isChecked属性操作
    this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}

待办todos数量显示

 //times为0显示item，大于0显示items，细节注定成败
    {{times}}  item left


{{times}}  items left

computed: {
    times() { //使用计算属性计算待办todos的次数 
        let todoArr = this.todoLists
        let times = 0
        for (let i = 0; i < todoArr.length; i++) {
            if (todoArr[i].isChecked === false) {
                times++
            }
        }
        return times
    }
},

使用了计算属性对todoLists计算，用for循环刷选出idChecked为true的累加，最后返回times。

清除全部已完成todos

 //如果待办事件次数小于总todoLists长度就显示“clear completed”
    clear completed


 //如果待办事件次数等于总todoLists长度就显示“clear completed”

clearTodos() { //清空已完成的todoLists，使用filter的api进行筛选
    this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
    window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存储数据
},

如果待办todos的times小于todoLists长度，就证明有已完成的todo，就可以显示“clear completed”，如果相等就说明没有已完成的todo。

三种状态筛选

所有todos，已完成todos，未完成todos筛选




    
        {{item}}

switchStatus(index) { //通过if条件判断操作
    this.dataStatusIndex = index
    if (this.dataStatus[index] === "Active") {
        this.defaultShow = false
        this.whichShow = false
    } else if (this.dataStatus[index] === "Completed") {
        this.defaultShow = false
        this.whichShow = true
    } else if (this.dataStatus[index] === "All") {
        this.defaultShow = true
    }
},

我这里是同时if条件句判断操作，有点麻烦，目前还没有想出来其他方案。在li元素使用三元运算符和或运算符进行操作显示不同状态的todos。

完整代码


    
        todos
        
            
            
            
            
                
                    
                    
                        {{list.value}}
                    
                    
                    
                
            
            
                
                    {{times}} item left
                
                
                    {{times}} items left
                
                
                    
                        {{item}}
                    
                
                
                    clear completed

GPU云服务器云服务器 vue官网 todoMvc 配置示例使用示例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107029.html

Vue.js 的一些资源索引

摘要：是刚出来的一个轻型的框架借鉴了现有的各种框架官网作者个人网站挺漂亮的作者微博尤小右作者是员工目前已经在一些项目尝试按去年月已经开始了项目项目主页是今年月上线的作者记录了上线一周的情况文档主要是在官网上非常清晰目前还是比较简短的另 Vue.js 是刚出来的一个轻型的 MVVM 框架, 借鉴了现有的各种框架, 官网 http://vuejs.org/ Github https://gith...

yacheng 2019-08-21 12:10 评论0 收藏0
Vue.js@2.6.10更新内置错误处机制，Fundebug同步支持相应错误监控

摘要：摘要的错误监控插件同步支持异步错误监控。此次更新，我们对的监控插件做了相应的更新，来更好地支持使用框架开发的应用错误的监控。程序运行后，成功捕获该错误总结更新到，对错误处理提供了更加强大的支持。摘要： Fundebug 的 JavaScript 错误监控插件同步支持 Vue.js 异步错误监控。 Vue.js 从诞生至今已经 5 年，尤大在今年 2 月份发布了重大更新，即Vue 2....

DC_er 2019-08-26 13:45 评论0 收藏0
React+webpack+Antd从0到1开发一个todoMvc

摘要：在装载组件之前调用会组件的构造函数。当实现子类的构造函数时，应该在任何其他语句之前调用设置初始状态绑定键盘回车事件，添加新任务修改状态值，每次修改以后，自动调用方法，再次渲染组件。可以通过直接安装到项目中，使用或进行引用。首先我们看一下我们完成后的最终形态：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

sanyang 2019-08-20 14:47 评论0 收藏0
vue的TodoMVC事例总结

摘要：缩写为数据键盘事件添加事项指令指令监听事件。这块内容只会在指令的表达式返回值的时候被渲染。清空已办事项全选取消全选方法用于调用数组的每个元素，并将元素传递给回调函数。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染数据键盘事件：添加事项鼠标点击事件：移除事项显示未办事项数据全部事项、未办事项、已办事项状态切换清除全部完成...

CKJOKER 2019-08-26 10:10 评论0 收藏0
vue初探-简易留言板

摘要：学完的基础语法之后，练手一下，从最基本的留言板开刀吧。功能不多，主要为了熟悉的基础语法使用。学完vue的基础语法之后，练手一下，从最基本的留言板开刀吧。功能不多，主要为了熟悉vue的基础语法使用。详细vue教程请移步vue.js 2.0 技术框架 1.vue.js 2.0 2.bootstrap 语法概述这里只写一点此例子用到的一些语法知识，详细API请移步：vue 2.0 a...

GHOST_349178 2019-08-20 12:04 评论0 收藏0