diff --git a/examples/todomvc/js/app.js b/examples/todomvc/js/app.js index e64f238cb..0f6f8fd78 100644 --- a/examples/todomvc/js/app.js +++ b/examples/todomvc/js/app.js @@ -1,7 +1,10 @@ var app = new Vue({ + // the root element that will be compiled el: '#todoapp', + // a custom directive to wait for the DOM to be updated + // before focusing on the input field. directives: { 'todo-focus': function (value) { if (value) { @@ -11,6 +14,8 @@ var app = new Vue({ } }, + // the `created` lifecycle hook. + // it will be called when the ViewModel instance is created. created: function () { this.filters = { all: function (todo) { todo.completed; return true }, @@ -26,8 +31,13 @@ var app = new Vue({ }).length }, + // data data: { + + // fetch the saved todos from localStorage todos: todoStorage.fetch(), + + // a computed property with custom getter/setter allDone: { $get: function () { return this.remaining === 0 @@ -42,6 +52,8 @@ var app = new Vue({ } }, + // methods that implement data logic. + // note there's no DOM manipulation here at all! methods: { updateFilter: function () {