用Vue实现一个To Do List项目

用Vue实现一个To Do List项目

看再多不如多动手,那么先从简单的项目做起。

走,抄起键盘干。

今天给大家带来就是用Vue2.3 实现一个To Do List项目。

在这里只分享学习过程中的接触到的点,其他请看源码。可以直接点击访问到官网API节点,以下提到的API官网会有更详细的介绍。

API

data

Vue 实例的数据对象

methods

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。

v-model

在data中定义变量,监听<input>标签的值。

v-on

绑定事件监听器。

可以用@代替。

v-on:keyup.enter:指按回车键事件

@click:指鼠标点击事件

值得一提的是我在码的过程中遇到了冒泡,Vue提供了一个很好的解决方案,那就是.stop,直接跟在后面使用即可。

v-show

根据表达式之真假值,切换元素的 display CSS 属性。

v-showv-if的区别和使用场景官网有介绍,有兴趣可以去阅读。传送门

v-for

此指令之值,必须使用特定语法 alias in expression ,为当前遍历的元素提供别名。

v-bind

用于动态地绑定一个或多个特性,或一个组件 prop 到表达式。

源码

template

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="app">
<h1 class="title">{ To Do List }<small class="by">by Zong</small></h1>
<div class="list-wrapper">
<div class="input-group">
<input class="form-control" type="text" name="list" v-model="newTodo" v-on:keyup.enter="addTodo">
<span class="input-group-addon" @click="addTodo"><span class="glyphicon glyphicon-plus btn-add"></span></span>
</div>
<p class="help-block help-note">来添加你的备忘录吧!</p>
<ul class="nav nav-pills list-title" role="tablist" @click="reversetodo(todoflag)"><li role="presentation" class="active"><a href="#">未完成 <span class="badge">{{todos.length}}</span></a></li></ul>
<ul v-show="todoflag">
<li v-for="(todo, index) in todos" class="list-item" @click.stop="haveDo(index)">
<p class="list-text" v-bind:title="todo.text">{{todo.text}}<span class="glyphicon glyphicon-remove btn-del" @click.stop="removeTodo(index)"></span></p>
</li>
</ul>
<ul class="nav nav-pills list-title" role="tablist" @click="reversehavedo(havedoflag)"><li role="presentation" class="active"><a href="#">已完成 <span class="badge">{{havedos.length}}</span></a></li></ul>
<ul v-show="havedoflag">
<li v-for="(todo, index) in havedos" class="list-item" @click.stop="unDo(index)">
<p class="list-text" v-bind:title="todo.text"><span class="through">{{todo.text}}</span><span class="glyphicon glyphicon-remove btn-del" @click.stop="removeUndo(index)"></span></p>
</li>
</ul>
</div>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
export default {
data () {
return {
newTodo: '',
things: '',
todoflag: true,
havedoflag: false,
todos: [],
havedos: []
}
},
methods: {
addTodo: function () {
let text = this.newTodo.trim()
if (text) {
this.todos.push({text: text})
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
},
removeUndo: function (index) {
this.havedos.splice(index, 1)
},
haveDo: function (index) {
this.things = this.todos[index].text
this.todos.splice(index, 1)
this.havedos.push({text: this.things})
this.things = ''
},
unDo: function (index) {
this.things = this.havedos[index].text
this.havedos.splice(index, 1)
this.todos.push({text: this.things})
this.things = ''
},
reversetodo: function (val) {
this.todoflag = !val
},
reversehavedo: function (val) {
this.havedoflag = !val
}
}
}

CSS

1
2
3
4
@import '/gallery/gallery/static/normalize-css/normalize.css';
@import '/gallery/gallery/static/bootstrap/dist/css/bootstrap.min.css';

...

这里引入CSS并不是使用<style>标签,而是依赖于css-loader,直接使用@import即可。

代码真的很节俭,很干净易懂。

GitHub仓库地址

# Vue

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×