vue 动态表单开发方法案例详解_vue.js

来源:脚本之家  责任编辑:小易  

每个vue实例都是独立的,只能够通过id(ref或者创建时的返回值)来访问。方法1.你这个组件可以独立起来,直接插入(不通过app组件)到dom中的指定位置。在拦截器的上级作用域定义,保证每次触发拦截器,访问到的是同一个实例方法2.你把这个组件挂载到window对象上面方法3 给loading定义id,通过样式控制我用的方法3,不过加了请求数量控制(因为是直接挂载到app上面的,所以没有用try)www.zgxue.com防采集请勿采集本网。

本文实例讲述了vue 动态表单开发方法。分享给大家供大家参考,具体如下:

使用vue.js构造modal组件的方法是使用 v-model 指令:v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型它自动选取正确的方法更新元素。比如,多个勾选框,绑定到同一个数组:Jack

概要

动态表单指的是我们的表单不是通过vue 组件一个个编写的,我们的表单是根据后端生成的vue模板,在前端通过vue构建出来的。主要的思路是,在后端生成vue的模板,前端通过ajax的方式加载后端的表单模板,权限数据和表单数据,在前端使用vue进行构建出来。

如果是在父附件中,可以通过ref component> 在父组件中 this.$refs.ref1 在子组件中通过 this.$parent获取父组件

表单渲染过程。

Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted:function

实现步骤

