代码拉取完成，页面将自动刷新
通过 JSON 呈现任何组件与定义脚本的实现
使用任何 Vue 组件或 html 元素构建视图
开发 vue 项目时，可能会遇到以下需求场景
普通 JSON 数据虽然可以描述对象的属性与结构，但是对象方法的定义、程序逻辑的实现以及对象属性与数据的关联关系在序列化成 JSON 数据后无法保存，即使将这些定义可以单独序列化成二进制或 base64 格式的数据，但是如果需要开发编辑器编辑配置时，序列化后的数据对象也不好操作。
使用 Vue JSON form 组件可以解决 JSON 格式的这些弊端，组件支持用特定 JSON 对象表示属性值和方法，最终在运行时解析属性转换成真正的值或方法。
现已推出支持 vue3.0 版本
克隆项目，执行
npm install
之后
npm start
转换支持将固定参数 params、表单数据 model、数据源 datasource、数组元素 scope、函数参数 arguments、组件引用 refs 这些数据关联到组件元素属性上实现值的联动
支持绑定值、计算属性、数组、事件定义，将以上数据关联到对象属性上
数据源数据支持远程数据获取、刷新和进行表单提交行为（最新版已经支持对象数据源的数据使用转换结果）
通过监听（watchs）实现数据变化时更新关联数据，实现联动
固定参数（params）: 指那些从表单组件外部传递过来的初始数据，这些数据只能由表单外部操作，在表单内不会有方法改变其属性值
表单数据（model）: 指那些关联了表单组件的值属性，该对象里的属性会随着表单组件的操作交互产生变化也会被监听定义的赋值操作改变，可理解为输出的数据对象
数据源（datasource）: 一方面是指表单内部的固定数据（对象或数组）、通过 http 或 websocket（将来支持）请求后的结果数据 也存在只有交互行为没有返回结果的数据源，例如：html 表单提交
数组元素（scope）: 当绑定或计算属性的结果作为值作用到一个循环呈现的元素时，在子元素里 scope 作为每一项的数据，作为执行绑定值或计算属性参数
函数参数（arguments）: 由于计算属性和事件定义最终转换结果是函数，因此函数 arguments 对象可作为下一级绑定或计算属性的输入
组件引用（refs）
指组件的实例，在组件 fieldOptions 中定义 ref 属性后，可通过 refs 获取组件的实例并使用组件中的方法作为另一个组件的事件处理程序
待更新...
npm i vjform
import Vue from 'vue'
import vjform from 'vjform'
Vue.component('vjform', vjform)
呈现一个简单的表单
template
<template>
<vjform v-model="model" :fields="fields"></vjform>
</template>
script
export default {
data() {
return {
// 数据 model
model: {},
// Vue 组件或 html 元素组成的数组
fields: [
{
component: "input",
// 通过定义 model，显示并响应输入的结果
model: ["firstName"],
// 参考 Vue 关于 render 的 API [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
fieldOptions: {
class: ["form-control"]
attrs: {
placeholder: "输入文本"
}
}
}
]
};
}
};
通过 bind 转换实现将某个值绑定到某个对象的属性上，在值变化时属性值也会保持一致
支持 bind func array on 转换，具体先看 App.vue 里的示例
<template>
<vjform v-model="model" :fields="fields"></vjform>
</template>
script
export default {
data() {
return {
// 数据 model
model: {},
// Vue 组件或 html 元素组成的数组
fields: [
{
component: "input",
model: ["firstName"],
// 参考 Vue 关于 render 的 API [Vue's render functions](https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth)
fieldOptions: {
class: ["form-control"]
attrs: {
placeholder: "输入文本"
}
}
},
{
component: 'p',
fieldOptions: {
domProps: {
// 定义一个转换, 显示 model 的 firstName 属性
innerText: {
$type: 'bind',
$source: 'model.firstName'
}
}
}
},
{
component: 'p',
// 支持特定属性的简易定义，这里同定义 innerText 效果一样
text: {
$type: 'bind',
$source: 'model.firstName'
}
}
]
};
}
};
使用 use 方法对当前项目全局注册功能
import vjform from 'vjform'
import * as bind from './transform/bind'
import fieldOptions from './provider/fieldOptions'
import requestSource from './datasource/request'
import addition from './functional/addition'
vjform.use(
({
datasource, // 数据源
transform, // 转换
provider, // 渲染处理
functional // 功能函数
}) => {
transform(bind.getter, bind.deal)
provider(fieldOptions)
datasource('request', requestSource)
functional('addition', addition)
}
)
组件增加 initialling 方法，可单独对组件使用扩展
<template>
<v-jform
:fields="fields"
v-model="model"
:params="params"
:datasource="datasource"
:components="components"
:listeners="listeners"
:initialling="onInitialling"
></v-jform>
</template>
<script>
export default {
data() {
return {
fields: [],
listeners: [],
model: {},
params: {},
datasource: {},
components: {}
}
},
methods: {
onInitialling({
datasource, // 数据源
transform, // 转换
provider, // 渲染处理
functional // 功能函数
}) {
// 同全局 use
}
}
}
</script>
vjdesign 是 vjform 的可视化设计器
也可访问 gitee 项目
使用了 get set forEach 等 API
从转换或渲染处理中想要改变 model 的值采用发布订阅机制由外层容器组件负责统一更新，分离核心功能值更新对 vue2 的依赖，以便于将来支持 vue3 或 react
基于 v2.5.9 测试，理论上支持高于 v2.4.0 版本
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型