你将学到的
  • Vue Cli 3 使用
  • 设计器布局
  • VueDevtools 使用
  • 表单、字段属性配置
  • 构建生成表单数据
  • 绑定动态数据
  • vuedraggable 拖拽组件使用
  • 表单对象设置
  • 编辑区组件封装
  • Vue 组件对象传递与 sync 修饰符
  • 表单数据校验
  • 打包发布
课程内容
  共8个章节

知识点: 1.vuecli30 2.elementui

实验 2 vuedraggable 拖拽组件

知识点: 1.vuedraggable拖拽组件使用

实验 3 开始表单设计器

知识点: 1.设计器布局 2.表单对象设置 3.VueDevtools使用 4.编辑区组件封装

知识点: 1.表单属性配置 2.字段属性配置 3.Vue组件对象传递 4.sync修饰符

实验 5 实现表单渲染

知识点: 1.获取表单配置的对象 2.构建表单model 3.生成表单数据

知识点: 1.表单数据校验 2.正则表达式校验

实验 7 绑定后端数据

知识点: 1.绑定动态数据

知识点: 1.打包设计器 2.发布npm

课程介绍

本课程使用现在流行的 Vue.js 和 ElementUI 从零开始开发一个可拖拽的表单设计器,项目使用 Vue CLI 3 搭建,课程讲述了如何快速创建一个 Vue 项目,如何实现拖拽,Vue 组件封装,Vue 高级特性用法,如何打包发布项目到 NPM 上等众多干货。通过详细的例子,由浅入深,一步一步的实现拖拽表单设计器。

效果展示

组件属性编辑

图片描述

表单校验

图片描述

获取表单数据

图片描述

先学课程

适合人群

  • 本课程适用于具有一定前端基础的同学。

课程信息

  • 学习周期:课程有效期 2 个月,2 个月后无法进行在线实验,但可查看文档内容。高级会员有效期内可一直学习,到期后课程失效,且无法查看文档。部分云主机实验环境因成本较高,存在开启次数限制。关于课程退款等相关注意事项说明,请阅读 用户付费协议
  • 版权说明:课程内容为实验楼原创或实验楼在原作者授权下制作。未经书面同意,擅自爬取、转载和再分发课程内容,均将受到严肃追责。
  • 企业团报:企业购买,请点击 企业用户咨询
课程教师

gavin 共发布过 1 门课程

某科技公司高级前端工程师,丰富的项目实战经验,vue-form-making表单设计器作者,GitHub开源社区贡献者。github:https://github.com/GavinZhuLei

查看老师的所有课程 >
实验楼楼+
实验楼会员
会员
开通会员,即刻开始学习
公众号
实验楼学习助手 实验楼订阅号