原生 html 的编写,dom 事件的处理等
.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" />
使用 json schema 生成表单