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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
解决js正则匹配换行问题实现代码
Dec 10 Javascript
使用jquery修改表单的提交地址基本思路
Jun 04 Javascript
JavaScript中的数组特性介绍
Dec 30 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQuery-onload让第一次页面加载时图片是淡入方式显示
2012/05/23 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
jQuery实现仿腾讯视频列表分页效果的方法
2015/08/07 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
js JSON.stringify()基础详解
2019/06/19 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
精灵市场:Pixie Market
2019/06/18 全球购物
.net面试题
2015/12/22 面试题
年度考核评语
2014/01/19 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
竞选村长演讲稿
2014/04/28 职场文书
连带责任保证书
2014/04/29 职场文书
李敖北大演讲稿
2014/05/24 职场文书
会计求职信
2014/05/29 职场文书
火箭队口号
2014/06/18 职场文书
国家助学金受助感言
2015/08/01 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