課程大綱：

Vue.js 進擊實戰(zhàn)：拖拽表單設計器培訓

課程使用現(xiàn)在流行的 Vue.js 和 ElementUI 從零開始開發(fā)一個可拖拽的表單設計器，項目使用Vue CLI 3 搭建，

從中學習到如何快速創(chuàng)建一個Vue項目，如何實現(xiàn)拖拽，Vue組件封裝，Vue高級特性用法，如何打包發(fā)布項目到NPM上。

1 Vue Cli 3 使用

2 設計器布局

3 VueDevtools 使用

4 表單、字段屬性配置

5 構(gòu)建生成表單數(shù)據(jù)

6 綁定動態(tài)數(shù)據(jù)

7 vuedraggable 拖拽組件使用

8 表單對象設置

9 編輯區(qū)組件封裝

10 Vue 組件對象傳遞與 sync 修飾符

11 表單數(shù)據(jù)校驗

12 打包發(fā)布

1
項目搭建

1.vuecli30 2.elementui

2
vuedraggable 拖拽組件

1.vuedraggable拖拽組件使用

3
開始表單設計器

1.設計器布局

2.表單對象設置

3.VueDevtools使用

4.編輯區(qū)組件封裝

4
屬性配置

1.表單屬性配置

2.字段屬性配置

3.Vue組件對象傳遞

4.sync修飾符

5
實現(xiàn)表單渲染

1.獲取表單配置的對象

2.構(gòu)建表單model

3.生成表單數(shù)據(jù)

6
表單驗證

1.表單數(shù)據(jù)校驗

2.正則表達式校驗

7
綁定后端數(shù)據(jù)

1.綁定動態(tài)數(shù)據(jù)

8
打包發(fā)布

1.打包設計器

2.發(fā)布npm