简单表单

原生 html 的编写，dom 事件的处理等

Vue 组件基础

• .vue 文件；指把一个部分业务逻辑的代码，放在一个 .vue 文件中
• 有着 template、script、style 三个部分
• template 部分是组件的模板，用于渲染组件的 dom 结构
• script 部分是组件的逻辑，用于定义组件的行为
• style 部分是组件的样式，用于定义组件的样式
• 生命周期
• 模板引用

表单的组成元素

表单通常包含各种表单项

选项类型

• 输入框
• 单选框（组）
• 复选框（组）
• 开关
• 下拉列表
• 上传容器
• 提交按钮、重置按钮
• …

而这些表单数据的绑定和维护，通常都是 v-model 实现的

v-model 的原理

是 Vue 内置一个指令，用于在表单元素上创建双向数据绑定

• v-model 提供双向绑定的功能，天然表单友好
• v-model 可以实现在原生表单 dom 元素或任意组件之上

v-model 是一个语法糖，提供了简化数据、和 dom 事件的功能

• v-model 在原生 dom 元素上将会被展开为

  <input v-model="value0" />
  <!-- 将会被展开为 -->
  <input :value="value0" @input="value0 = $event.target.value" />
  <input v-model="value0" />
  <!-- 将会被展开为 -->
  <input :value="value0" @input="value0 = $event.target.value" />

• v-model 在自定义组件上将会被展开为

  <custom-input v-model="value1" />
  <!-- 将会被展开为 -->
  <custom-input :modelValue="value1" @update:modelValue="newValue => value1 = newValue" />
  <custom-input v-model="value1" />
  <!-- 将会被展开为 -->
  <custom-input :modelValue="value1" @update:modelValue="newValue => value1 = newValue" />

从零开始封装一个 todo list 表单

使用 UI 表单组件，以 antd-vue 为例

• 使用 antd-vue 构建表单页面

使用 UI 表单组件，实现联动

• 表单项控制其他表单项的显示与隐藏

复杂表单的抽象与封装

使用 json schema 生成表单

• json schema 的结构
• json schema 的使用
• json schema 中的校验

使用 css 微调表单样式

• 行内样式
• class 样式
• bootstrap.css / tailwindcss