vue-hook-form使用详解


Posted in Javascript onApril 07, 2017

vue-hook-form

用于处理form请求,获取formData。以便于将form请求转成ajax/fetch请求

安装

npm install vue-hook-form

使用

VUE版本:1.x
必须在vue-cli生成的webpack模板环境中使用

一、注册&配置组件

// 这里使用在main.js中全局注册来示例
import vue from 'vue'
import hookForm from 'vue-hook-form'
// 配置全局form表单序列化之前的hook
hookForm.beforeSerialize = (vm, next) => {
 // vm: 对应的hookForm vm实例
 // next:继续执行
 // 你可以在此处执行表单校验
}
// 配置全局form提交前的hook
hookForm.onSubmit = request => {
 // request:包含了本次请求的基本信息
 // 你可以在此处执行表单校验或使用ajax来提交本次请求
}
vue.component('hook-form', hookForm)

Request对象:

{
 url: '请求地址',
 body: '请求参数',
 method: '请求方法',
 vm: '对应的hookForm vm实例'
}

二、vue文件中使用

<template>
 <hook-form action="users" :on-submit="onSubmit" :before-serialize="beforeSerialize">
 <input name="name">
 <input name="age">
 <button>提交</button>
 </hook-form>
</template>
<script>
 export default {
 methods: {
  // 局部hook
  beforeSerialize (vm, next) {
  // next:继续执行
  // 你可以在此处执行表单校验
  },
  onSubmit (request) {
  // request:包含了本次请求的基本信息
  // 你可以在此处执行表单校验或使用ajax来提交本次请求
  }
 }
 }
</script>

配置

onSubmit

form提交前的全局hook。

beforeSerialize

form表单序列化之前的全局hook。一般用于校验表单,但此时无须form表单序列化的时候。也便于在触发onSubmit之前更改form表单内容

json

Request.body是否转成json格式,默认为url字符串。默认:false

hookForm.onSubmit = request => {
 // request.body为url字符串格式
 // 形如:name=张三&age=18
}
// 配置Request.body为json格式
hookForm.json = true
hookForm.onSubmit = request => {
 // request.body为json格式
}

Props

action:请求地址
method:请求方法。默认:post
onSubmit:form提交前的局部hook
beforeSerialize: form表单序列化之前的局部hook
json:Request.body是否转成json格式(优先使用局部json配置)。默认:false
disabled:禁用

关于disabled

你可以通过使用该选项来防止form的多次提交

hookForm.onSubmit = request => {
 // 禁止form提交
 request.vm.disabled = true
 // 在ajax请求或其他相关操作之后再释放禁用。
 doSomeThing()
 .then(() => {
  request.vm.disabled = false
 })
}

常见问题

全局onSubmit中提交了请求,返回了请求。这些操作如何通知到对应的组件?

Request对象中有一个vm属性,这是hookForm组件本身的vue实例。父子组件通信
也就是说hookForm只是扮演form和ajax之间的桥梁,负责传送一下form表单数据。你可以基于它二次封装一个更多功能的form组件

全局hook和局部hook会不会同时触发?

不会。如果存在局部hook,那么优先触发局部,否则才触发全局。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现划词标记+划词搜索功能
Mar 06 Javascript
var与Javascript变量隐式声明
Sep 17 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
Aug 21 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
jQuery EasyUi 验证功能实例解析
Jan 06 Javascript
深入理解Node.js中的进程管理
Mar 13 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 #jQuery
jQuery中map函数的两种方式
Apr 07 #jQuery
You might like
将一维或多维的数组连接成一个字符串的php代码
2010/08/08 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php实现window平台的checkdnsrr函数
2015/05/27 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
PHP编写学校网站上新生注册登陆程序的实例分享
2016/03/21 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
探讨js中的双感叹号判断
2013/11/11 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
Vue-路由导航菜单栏的高亮设置方法
2018/03/17 Javascript
JavaScript实现更换背景图片
2019/10/18 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
基于python中的TCP及UDP(详解)
2017/11/06 Python
python框架中flask知识点总结
2018/08/17 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
简单了解Python变量作用域正确使用方法
2020/06/12 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
Django中template for如何使用方法
2021/01/31 Python
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
逻辑链路控制协议
2016/10/01 面试题
竞聘书怎么写,如何写?
2014/03/31 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
北京爱情故事观后感
2015/06/12 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技
mysql创建存储过程及函数详解
2021/12/04 MySQL