课程大纲:
Vue.js 进击实战:拖拽表单设计器培训
课程使用现在流行的 Vue.js 和 ElementUI 从零开始开发一个可拖拽的表单设计器,项目使用Vue CLI 3 搭建,
从中学习到如何快速创建一个Vue项目,如何实现拖拽,Vue组件封装,Vue高级特性用法,如何打包发布项目到NPM上。
1 Vue Cli 3 使用
2 设计器布局
3 VueDevtools 使用
4 表单、字段属性配置
5 构建生成表单数据
6 绑定动态数据
7 vuedraggable 拖拽组件使用
8 表单对象设置
9 编辑区组件封装
10 Vue 组件对象传递与 sync 修饰符
11 表单数据校验
12 打包发布
1
项目搭建
1.vuecli30 2.elementui
2
vuedraggable 拖拽组件
1.vuedraggable拖拽组件使用
3
开始表单设计器
1.设计器布局
2.表单对象设置
3.VueDevtools使用
4.编辑区组件封装
4
属性配置
1.表单属性配置
2.字段属性配置
3.Vue组件对象传递
4.sync修饰符
5
实现表单渲染
1.获取表单配置的对象
2.构建表单model
3.生成表单数据
6
表单验证
1.表单数据校验
2.正则表达式校验
7
绑定后端数据
1.绑定动态数据
8
打包发布
1.打包设计器
2.发布npm