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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
jQuery JSON实现无刷新三级联动实例探讨
May 28 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
JS和Jquery获取和修改label的值的示例代码
Jan 15 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
Jan 18 Javascript
angular或者js怎么确定选中ul中的哪几个li
Aug 16 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
9种方法优化jQuery代码详解
Feb 04 jQuery
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 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
PHP 字符串分割和比较
2009/10/06 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
js 动态选中下拉框
2009/11/26 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
2017/07/05 NodeJs
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
javascript跳转与返回和刷新页面的实例代码
2019/11/20 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[02:56]DOTA2亚洲邀请赛 VG出场战队巡礼
2015/02/07 DOTA
用python 制作图片转pdf工具
2015/01/30 Python
Python 遍历子文件和所有子文件夹的代码实例
2016/12/21 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python模块future用法原理详解
2020/01/20 Python
scrapy结合selenium解析动态页面的实现
2020/09/28 Python
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
绿化工程实施方案
2014/03/17 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL