在如今 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里输入字符,newTask
的值也会及时地变化。
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