$sth->execute();result=$sth->fetchAll();print_r($result);dsn=null;} catch(PDOException$e){ echo 'Connection failed:'.$e->getMessage();dsn=null;

1.在前端开发表单组件,比如用户组件,文本输入组件。

vue将数据绑定到组件的原理如下:当实例化一个Vue构造函数,会执行 Vue 的 init 方法,在 init 方法中主要执行三部分内容,一是初始化环境变量,而是处理 Vue 组件数据,三是解析挂载组件。

在平台中我们可以看到我们开发的组件。

组件的开发在第三篇有介绍。

我们定义的组件和后台配置的权限相关。

我们每个组件都定义了: permission: 权限对象 permissionkey:权限对应的key

2.手机端模板代码

手机端模板是通过表单BO元数据生成的,我们可以在后端编辑手机端模板,我们现在看一下简单的手机表单VUE的模板。

<script>// 表单公式计算var formulas_2400000001371061={};// 表单日期计算var dateCalcs_2400000001371061={};//实体扩展JSONvar extJson_2400000001371061={};//验证规则var validRule_2400000001371061={"main":{"age":{"vtype":"length:50"},"name":{"vtype":"length:50"},"mobile":{"vtype":"length:50"}}};</script><yd-popup v-model="showUserDialog" position="center" width="100%"> <rx-sysuser :single="singleUser" ref="sysUser" v-on:ok="selectUser" v-on:cancel="closeUserDialog()"></rx-sysuser></yd-popup><yd-popup v-model="showGroupDialog" position="center" width="100%"> <rx-sysgroup :single="singleGroup" ref="sysGroup" v-on:ok="selectGroup" v-on:cancel="closeGroupDialog()"></rx-sysgroup></yd-popup><div class="div-form"> <div class="caption"> simpleform </div> <div class="form-container"> <div class="form"> <div class="form-title"> name </div> <div class="form-input"> <rx-input v-model="data.name" permissionkey="name" vtype="length:50" :readonly="readonly" :permission="permission.main"></rx-input> </div> </div> <div class="form"> <div class="form-title"> age </div> <div class="form-input"> <rx-input v-model="data.age" permissionkey="age" vtype="length:50" :readonly="readonly" :permission="permission.main"></rx-input> </div> </div> <div class="form"> <div class="form-title"> mobile </div> <div class="form-input"> <rx-input v-model="data.mobile" permissionkey="mobile" vtype="length:50" :readonly="readonly" :permission="permission.main"></rx-input> </div> </div> </div></div>

这个表单中:

我们可以看到我们自定义的组件,包括数据,权限部分,验证规则部分。

3.后端提供的数据部分。

我们可以看下后端提供的数据:

[{ "result": true, "msg": "", "type": "", "formKey": "simpleform", "content": "<script>// 表单公式计算\r\nvar formulas_2400000001371061={};\r\n// 表单日期计算\r\nvar dateCalcs_2400000001371061={};\r\n//实体扩展JSON\r\nvar extJson_2400000001371061={};\r\n//验证规则\r\nvar validRule_2400000001371061={\"main\":{\"age\":{\"vtype\":\"length:50\"},\"name\":{\"vtype\":\"length:50\"},\"mobile\":{\"vtype\":\"length:50\"}}};</script><yd-popup v-model=\"showUserDialog\" position=\"center\" width=\"100%\"><rx-sysuser :single=\"singleUser\" ref=\"sysUser\" v-on:ok=\"selectUser\" v-on:cancel=\"closeUserDialog()\"></rx-sysuser></yd-popup><yd-popup v-model=\"showGroupDialog\" position=\"center\" width=\"100%\"><rx-sysgroup :single=\"singleGroup\" ref=\"sysGroup\" v-on:ok=\"selectGroup\" v-on:cancel=\"closeGroupDialog()\"></rx-sysgroup></yd-popup><div class=\"div-form\">\r\n\t<div class=\"caption\">simpleform</div>\r\n\t<div class=\"form-container\">\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tname\t\t\t\t</div>\r\n\t\t\t\t<div class=\"form-input\">\r\n\t\r\n\t\t\t\t<rx-input v-model=\"data.name\" permissionkey=\"name_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\"></rx-input>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tage\t\t\t\t</div>\r\n\t\t\t\t<div class=\"form-input\">\r\n\t\r\n\t\t\t\t<rx-input v-model=\"data.age\" permissionkey=\"age_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\"></rx-input>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t\t<div class=\"form\">\r\n\t\t\t\t<div class=\"form-title\">\r\n\t\t\t\t\tmobile\t\t\t\t</div>\r\n\t\t\t\t<div class=\"form-input\">\r\n\t\r\n\t\t\t\t<rx-input v-model=\"data.mobile\" permissionkey=\"mobile_form\" vtype=\"length:50\" :readonly=\"readonly\" :permission=\"permission.main\"></rx-input>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t</div></div>\r\n\t", "permission": "{\"main\":{\"age\":{\"require\":false,\"right\":\"w\"},\"name\":{\"require\":false,\"right\":\"w\"},\"mobile\":{\"require\":false,\"right\":\"w\"}}}", "jsonData": { "age": "", "name": "", "mobile": "" }, "description": "simpleform", "viewId": "2400000001371078", "boDefId": "2400000001371061", "timeStamp": "1523799818000", "params": {} }]

这里看到后端返回的数据主要包括: content :表单内容 permission:表单权限 jsonData:表单数据

4.通过vue 将表单进行渲染

步骤:

1.将html放到容器中。

2.使用vue 将数据和模版渲染到容器中。

希望本文所述对大家vue.js程序设计有所帮助。

可以用 v-on 指令监听 DOM 事件:Greet绑定了一个单击事件处理器到一个方法 greet。下面在 Vue 实例中定义这个方法:var vm=new Vue({el:'#example',data:{name:'Vue.js'},在 `methods` 对象中定义方法methods:{greet:function(event){方法内 `this` 指向 vmalert('Hello '+this.name+'!')`event` 是原生 DOM 事件alert(event.target.tagName)}}})也可以在 JavaScript 代码中调用方法vm.greet()/->'Hello Vue.js!'内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue2 中如何实现动态表单增删改查实例
  • 基于vue+elementui实现动态表单的校验功能(根据条件动态切换校验格式)
  • vue构建动态表单的方法示例
  • 详解vue+element的动态表单,动态表格(后端发送配置,前端动态生成)
  • 策略模式实现 vue 动态表单验证的方法
  • 使用vue生成动态表单
  • 使用vue动态生成form表单的实例代码
  • vue中动态绑定表单元素的属性方法
  • vue element动态渲染、移除表单并添加验证的实现
  • vue+element实现动态生成新表单并添加验证功能
  • vue form表单动态添加组件实战案例
  • vue2.0 datepicker使用方法
  • vue cli3创建项目部署到tomcat 使用ngrok映射到外网
  • vue项目中如何引入icon图标
  • vue使用$emit时,父组件无法监听到子组件的事件实例
  • vue项目关闭eslint校验
  • vue中$refs, $emit, $on, $once, $off的使用详解
  • 在vue中根据光标的显示与消失实现下拉列表
  • vue-cli脚手架-bulid下的配置文件
  • vue 实时监听窗口变化 windowresize的两种方法
  • vue中的无限循环代码解析
  • vue.js中怎样用onload事件
  • 请问vue的拦截器的方法里面,如何获取某个vue实例对象?
  • 如何利用Vue.js库中的v-model绑定表单中的数据
  • vue 使用组件时,怎么调用实例私有的方法
  • vue.js组件怎么调用父实例中的方法
  • vue.js 如何获取某个组件实例?
  • vue同时调用一个组件2次如何数据隔绝
  • vue router 怎么给component实例绑方法
  • 使用vue文件和render函数时,怎样动态绑定父组件的数据
  • vue使用template注册组件,组件怎么获得实例数据
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.jsvue2 中如何实现动态表单增删改查实例基于vue+elementui实现动态表单的校验功能(根据条件动态切换校验格式)vue构建动态表单的方法示例详解vue+element的动态表单,动态表格(后端发送配置,前端动态生成)策略模式实现 vue 动态表单验证的方法使用vue生成动态表单使用vue动态生成form表单的实例代码vue中动态绑定表单元素的属性方法vue element动态渲染、移除表单并添加验证的实现vue+element实现动态生成新表单并添加验证功能vue form表单动态添加组件实战案例vue2.0 datepicker使用方法vue cli3创建项目部署到tomcat 使用ngrok映射到外网vue项目中如何引入icon图标vue使用$emit时,父组件无法监听到子组件的事件实例vue项目关闭eslint校验vue中$refs, $emit, $on, $once, $off的使用详解在vue中根据光标的显示与消失实现下拉列表vue-cli脚手架-bulid下的配置文件vue 实时监听窗口变化 windowresize的两种方法vue中的无限循环代码解析vue引用js文件的多种方式(推荐)简单理解vue中props属性vue.js常用指令汇总(v-if、v-fovue元素的隐藏和显示(v-show指令vue 进阶教程之v-model详解vue props用法详解(小结)vue之父子组件间通信实例讲解(pr使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式又一款mvvm组件 构建自己的vue组件(2)浅谈elementui中switch回调函数change的参详解vue 2.6 中 slot 的新用法vue中使用webpack别名的方法实例详解vue element table 表格请求后台排序的方vue实现tab切换外加样式切换方法vuex 入门教程vue.js实现单选框、复选框和下拉框示例vue-router模式和钩子的用法vue不操作dom实现图片轮播的示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved