微光工作室

Appearance

img

T9.Vue的学习 ​

难度系数：其实是简单
难度系数：其实是简单

上一题我们了解了简单框架 vitepress , 现在我们学习热门的Vue框架。

Vue是一个易学易用，性能出色，适用场景丰富的 渐进式 JavaScript 框架, 在本体中, 我们将学习Vue, 并利用他完成一些简单的小项目。

任务 ​

  • 学习Vue的基础用法，涵盖数据绑定、指令、事件处理、条件渲染、列表渲染、计算属性、组件通信、生命周期等等，详细教程见页尾。

    这将是你耗时最长的一步！

  • 创建一个Vue项目

    注意, 这里需要你创建一个Vue项目, 而不是在js文件中引入Vue

    (上网搜搜创建Vue项目的教程)

题目背景 ​

微光工作室的小鱼同学决定做一个钢板表面缺陷检测系统来参加设计大赛，他的任务是根据后端检测模型返回的数据，在原图片上把对应坐标的缺陷标记出来。在做完这个功能后，小组成员们突发奇想：机器检测的缺陷并不一定完整和权威，可不可以让用户来新增、删除、改正缺陷位置呢？

小鱼认真思考了这个问题：要让用户手动纠正或者添加缺陷位置信息，就需要用户精准地计算、输入坐标数据，操作起来实在是太复杂了。能不能让用户动动手指，在屏幕上用鼠标拖拽、自由画圈呢？

要求：根据本题已经给出的组合函数工具（下载和使用方法见下），编写一个画板软件，进行工具的功能测试，让小鱼放心地把这个功能加入到系统中。你需要在自己的组件中完成以下内容：

本题文件点此下载

仔细阅读文件后，在组件中引入文件：

js
import useDrawing from '../composables/useDrawing.js'; // 根据你的实际路径调整，这里我在src/下单独创建了一个"composables"文件夹。
//注意，以下引用只是举例，实际上一个组件需要的绘画工具不一定有这么多
const {
  grid, 
  gridRef, 
  colors,
  selectedColor,
  tool,
  startDrawing,
  draw, 
  stopDrawing,
  resetGrid,
  setEraser,
  setBrush
} = useDrawing();
//这里默认为组合式API，你也可以用其他方式引入
import useDrawing from '../composables/useDrawing.js'; // 根据你的实际路径调整，这里我在src/下单独创建了一个"composables"文件夹。
//注意，以下引用只是举例，实际上一个组件需要的绘画工具不一定有这么多
const {
  grid, 
  gridRef, 
  colors,
  selectedColor,
  tool,
  startDrawing,
  draw, 
  stopDrawing,
  resetGrid,
  setEraser,
  setBrush
} = useDrawing();
//这里默认为组合式API，你也可以用其他方式引入

完成绘画工具选择栏：提供单选工具，包含画笔、橡皮擦和重置画板

完成颜色选择栏：点击像素将其颜色改为当前选中色。

完成画布：如何渲染出一个像素画布？再思考一下需要同时绑定哪些事件？

  • 附加任务 (可以尝试):

    • 可以尝试一下引入网上的组件库
    • 做一些附加功能：在完成以上任务后，如果你想要制作更多功能，试着在函数工具中添加新的工具，并暴露给你的组件。
    • 响应式设计

  • 最后, 将你的vue项目上传到github仓库中, 提交给我们。

在经过Vue的学习后，你是否感受到了使用框架进行模块化开发的便利？试着了解更多的组件库（Element+，EChart等等），改造一下你的博客（如果有时间的话），让你的页面变得更加美观！

完成参考：

（没有附加功能的简易像素画板）

（还可以追求更多功能，参考下面的在线画布网站：）

博客参考 ​

本题提交方式 ​

提交点这里

出题者Q&A方式 ​

QQ：3064517736

邮箱：3064517736@qq.com