Vue-TypeScript开发TODOList

学习TypeScript起步的使用总结, 使用了element框架.

关于搭建开发环境的可以看另一篇文章

webpack组合Vue+TypeScript

完整代码

目标功能

1. 添加模块

添加备忘项

2. Tab菜单

通过改变hash值,显示不同状态的备忘项

• 全部
• 已完成
• 未完成

3. 备忘项操作

• 编辑.点击编辑图标开始编辑,完成编辑按Enter.如果该项是已完成状态则会被置为未完成状态.
  撤销编辑按ESC.

• 删除该项

• 设置完成或者未完成

代码实现

定义需要用到的变量

// script 标签内

添加模块

双向绑定输入的数据input,以及添加时将数据放入数组allTodoList中
绑定回车事件以及点击添加图标事件.

     // template 标签内
      

    

// scirpt 标签内
addTodoItem() :void {

        // 输出为空时.
        if( !this.input.trim().length ){
            alert('请输入内容');
            return;
        }

        let item = {
            name: this.input,
            status: false,
            isEdit: false
        }

        this.allTodoList.push(item);
        this.input = '';
    }

Tab菜单

通过使用不同的hash值来标识不同的选项,使用计算属性computed绑定已完成和未完成的数量.
监听window下的hashchange事件,设置不同的数据展示

 // template 标签内

        
            全部
        
            
            已完成
        
        
            未完成
        

// script 标签内

  // ts中vue的计算属性写法
    get finishedList(): object[]{
        return this.allTodoList.filter( item => {
            return item.status;
        })
    }
    get unfinishedList(): object[]{
        return this.allTodoList.filter( item => {
            return !item.status;
        })
    }

    mounted(){
        window.location.hash = 'all';
        this.todoList = this.allTodoList;

        window.addEventListener('hashchange', () => {
            let hash = window.location.hash.slice(1);

            switch(hash){
                case 'finish':
                    this.todoList = this.finishedList;
                    break;

                case 'unfinish':
                    this.todoList = this.unfinishedList;
                    break;

                case 'all':
                    this.todoList = this.allTodoList;

                default: 
                    break;
            }
        }, false)
    }

备忘项操作

• 设置为完成或者未完成,使用多选框
  绑定:style设置选中的样式
• 删除
  移除数组中的项
• 编辑
  保存旧值,已便取消绑定时可以重置.
  设置新值

定义每个备忘项为

{
  name: string // 数据
 isEdit: boolean // 当前是否在编辑,以便切换input
status: boolean // 是否已完成
}

// template标签内

            

            
                
                    {{item.name}}
               
                
                
                
            
            
            
            
        

// script标签内
    delTodoItem(index: number) :void {
        this.allTodoList.splice(index, 1);
    }
    setValue(index: number, name: string, tag: string) :void {
        let cur_item = this.allTodoList[index];

        if(tag === 'first'){            
            this.oldValue = cur_item.name;
            return;
        }else if(tag === 'new'){
            cur_item.name = name;
            cur_item.status = false;
        }else if(tag === 'old'){
            cur_item.name = this.oldValue;
        }

        cur_item.isEdit = false;
        this.allTodoList.splice(index,  1, cur_item)
    }