前端 Vue 基本功自测

目的

下面都是一些考察 vue 使用的题目, 能写出来不一定能找到工作, 但是不会写, 证明你没有学会 vue.

题目

• 编写一个计数器的功能，并能够实现加减操作。
• 编写表格，并实现分页功能。要求使用 element-ui 的表格组件，表格内容先写死一百条假数据。
• 编写一个导航栏，并能够实现在不同页面之间的跳转。要求使用 vue-router 嵌套路由实现。并在跳转之间传递和获取参数。
• 编写购物车功能，预先写好假数据，并能够实现删除商品、数量调整等功能。要求使用 Vuex 管理共享数据。
• 编写留言板功能。要求使用 Axios 发送 HTTP 请求获取留言数据，并能够实现新增留言、删除留言等功能。(下面有数据模拟说明)
• 编写一个 Vue2 组件，实现一个简单的日历功能。要求使用 element-ui 的日期选择器组件，并能够动态传入默认日期、日期范围功能。

配套数据

附上使用 json-server 模拟留言板接口的方法

1. 安装json-server：

npm install -g json-server

2. 创建一个名为db.json的文件，用于存储模拟的留言数据。在项目根目录下创建这个文件，并添加一些初始数据：

{
  "messages": [
    { "id": 1, "text": "第一条留言" },
    { "id": 2, "text": "第二条留言" }
  ]
}

3. 启动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的留言。

---

Tags

1. vue
2. 开发
3. 前端

---

Backlinks

• 伟's 博客首页