VueJS 取得 URL 参数值的方法


Posted in Javascript onJuly 19, 2019

先给大家介绍下VueJS取得URL参数

vuejs取得URL中参数的值

 地址:http://localhost:3333/#/index?id=001

结果:001

console.log(this.$route.query.id)

PS:下面给大家介绍下vue自定义表单生成器可根据json参数动态生成表单效果

介绍

form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定。

文档|github

演示项目:开源的高品质微信商城

功能

  • 自定义组件

可生成任何Vue组件

自带数据验证轻

松转换为表单组件

  • 通过 JSON 生成表单
  • 通过 Maker 生成表单
  • 强大的API,可快速操作表单
  • 双向数据绑定
  • 事件扩展
  • 局部更新
  • 数据验证
  • 栅格布局
  • 内置组件17种常用表单组件

对比 1.x

  • 速度更快
  • 体积更小
  • 更强大的全局配置
  • 自定义组件更容易扩展
  • 更容易支持第三方 UI 库
  • 更少的 bug

示例

通过 JSON 创建表单

VueJS 取得 URL 参数值的方法

通过 API 操作表单

VueJS 取得 URL 参数值的方法

@form-create包说明

名称 说明

名称 说明
@form-create/iview iview 版表单生成器
@form-create/element-ui element-ui 版表单生成器
@form-create/core form-create 核心包
@form-create/utils form-create 工具包
@form-create/data 省市区多级联动数据

使用

以element-ui版本为例介绍如何在项目中使用 form-create

安装

npm i @form-create/element-ui

挂载

全局注册

import formCreate form '@form-create/element-ui';
Vue.use(formCreate);

局部挂载

import formCreate form '@form-create/element-ui';
export default {
 components:{
 formCreate:formCreaet.$form()
 }
}

生成表单

<template>
 <form-create v-model="$f" :rule="rule" @on-submit="onSubmit"></form-create>
</template>
export default {
 data () {
 return {
 //表单实例对象
 $f:{},
 //表单生成规则
 rule:[
 {
 type:'input',
 field:'goods_name',
 title:'商品名称'
 },
 {
 type:'datePicker',
 field:'created_at',
 title:'创建时间'
 }
 ]
 };
 },
 methods:{
 onSubmit(formData){
 //TODO 提交表单
 }
 }
};

效果

VueJS 取得 URL 参数值的方法

实例对象 $f

可以通过 $f 快速操作表单,例如:

  • $f.hidden:隐藏指定组件
  • $f.validate:验证表单
  • $f.setValue:修改表单组件的值
  • $f.append:追加表单组件

自定义组件

生成

通过标签生成

{
 type:'el-button',
 name: 'btn',
 props:{
 type:'primary',
 field:'btn',
 loading:true
 },
 children:['加载中']
}

通过模板生成

{
 type:'template',
 name:'btn'
 template:'<el-button :loading="loading">{{text}}<el-button>',
 vm: new Vue({
 data:{
 loading:true,
 text:'加载中'
 }
 })
}

转换为表单组件

自定义组件转换为表单组件后,可通过$f.formData,$f.getValue,$f.setValue,$f.disabled等方法快速操作组件,达到和内置组件相同的效果

预定义

props

在自定义组件内部通过props接收一下属性

  • value表单的值
  • disabled组件的禁用状态

例如:

vm = Vue({ props:{ value:String, disabled:Boolean }})

input 事件

通过input事件更新组件内部的值

当组件值发生变化后,通过 input 事件更新值.例如:

vm.$emit('input',newValue);

挂载自定义组件

要生成的自定义组件必须通过Vue.component方法挂载到全局,或者通过formCreate.component方法挂载

例如:

formCreate.component('TestComponent',component);

或者

Vue.component('TestComponent',component);

生成

表单组件必须定义field属性

JSON

{
 type:'TestComponent',
 value:'test',
 field:'testField',
 title:'自定义组件'
}

Maker

formCreate.maker.create('TestComponent','testField','自定义组件').value('test')

示例

自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同

formCreate.maker.template('<el-button @click="onClick" long :disabled="disabled">计数器-{{num}}</el-button>', new Vue({
 props:{
 //预定义
 disabled:Boolean,
 value:Number,
 },
 data: function () {
 return {
 num: this.value,
 }
 },
 watch:{
 value(n){
 this.num = n;
 }
 },
 methods: {
 onClick: function () {
 this.num++;
 //更新组件内部的值
 this.$emit('input',this.num);
 },
 },
}), 'tmp', '自定义 title').value(100).props('disabled',false)

完整示例

VueJS 取得 URL 参数值的方法

总结

以上所述是小编给大家介绍的vue自定义表单生成器可根据json参数动态生成表单,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
dojo学习第一天 Tab选项卡 实现
Aug 28 Javascript
javascript的push使用指南
Dec 05 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
Feb 20 Javascript
javascript倒计时效果实现
Nov 12 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
AngularJS入门教程之ng-checked 指令详解
Aug 01 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
Vue 实例事件简单示例
Sep 19 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 #Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 #Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 #Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 #Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 #Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 #Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php读取30天之内的根据算法排序的代码
2008/04/06 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
js右键菜单效果代码
2007/07/21 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
JS简单实现无缝滚动效果实例
2016/08/24 Javascript
Javascript 跨域知识详细介绍
2016/10/30 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
Python实现的几个常用排序算法实例
2014/06/16 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
用python与文件进行交互的方法
2018/03/01 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python基于递归解决背包问题详解
2019/07/03 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
Maison Lab荷兰:名牌Outlet购物
2018/08/10 全球购物
锐步香港官方网上商店:Reebok香港
2020/11/05 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
do you have any Best Practice for testing
2016/06/04 面试题
建筑公司文秘岗位职责
2013/11/29 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
微信早安问候语
2015/11/10 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python
把77A收信机改造成收音机
2022/04/05 无线电