todocmvc练习vue版

Mark in HangZhou

2017-10-23

# 安装依赖

安装依赖的css，js

npm install

# 引入vue

<script src="js/vue.js"></script>

# 定义初始化数据

在app.js中，实例化Vue，然后定义初始化数据

{ //为了形成块级作用域()()
  let vm = new Vue({
    el: '#app',
      data: {
         datas: [
            {id: 121,title: 'html5',isCompleted: false},
            {id: 122,title: 'css3',isCompleted: false},
            {id: 123,title: 'js6',isCompleted: false},
         ]
      }
    })
}

1
2
3
4
5
6
7
8
9
10
11
12

# 绑定假数据到li上

如果当前的isCompleted是true,就是显示选中状态

<li :class="{completed: isCom}" v-for="(item,index) in datas">
    <div class="view">
        <input class="toggle" type="checkbox">
        <label>{{ item.title }}</label>
        <button class="destroy"></button>
    </div>
    <input class="edit" value="Create a TodoMVC template">
</li>

1
2
3
4
5
6
7
8

# 双向数据绑定

<input class="new-todo" placeholder="What needs to be done?" v-model="val">

val: '', //显式声明 输入框数据

# 回车输入数据

<input class="new-todo" placeholder="What needs to be done?" @keyup.enter="addItem" v-model="val">

methods: {
    addItem(){
        if(this.val){ //val存在或者非空的时候才会去添加
            this.datas.push({
                //console.log(new Date().getTime());
                id: new Date().getTime(), //为了保持id的唯一
                title: this.val,
                isCompleted: false,
            });
            this.val = ''; //填完数据以后清空输入框的内容
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 显示总计

通过一个方法来计算数组数据的长度

methods: {
 addItem(){
    if(this.val){ //val存在或者非空的时候才会去添加
        this.datas.push({
          //console.log(new Date().getTime());
          id: new Date().getTime(), //为了保持id的唯一
          title: this.val,
          isCompleted: false,
        });
        this.val = ''; //填完数据以后清空输入框的内容
    }
  },
  clearCompleted(){
    let arr = [];
    //遍历datas,如果当前选项是未选中,就把它留下
    this.datas.forEach(function(elem){
      if(!elem.isCompleted){
        arr.push(elem);
      }
    },this)
    this.datas = arr;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

首先绑定计算属性

<span class="todo-count"><strong>{{ legTotal }}</strong> item left</span>

# 选中后显示隐藏completed

通过v-show来控制显示隐藏

<button class="clear-completed" v-show="isShowClear">Clear completed</button>

//在计算属性中
compluted： {
    isShowClear(){
        for(let i=0;i<this.datas.length;i++){
            if(this.datas[i].isCompleted){
              return true
            }
        }
        return false
    }
}

1
2
3
4
5
6
7
8
9
10
11

# 点击clear completed删除选中项

绑定点击事件

<button class="clear-completed" v-show="isShowClear" @click="clearCompleted">Clear completed</button>

在方法中写这个点击事件

clearCompleted(){
    let arr = [];
    //遍历datas,如果当前选项是未选中,就把它留下
    this.datas.forEach(function(elem){
       if(!elem.isCompleted){
          arr.push(elem);
       }
    },this)
    this.datas = arr;
},

1
2
3
4
5
6
7
8
9
10

# 点击X号删除当前项

添加点击事件

<button class="destroy" @click="removeCurrent(index)"></button>

removeCurrent(index){
    this.datas.splice(index,1);
}

1
2
3

# 全选全不选

点击全选如果是true,让数据全部变成非选中状态;

<input id="toggle-all" class="toggle-all" type="checkbox"  @click="checkedAll">

//在方法中
checkedAll(){
    if(this.isCheckedAll){ //全部选中
        this.datas.forEach(elem=>{
           elem.isCompleted = false;
        })
    }else{
        this.datas.forEach(elem=>{
           elem.isCompleted = true;
        })
    }
    this.isCheckedAll = !this.isCheckedAll;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 写在最后

大家可以练习练习。

本文永久链接是：

如需转载，请注明《》转自，原作者