Vue.js 入门：从零开始做一个极简 To-Do 应用
Vue.js 入门：从零开始做一个极简 To-Do 应用
写作时间：2019-12-10
版本信息：Vue.js 2.6.10
官网文档：https://cn.vuejs.org/
前言
学习 Vue 的最佳方式之一是「请立刻查阅 Vue.js 的官方文档」，简单看一下「基础」部分，配合本文食用更佳。
在开始写代码之前，首先去 BootCDN 上找一下目前最新版本完整版的 Vue.js 的链接：https://cdn.bootcss.com/vue/2.6.10/vue.js ，与压缩版（vue.min.js）不同，它（vue.js）包含完整的警告和调试模式。
为了尽可能地保持简单，本文不使用 Vue CLI 来构建项目，而是像用 jQuery 开发那样，直接在 HTML 文件里引入 Vue.js 文件。
如果文章中的代码有不明白的地方，我的建议是：直接抄代码，看效果，看文档，改代码，看效果，如此循环往复。
声明式渲染
了解一下 Vue 官网的基础部分的「声明式渲染」部分 ，我们可以创建如下代码：
此时预览 index.html 文件，会看到页面上出现 Hello, Vue.js! 的文字。
组件结构
我们把要做的 To-Do App 拆分成一个个小组件，目前先来一个组件 TodoList 和一个它的子组件 TodoItem 。通过熟悉 官网上的「组件基础」教程 我们来继续做下去。
TodoList 组件
先来做一下 TodoList 组件。我把代码都粘贴过来，方便取用学习。
此文章之后的代码都是在下面这段代码的基础上修改，到时我就只放修改的部分代码了，有必要的时候我会把全部代码贴出来。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js To-Do App</title>
</head>
<body>
<div id="app">
<todo-list></todo-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component('todo-list', {
data: function() {
return {}
},
template:`
<ul>
<li>Todo A</li>
<li>Todo B</li>
<li>Todo C</li>
</ul>
`
})
new Vue({
el: '#app',
data: {}
})
</script>
</body>
</html>
需要注意的内容：
- 组件的代码需要放到 new Vue 之前
- 定义组件的 data 时，data 必须是一个函数
- template 中的代码必须要有个外层容器包裹（最外层只能有一个元素）
改写 TodoList 组件，添加所需数据：
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js To-Do App</title>
</head>
<body>
<div id="app">
<todo-list v-bind:todos="todos"></todo-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<div class="todo-item" v-for="todo in todos">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button" v-show="!todo.done">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
</div>
`
})
new Vue({
el: '#app',
data: {
todos: [
{
title: '待办 1',
content: '上课之前要抄一下同学的作业。',
done: false
},
{
title: '待办 2',
content: '课间和朋友去球场打篮球。',
done: true
},
{
title: '待办 3',
content: '英语课上故意调皮一下让美丽的英语老师注意到然后提问我。',
done: false
},
{
title: '待办 4',
content: '放学后赶紧跑，绝对不能听某些人的话：「放学后你给我等着」。',
done: false
}
]
}
})
</script>
</body>
</html>
需要注意的内容：
- 数据在 new Vue 的 data 中定义，需要传递给 TodoList 组件，使用 v-bind 指令，该代码表示将 todos 变量传递给 TodoList 组件的 todos 属性。
<div id="app">
<todo-list v-bind:todos="todos"></todo-list>
</div>
- TodoList 组件定义 props 用来接收传递过来的 todos ，在组件的 template 中可以直接使用。这里我们使用 v-for 来循环渲染数据。
Vue.component('todo-list', {
// ... 省略 ...
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<div class="todo-item" v-for="todo in todos">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button" v-show="!todo.done">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
</div>
`
})
虽然写了给某些元素写了 class 但是还没有写任何样式，现在打开 index.html 预览是这样的：
TodoItem 组件
现在我们把 class 为 todo-item 的元素提取出来作为单独的组件，除此之外我们什么也不做，预览效果与刚才一致。
Vue.component('todo-item', {
props: ['todo'],
template: `
<div class="todo-item">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button" v-show="!todo.done">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
`
})
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo">
</todo-item>
</div>
`
})
接下来加入编辑的功能
Vue.component('todo-item', {
props: ['todo'],
data: function() {
return {
isEditing: false
}
},
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">编辑 ✏</div>
<div class="button" v-show="!todo.done">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
<div class="todo-item" v-show="isEditing">
<div class="form">
<div class="field">
<label>Title</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>Content</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="closeForm">保存并关闭编辑模式</button>
</div>
</div>
</div>
`,
methods: {
showForm: function() {
this.isEditing = true
},
closeForm: function() {
this.isEditing = false
}
}
})
添加的代码做了这几点：
- 在 TodoItem 组件中添加编辑按钮，并添加一个 isEditing 的属性用来区分是否是编辑状态。
- 添加编辑模式时 TodoItem 组件的代码
- 添加并绑定打开和关闭编辑模式的事件
删除 Todo
Vue.component('todo-item', {
// ... 省略 ...
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">编辑 ✏</div>
<div class="button delete" v-on:click="deleteTodo(todo)">删除 ×××</div>
<div class="button" v-show="!todo.done">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
// ... 省略 ...
</div>
`,
methods: {
// ... 省略 ...
deleteTodo(todo) {
this.$emit('delete-todo', todo)
}
},
})
在 TodoItem 组件中添加删除按钮，并添加删除的方法，这个方法会向父组件 TodoList 发送一个 delete-todo 事件以及要删除的 todo 数据。
父组件 TodoList 中添加一个删除事件，并监听来自子组件的 delete-todo 事件。
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo" v-on:delete-todo="deleteTodo"
>
</todo-item>
</div>
`,
methods: {
deleteTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos.splice(index, 1)
}
},
})
新增 Todo
新建一个 AddTodo 组件，将组件添加到 TodoList 组件中。
Vue.component('add-todo', {
data: function() {
return {
isAdding: false,
todo: {
title: '',
content: '',
done: false
}
}
},
template: `
<div>
<div v-on:click="showForm">添加 +++</div>
<div class="form" v-show="isAdding">
<div class="field">
<label>标题</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>内容</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="saveForm">保存</button>
<button class="close" v-on:click="closeForm">取消</button>
</div>
</div>
`,
methods: {
showForm() {
this.isAdding = true
},
saveForm() {
if (this.todo.title && this.todo.content) {
this.$emit('add-todo', this.todo)
this.closeForm()
}
},
closeForm() {
this.isAdding = false
this.todo = {
title: '',
content: '',
done: false
}
}
}
})
Vue.component('todo-list', {
// ... 省略 ...
template:`
<div class="todo-list">
<add-todo v-on:add-todo="addTodo"></add-todo>
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo" v-on:delete-todo="deleteTodo"
>
</todo-item>
</div>
`,
methods: {
// ... 省略 ...
addTodo(todo) {
this.todos.push(todo)
}
},
})
AddTodo 组件默认只显示一个添加按钮，当点击添加按钮的时候显示需要填写的表单，填写完成后点击保存，将向父组件 TodoList 发送一个 add-todo 事件以及表单信息。
父组件 TodoList 监听 add-todo 事件并在事件触发后向 todos 数据中新增一条由 AddTodo 组件发送的数据。
完成 Todo
TodoItem 组件中，点击完成按钮，发送 complete-todo 事件给父组件 TodoList 。
父组件 TodoList 监听 complete-todo 事件并在事件触发后从 todos 数据中要完成的那条数据标记为已完成。
Vue.component('todo-item', {
// ... 省略 ...
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">编辑 ✏</div>
<div class="button delete" v-on:click="deleteTodo(todo)">删除 ×××</div>
<div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
......
`,
methods: {
// ... 省略 ...
completeTodo(todo) {
this.$emit('complete-todo', todo)
}
}
})
Vue.component('todo-list', {
// ... 省略 ...
template:`
<div class="todo-list">
......
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo"
v-on:delete-todo="deleteTodo"
v-on:complete-todo="completeTodo"
>
</todo-item>
</div>
`,
methods: {
// ... 省略 ...
completeTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos[index].done = true
}
}
})
至此，一个基本功能还算健全的 To-Do App 就完成了。
完整代码
最终的完整代码如下，可以直接拿走自己运行预览一下。
<!DOCTYPE html>
<html lang="zh-hans">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js To-Do App</title>
</head>
<body>
<div id="app">
<todo-list v-bind:todos="todos"></todo-list>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.component('add-todo', {
data: function() {
return {
isAdding: false,
todo: {
title: '',
content: '',
done: false
}
}
},
template: `
<div>
<div v-on:click="showForm">添加 +++</div>
<div class="form" v-show="isAdding">
<div class="field">
<label>标题</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>内容</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="saveForm">保存</button>
<button class="close" v-on:click="closeForm">取消</button>
</div>
</div>
`,
methods: {
showForm() {
this.isAdding = true
},
saveForm() {
if (this.todo.title && this.todo.content) {
this.$emit('add-todo', this.todo)
this.closeForm()
}
},
closeForm() {
this.isAdding = false
this.todo = {
title: '',
content: '',
done: false
}
}
},
})
Vue.component('todo-item', {
props: ['todo'],
data: function() {
return {
isEditing: false
}
},
template: `
<div>
<div class="todo-item" v-show="!isEditing">
<div class="title">{{todo.title}}</div>
<div class="content">{{todo.content}}</div>
<div class="button edit" v-on:click="showForm">编辑 ✏</div>
<div class="button delete" v-on:click="deleteTodo(todo)">删除 ×××</div>
<div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">点击完成</div>
<div class="button" v-show="todo.done">已完成</div>
</div>
<div class="todo-item" v-show="isEditing">
<div class="form">
<div class="field">
<label>Title</label>
<input type="text" v-model="todo.title" />
</div>
<div class="field">
<label>Content</label>
<input type="text" v-model="todo.content" />
</div>
<button class="close" v-on:click="closeForm">保存并关闭编辑模式</button>
</div>
</div>
</div>
`,
methods: {
showForm: function() {
this.isEditing = true
},
closeForm: function() {
this.isEditing = false
},
deleteTodo(todo) {
this.$emit('delete-todo', todo)
},
completeTodo(todo) {
this.$emit('complete-todo', todo)
}
},
})
Vue.component('todo-list', {
data: function() {
return {}
},
props: ['todos'],
template:`
<div class="todo-list">
<add-todo v-on:add-todo="addTodo"></add-todo>
<p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
<p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
<todo-item
v-for="(todo, index) in todos" v-bind:key="index"
v-bind:todo="todo"
v-on:delete-todo="deleteTodo"
v-on:complete-todo="completeTodo"
>
</todo-item>
</div>
`,
methods: {
deleteTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos.splice(index, 1)
},
addTodo(todo) {
this.todos.push(todo)
},
completeTodo(todo) {
const index = this.todos.indexOf(todo)
this.todos[index].done = true
}
},
})
new Vue({
el: '#app',
data: {
todos: [
{
title: '待办 1',
content: '上课之前要抄一下同学的作业。',
done: false
},
{
title: '待办 2',
content: '课间和朋友去球场打篮球。',
done: true
},
{
title: '待办 3',
content: '英语课上故意调皮一下让美丽的英语老师注意到然后提问我。',
done: false
},
{
title: '待办 4',
content: '放学后赶紧跑，绝对不能听某些人的话：「放学后你给我等着」。',
done: false
}
]
}
})
</script>
</body>
</html>
（完）
Vue.js 入门：从零开始做一个极简 To-Do 应用的更多相关文章
- Vue.js入门
之前一直用的是jQuery,jQuery手动操作DOM导致性能不够好,因为DOM修改导致的页面重绘.重新排版!重新排版是用户阻塞的操作,同时,如果频繁重排,CPU使用率也会猛涨! Vue.js是数据驱 ...
- Spring Boot（5）一个极简且完整的后台框架
https://blog.csdn.net/daleiwang/article/details/75007588 Spring Boot(5)一个极简且完整的后台框架 2017年07月12日 11:3 ...
- 借助腾讯云的云函数实现一个极简的API网关
借助腾讯云的云函数实现一个极简的API网关 Intro 微信小程序的域名需要备案,但是没有大陆的服务器,而且觉得备案有些繁琐,起初做的小程序都有点想要放弃了,后来了解到腾讯云的云函数,于是利用腾讯云的 ...
- 免费的 Vue.js 入门与进阶视频教程
这是我免费发布的高质量超清「Vue.js 入门与进阶视频教程」. 全网最好的.免费的 Vue.js 视频教程,课程基于 Vue.js 2.0,由浅入深,最后结合实际的项目进行了最棒的技术点讲解,此课程 ...
- Vue.js入门（一）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta htt ...
- 使用Vue+Django+Ant Design做一个留言评论模块
使用Vue+Django+Ant Design做一个留言评论模块 1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下 ...
- RELabel ： 一个极简的正则表达式匹配和展示框架
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...
- Vue.js 入门教程
Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html
- 前端知识(一)04 Vue.js入门-谷粒学院
目录 一.介绍 1.Vue.js 是什么 2.初识Vue.js 二.基本语法 1.基本数据渲染和指令 2.双向数据绑定 3.事件 4.修饰符 5.条件渲染 6.列表渲染 7.实例生命周期 一.介绍 1 ...
随机推荐
- Java管理Cookie增删改查操作。
Cookie属性 了解这几个属性之后,就知道如何进行Cookie的操作了. name Cookie的名称. value Cookie的值. maxAge Cookie的失效时间,有以下几种值,默认为- ...
- redis-3.0.0安装
redis-3.0.0安装 前言 redis是常用的no-sql数据库,常用于缓存数据,同时,他也可以持久化数据.他是C语言开发的,所以安装的时候需要编译. 单机版redis yum install ...
- Java面试之String、StringBuffer和StringBuilder的区别和原理
首先我们先来谈谈String: String 对象一旦创建,其值是不能修改的,如果要修改,会重新开辟内存空间来存储修改之后的对象,即修改了 String 的引用. 因为 String 的底层是用数组来 ...
- HTTP Request 422 Unprocessable Entity
最近接了一个接口,在调用接口时,返回这个错误代码. 百度到的解释是:请求格式正确,但是由于含有语义错误,无法响应. 开始一直在纠结,语义错误到底是什么?对照了无数次参数名,传参方式,无解. 后来用Fi ...
- tomcat manager详解
Tomcat Manager是Tomcat自带的.用于对Tomcat自身以及部署在Tomcat上的应用进行管理的web应用.Tomcat是Java领域使用最广泛的服务器之一,因此Tomcat Mana ...
- Codeforces 1188A 构造
题意:给你一颗树,树的边权都是偶数,并且边权各不相同.你可以选择树的两个叶子结点,并且把两个叶子结点之间的路径加上一个值(可以为负数),问是否可以通过这种操作构造出这颗树?如果可以,输出构造方案.初始 ...
- A new session could not be created. (Original error: Could not find a connected Android device.)
1 终端执行adb devices 查看知否看到设备 1 查看手机 的开发者 usb调试功能是否打卡 2 重启电脑,cmd 执行 adb devices 重新打开
- Session的load和get方法区别是什么？
①如果没有找到符合条件的记录,get方法返回null值,而load方法会抛出异常: ②get方法直接返回实体类对象,load方法返回实体类对象的代理: ③在Hibernate3之前,get方法只在一级 ...
- Oracle修改数据文件路径
更改Oracle数据文件名及数据文件存放路径 SQL> select * from v$dbfile; FILE# NAME---------- ------------------- ...
- Vue学习笔记【30】——Vue路由（watch属性的使用）
考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变: <div id="app&quo ...