【IMWeb训练营作业】 vue.js todo list 作业（写作中...）

数据驱动，就是说。围绕着数据，进行展示，当用户输入的数据发生变化的时候，立刻重新渲染，重新展现数据。所有的监听器，eventhandler 都已经关联好了，只等用户的输入进行触发，框架所有的动作都是以用户的输入为出发点。

数据指的就是用户输入的数据，页面上的其他提示，文本，代码，标签等等，都是框架，都是功能，所有的一切都是为了用户的输入数据服务的。框架就是个容器，盒子，用来装数据的，用来操作数据的。用户的输入数据换个容器，换个盒子一样装，都是可以替代的，唯一不能替代的，就是用户的输入数据，必须保护好用户的数据，以数据为中心。

v-cloak<style>[v-cloak] { display: none; }</style>

用来防止插值在没有赋值的时候闪现。

<header class="header"><h1 v-show="!todos.length">无所事事</h1><h1 v-show="todos.length">任务清单</h1><input class="new-todo" autofocus autocomplete="off" placeholder="我要..." v-model="newTodo" @keyup.enter="addTodo"></header>

输入回车后添加任务

就本app的逻辑来说，新添加的任务，应该排在最上面，之前添加的应该排在最下面。搜索了一下，不用push，用unshift。

 addTodo: function () {      var value = this.newTodo && this.newTodo.trim()      if (!value) {        return      }      this.todos.unshift({        id: todoStorage.uid++,        title: value,        completed: false      })      this.newTodo = ''    },

参考文献：

官方文档

https://cn.vuejs.org/v2/examples/todomvc.html