Simple Vue But Powerful JS
在现在 Angular和React大行其道的JS世界，其实我更钟爱的是 Vue.js 。
本文并不是意在比较三者的好坏，而是用 Vue 来写一个Todo Web应用，没错，重复来造一下经典的轮子。
还是先来预览图
编写HTML代码
当然这个Todo的重点并不是重在HTML和CSS，所以过程中直接使用Bootstrap，于是我们在todo.html中直接写上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tasks</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/app.css"> </head> <body> <div class="container"> <div id="tasks"> <form v-on="submit: addTask"> <div class="form-group"> <input v-model="newTask" class="form-control" placeholder="I need to..."></input> </div> <button class="btn btn-primary"> Add Task </button> </form> <!-- The List of Todos --> <div v-show="tasks.length"> <h1>Tasks ({{ tasks.length }})</h1> <ol class="list-group"> <li v-repeat="task: tasks" class="list-group-item" > <span>{{ task.body }}</span> </li> </ol> </div> </div> </div> <script src="js/vue.min.js"></script> <script src="js/todo.js"></script> </body> </html> 编写js代码
再来就是最开始的app.js代码：
new Vue({ el: '#tasks', data: { tasks: [{ "body":"Fix the bug", "completed":false }], newTask: '' }, methods: { } }); 以上的todo.js中是最基本的Vue组成部分，分为 el ， data 和 methods 三大部分。 el 是Vue绑定DOM元素的声明方式，在一帮的应用中，你可以直接用css选择器的语法来选择，比如你可以直接写：
el: 'body' 这就是绑定了 <body> 标签及其子元素。
data部分就是Vue的数据部分的声明，这里的tasks是一个数组， newTask 我们声明为一个空字符串，因为 newTask 通过HTML中的 v-model="newTask" 进行了数据绑定，请注意，这是双向的：也就是说，一旦input里输入字符，n ewTask 的值也会实时地变化。
methods部分自然就是我们的方法了，在HTML代码中的 form 表单里我们为表单提交的时候绑定了一个方法：
v-on="submit: addTask" Vue默认通过 v-on 来为元素绑定事件，等号后面第一个为事件类型，第二个为触发的方法名称。你也可以绑定各种各样的事件， click ， dbclick 等。但现在我们先来写 addTask 方法：
methods: { addTask: function(e) { e.preventDefault(); if ( ! this.newTask) return; this.tasks.push({ body: this.newTask, completed: false }); this.newTask = ''; } } 方法自然是放在 methods 部分，声明方式跟js一样。addTask方法首先阻止了form表单的默认行为（提交到服务器），然后通过 if ( ! this.newTask) return; 判断用户是否在input中输入了内容，如果没有输入，则直接返回，不会添加新的task。如果用户确实有输入，则将用户输入的部分作为task的 body 部分，通过
this.tasks.push({ }); 新增一个task，最后我们将 newTask 再次设为空字符串，因为这样用户在提交或者按下回车之后，input里的输入框才会重新变为空的。
v-repeat
一旦新增了一个task，我们可以通过 v-repeat 来将task输出到浏览器上：
<li v-repeat="task: tasks" class="list-group-item"> <span>{{ task.body }}</span> </li> 这里 v-repeat 后面的语法可以用 for ... in ... 来理解，比如这里的就是 for task in tasks
到这里，我们的简单的Todo App就完成了，这几行代码就可以实现添加task了，效果如开头的预览图。
先写到这里，明天再来实现task的 编辑 ， 删除 等功能。
Happy Hacking
正文到此结束
热门推荐
相关文章
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
