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

知识点: 1.vuecli30 2.elementui

lab-classic 实验 2 vuedraggable 拖拽组件

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

lab-classic 实验 3 开始表单设计器

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

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

lab-classic 实验 5 实现表单渲染

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

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

lab-classic 实验 7 绑定后端数据

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

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

课程介绍

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

实验截图

组件属性编辑

图片描述

表单校验

图片描述

获取表单数据

图片描述

先学知识

适合人群

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

课程信息

  • 学习周期:课程有效期 2 个月,2 个月后实验文档一直可以看。高级会员有效期内可一直学习,高级会员到期后课程失效(不能看文档)。
  • 课程价格:当前优惠价格 79 元。
  • 企业团报:可获得更多支持服务,请点击购买咨询
课程教师

gavin 共发布过 1 门课程

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

查看老师的所有课程 >
实验楼楼+
实验楼会员