IMWeb训练营-VUE-ToDoApp

最新推荐文章于 2017-04-25 11:48:05 发布

NC1995

最新推荐文章于 2017-04-25 11:48:05 发布

阅读量288

点赞数

分类专栏： VueJS

本文链接：https://blog.csdn.net/NC1995/article/details/70255749

版权

VueJS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

时间太赶，简单写一个。

HTML结构

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcss.com/normalize/6.0.0/normalize.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
  </head>
  <body>
  <div id="app">
    <div class="todo-box">
      <p>{{ message }}</p>
      <input 
      v-on:keyup.enter="addTodo"
      v-model="newTodo"
      type="text"
      name="todo"
      value=""
      placeholder="What need to be done?" />
    </div>

    <div class="todo-content">
      <ul>
        <li v-for="item in todos">
          <div class="todo-item">
            <input type="checkbox">
            <label> {{item.task}}</label>
          </div>
          </li>
      </ul>
    </div>
  </div>
  </body>
  <script src="https://cdn.bootcss.com/vue/2.2.6/vue.js"></script>
</html>

CSS

<style>
      #app{
        width: 100%;
      }
      .todo-box{
        text-align: center;
      }

      .todo-box p{
        font-size: 30px;
      }

      .todo-box input{
        padding: 0 20px;
        font-size: 24px;
        outline: none;
        width: 300px;
        height: 50px;
        line-height: 50px;
      }

      .todo-content{
        font-size: 24px;
        width: 344px;
        margin: 0 auto;
        height: auto;
      }

      .todo-content ul{
        list-style: none;
        margin: 0;
        padding: 0;  
      }

      .todo-item{
        width: 344px;
        height: 50px;
        line-height: 50px;
        background: blueviolet;
        border: 1px solid slategray;
      }
    </style>

JavaScript

  // localStorage persistence
  var STORAGE_KEY = 'todos-vuejs-2.0'
  var todoStorage = {
    fetch: function() {
      var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
      todos.forEach(function(todo, index) {
        todo.id = index
      })
      //
      todoStorage.uid = todos.length
      return todos
    },
    save: function(todos) {
      localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
    }
  }
  // app Vue instance
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Vue Todo App',
      newTodo: '',
      todos: todoStorage.fetch()
    },
    methods: {
      addTodo: function(){
        // 检测无效输入
        var value = this.newTodo && this.newTodo.trim()
        if (!value) {
          return
        }
        this.todos.push({
          task: this.newTodo
        })
        this.newTodo = ''
      }
    }
  })