小白分享：我的一次Vue学习非寻常之路（章二）

本文主要是介绍小白分享：我的一次Vue学习非寻常之路（章二），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

导读：坦白讲，我是Java服务端研发，只知道Vue这么个前端编程语言，未曾任何学习过，仅仅是个小白。但为何突然学习Vue呢，这得益于一次需求研发，无奈前端资源紧张，恰这次需求实现是面向运营端，非C端用户，产品可以接受自己自测，毕竟初期也仅是他负责这个模块的间断性周期数据维护。鉴于此，我尝试着是否可以自己实现这个模块，毕竟虽然不懂，但是可以模仿其他模块，有示例可以参考，实在搞不定也可以请教前端指教一番。鉴于此，花费几天完成该模块的功能实现（包括表格、表单、表单验证、弹出框等等），鉴于此，写此篇回顾自己的非寻常学习路线。

1、实践案例

在实现相关功能中，总会遇到相关交互上的体验设计，譬如联动效果、表单验证等等，借助于毕竟java出身，有一定编程语言基础，况且曾经也业余的开发过相关前端，毕竟那都是早期的jQuery，或者Bootstrap了，那就顺便介绍相关实践案例吧。

1.1、联动效果

譬如实现，倘若选择【否】那就隐藏下面两个元素。怎么搞呢，想必传统我们采取把下面两行放在一个div中，然后设置其display:none，既然思路有了，那就搞呗。

<template lang="jade">.amount-configel-form(label-width='180px', :model="formData", :rules="rules", ref="form")el-form-item(label="是否限额", prop="amountLimited")el-radio-group(v-model="formData.amountLimited")el-radio(v-for="item in amountLimitedList", :key="item.code", :label="item.code") {{item.desc}}div(v-if="formData.amountLimited == 1")el-form-item(label="单笔限额", prop="singleLimit")el-input(type="text", v-model.trim="formData.singleLimit", placeholder="仅支持正整数", :maxlength="11")el-form-item(label="单日限额", prop="dailyLimit")el-input(type="text", v-model.trim="formData.dailyLimit", placeholder="仅支持正整数", :maxlength="11")                  el-form-itemel-button(type="primary", @click="submitForm") 保存el-button(type="default", @click="closeDialog") 关闭
</template>

如上代码，我们可以发现，我们可以借助于vue的v:if指令，通过对formData.amountLimited的值改变从而控制div的display属性值。而formData.amountLimited的值，通过v-model指令注册给上面的radio元素绑定值，从而实现radio切换控制formData.amountLimited值的变化，进一步控制div的display属性。

1.2、form自定义校验

从上图我们可以看到，我们想要实现数字校验。

通过查看Element UI文档，照着示例，摸索。代码如下：

data() {var checkNumber = (rule, value, callback) => {console.log(value)if (!value) {return callback(new Error(rule.name + '不能为空'));}else if(!(/^\d*$/.test(value))){return callback(new Error(rule.name + '仅支持正整数'))}else{return callback()}};return {formData: {amountLimited: "",singleLimit: "",dailyLimit: "",},rules: {amountLimited: [{required: true,message: "请选择",}],singleLimit: [{required: true,message: "仅支持正整数",trigger: "blur"},{name:"单笔限额",validator: checkNumber,trigger: "blur"}],dailyLimit: [{required: true,message: "仅支持正整数",trigger: "blur"},{name:"单日限额",validator: checkNumber,trigger: "blur"}],},amountLimitedList: []};

我们通过定义rules，设置每个字段的校验属性，其中required控制字段小红星效果，通过validator函数，自定义检验。

扩展阅读：https://element.eleme.cn/#/zh-CN/component/form

1.3、TimePicker组件默认值

如上图，当我们选择时间维度时，时间范围有默认值。

<template lang="jade">.time-configel-form(label-width='180px', :model="formData", :rules="rules", ref="form")el-form-item(label="是否限时", prop="timeLimited")el-radio-group(v-model="formData.timeLimited")el-radio(v-for="item in timeLimitedList", :key="item.code", :label="item.code") {{item.desc}}div(v-if="formData.timeLimited == 1")el-form-item(label="时间维度", prop="timeClassify")el-radio-group(v-model="formData.timeClassify")el-radio(v-for="item in timeClassifyList", :key="item.code", :label="item.code" @change="changeTimeClassify(item.code)") {{item.desc}}el-form-item(label="时间范围")<el-time-select v-model="formData.timeRangeStart" :picker-options="{start: '00:00',step: '00:01',end: '24:00'}" placeholder="选择时间"></el-time-select>  ~  <el-time-select v-model="formData.timeRangeEnd" :picker-options="{start: '00:00',step: '00:01',end: '24:00'}" placeholder="选择时间"></el-time-select>el-form-itemel-button(type="primary", @click="submitForm") 保存el-button(type="default", @click="closeDialog") 关闭
</template>

我们通过@change 指令为radio绑定事件

changeTimeClassify(code){this.formData.timeRangeStart = '00:00';this.formData.timeRangeEnd = '24:00';}

其实对于TimePicker ，倘若我们设置步长比如15分钟，但是就会导致无法定义自己的时间，无奈只得设置步长为00:01。

拓展阅读：https://element.eleme.cn/#/zh-CN/component/time-picker

2、归纳总结

总而言之，如果理解了Vue的设计思想，我们就可以很容易实现自己的功能，这相对于jQuery的操作Dom元素，差异还是蛮大的，最主要区别在于我们通过为HTML元素，借助于Vue的相关指令，控制HTML的属性值变化，从而实现HTML元素的相关交互效果，如果理解了数据的双向绑定思想，我们就可以快速实现一个自己模块了。

下面的是我的公众号二维码图片，欢迎关注，或公众号搜索【秋夜无霜】。

这篇关于小白分享：我的一次Vue学习非寻常之路（章二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---