前端 Vue 基本功自测
目的
下面都是一些考察 vue 使用的题目, 能写出来不一定能找到工作, 但是不会写, 证明你没有学会 vue.
题目
- 编写一个计数器的功能,并能够实现加减操作。
- 编写表格,并实现分页功能。要求使用 element-ui 的表格组件,表格内容先写死一百条假数据。
- 编写一个导航栏,并能够实现在不同页面之间的跳转。要求使用 vue-router 嵌套路由实现。并在跳转之间传递和获取参数。
- 编写购物车功能,预先写好假数据,并能够实现删除商品、数量调整等功能。要求使用 Vuex 管理共享数据。
- 编写留言板功能。要求使用 Axios 发送 HTTP 请求获取留言数据,并能够实现新增留言、删除留言等功能。(下面有数据模拟说明)
- 编写一个 Vue2 组件,实现一个简单的日历功能。要求使用 element-ui 的日期选择器组件,并能够动态传入默认日期、日期范围功能。
配套数据
附上使用 json-server 模拟留言板接口的方法
- 安装json-server:
npm install -g json-server
- 创建一个名为
db.json
的文件,用于存储模拟的留言数据。在项目根目录下创建这个文件,并添加一些初始数据:
{
"messages": [
{ "id": 1, "text": "第一条留言" },
{ "id": 2, "text": "第二条留言" }
]
}
- 启动json-server来模拟后台数据:
json-server --watch db.json --port 3000
这将在端口3000上启动json-server,并使用db.json
文件中的数据。
以下是用于留言板功能的基本接口文档,这些接口是与json-server模拟的后台数据进行交互的。
获取留言列表
- URL:
GET /messages
- 描述: 获取所有留言的列表
- 响应示例:
[
{
"id": 1,
"text": "第一条留言"
},
{
"id": 2,
"text": "第二条留言"
}
]
添加新留言
- URL:
POST /messages
- 描述: 添加新留言
- 请求体:
{
"text": "新留言内容"
}
- 响应示例:
{
"id": 3,
"text": "新留言内容"
}
删除留言
- URL:
DELETE /messages/:id
- 描述: 删除指定ID的留言
- 示例:
DELETE /messages/2
- 响应示例:
{}
这些接口允许你通过HTTP请求来获取留言列表、添加新留言和删除指定ID的留言。