【IMWeb训练营作业】Vue TodoList Demo

jackatlas

于 2017-04-20 06:54:46 发布

阅读量407

点赞数 1

本文链接：https://blog.csdn.net/jackatlas/article/details/70254352

版权

效果图：

HTML:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Todo Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
  <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/6.0.0/normalize.min.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>


<div class="main">
  <h3 class="big-title">添加任务</h3>
  <input type="text" class="task-input" placeholder="例如：吃饭睡觉打豆豆" v-model="todo" v-on:keyup.enter="addTodo">
  <ul class="task-count" v-show="list.length">
    <li>{{notCheckedLength}}个任务未完成</li>
    <li class="action">
      <a href="#all" v-bind:class="{active: visibility == 'all'}">所有</a>
      <a href="#unfinished" v-bind:class="{active: visibility == 'unfinished'}">未完成</a>
      <a href="#finished" v-bind:class="{active: visibility == 'finished'}">已完成</a>
    </li>
  </ul>
  <h3 class="big-title">任务列表</h3>
  <div class="task">
    <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
    <ul class="todo-list">
      <li class="todo" v-bind:class="{completed: item.isChecked, editing: item === editingTodo}" v-for="item in filteredList">
        <div class="view">
          <input type="checkbox" class="toggle" v-model="item.isChecked">
          <label v-on:dblclick="editTodo(item)">{{item.title}}</label>
          <button class="destroy" v-on:click="deleteTodo(item)">x</button>
        </div>
        <input
          type="text"
          class="edit"
          v-on:blur="editTodoFinished(item)"
          v-on:keyup.enter="editTodoFinished(item)"
          v-on:keyup.esc="cancelTodo(item)"
          v-focus="editingTodo === item"
          v-model="item.title"
        />
      </li>
    </ul>
  </div>
</div>


<script src="../lib/vue/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>

app.js

var store = {
  fetch: function (key) {
    return JSON.parse(localStorage.getItem(key)) || [];
  },
  save: function (key, value) {
    localStorage.setItem(key, JSON.stringify(value))
  }
}


var filter = {
  all: function (list) {
    return list;
  },
  finished: function (list) {
    return list.filter(function (item) {
      return item.isChecked;
    })
  },
  unfinished: function (list) {
    return list.filter(function (item) {
      return !item.isChecked;
    })
  }
}


var list = store.fetch('todolist');


var vm = new Vue({
  el: '.main',
  data: {
    editingTodo: null,
    formerTitle: '',
    list: list,
    todo: '',
    visibility: 'all'
  },
  methods: {
    addTodo: function (e) {   // 添加任务
      this.list.push({
        title: this.todo,
        isChecked: false
      });
      this.todo = '';
    },
    deleteTodo: function (todo) {
      var index = this.list.indexOf(todo);
      this.list.splice(index, 1);
    },
    editTodo: function (todo) {
      this.formerTitle = todo.title;
      this.editingTodo = todo;
    },
    editTodoFinished: function (todo) {
      this.editingTodo = null;
      this.formerTitle = '';
    },
    cancelTodo: function (todo) {
      todo.title = this.formerTitle;
      this.editingTodo = null;
      this.formerTitle = '';
    }
  },
  computed: {
    notCheckedLength: function () {
      return this.list.filter(function (item) {
        return !item.isChecked
      }).length
    },
    filteredList: function () {
      return filter[this.visibility] ? filter[this.visibility](list) : list;
    }
  },
  directives: {
    focus: {
      update: function (el, binding) {
        if (binding.value == true) {
          el.focus();
        }
      }
    }
  },
  watch: {
    list: {
      handler: function (list) {
        store.save('todolist', list)
      },
      deep: true
    }
  }
});


function watchHashChange () {
  var hash = window.location.hash.slice(1);
  vm.visibility = hash || 'all';
}


watchHashChange();


window.addEventListener('hashchange', watchHashChange);