// 清除表单校验的提示 if (this.$refs['XXX']) { // 延时执行 this.$nextTick(function () { this.$refs['XXX'].clearValidate(); }) };

前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,

搜索很久,没有发现有关于vue+VeeValidate部分校验的.自己写一个. 主要是两个场景: 1. 校验范围内,所有的字段. 2. 校验全局所有字段.主要方法: 1.validate(fields, scope)      2. validateAll(fields) 场景: 遍历得到多个列表,每一个列表都可以独立保存当前列表.在保存当前列表的时候,需要校验当前列表输入框的合法性. 代码: <div class=" col-xs-12 col-md-6 col-lg-4" v

// 校验保留两位小数金额 export function isMoney(money) { var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/ if (reg.test(money)) { return true } else { return false } }

在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo

要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分为以下4布: 在el-form标签中定义:rules="rules";ref="reference" 在el-form-item定义prop="name"; 在选项data中定义rules校验规则; 在提交方法中检查用户行为 template代码:

Vue刷新页面VueX数据清空了,怎么重新获取? 点击打开视频讲解更详细 在vue中刷新页面后,vuex中的数据就没有了,这时我们要想使用就要重新获取数据了, 怎么在刷新后重新获取数据呢??? 这时我们就可以写个公共的方法,在公共页面(可以是根页面)判断store仓库中数据是否为空,若为空的话,就可以重新请求接口,拉取数据.当然你也可以在每次使用数据前判断是否为空,若为空就重新请求数据,这样的话就时写的代码有的繁琐了. 但这其实存在一个小bug,就是在根页面我们拉取数据的时间段中,当前页面中正好

Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法 1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width=&

表格每行里都有按钮 <el-table-column prop="option" label="操作" align="center" > <template slot-scope="scope"> <el-button size="mini" plain @click="del(scope.$index,scope.row)">删除</el-bu

一. Eslint: 为什么我们要在项目中使用ESLint ESLint可以校验我们写的代码,给代码定义一个规范,项目里的代码必须按照这个规范写. 加入ESLint有非常多的好处,比如说可以帮助我们避免一些非常低级的错误,一些格式上的问题导致我们在运行生产环境的时候出现一些不明所以的报错.还有就是在跟团队协作的时候,每个人都保持同一个风格进行代码书写,这样团队内部相互去看别人的代码的时候,就可以更容易的看懂. ESLint实战小技巧全揭秘 1. 局部安装eslint $ npm install

表单验证规则 查看文档:https://blog.csdn.net/weixin_42018790/article/details/80762149 1). el-form增加 :rules="rules" 2). el-form-item 中的label增加属性 prop="名称" 3). data中定义rules:{} 例子: <el-form ref="form" :rules="rules" :model=&qu

参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/post/5c1370365188250f73759a79 Vue表单类的父子组件数据传递:https://juejin.im/entry/5ae32bc75188256717760b13 Vue官方文档:https://cn.vuejs.org/v2/guide/components-custom

启用压缩,让页面加载更快 在我们开发的时候,为了方便调试,我们需要使用源码进行调试,但在生产环境,我们追求的更多的是加载更快,体验更好,这时候我们会将代码中的空格注释去掉,对代码进行混淆压缩,只为了让js,css文件变得更小,加载更快.但只是这样做是不够的,我们还可以做得更极致. gzip是Web世界中使用的最为广泛的文件压缩算法,当前我们使用的大多数服务端(比如nginx)和客户端(比如chrome)都已经支持了这个算法,所以如果我们在打包Vue项目的时候,可以直接将所有的静态资源压缩为gzi

之前对Chrome控制台的console.log()输出没太放心上,其实仔细研究后,对工作效率有显著的提示.看下面的五段代码: console.log(''); console.log(typeof ''); console.log(666); console.log([66,'fet3','ffs']); console.log(undefined); 注意,引号是个空字符串,里面没有空格等. Chrome输出如下: 数字显示是蓝色的,字符串显示是黑色的(本次没有字符串).重点区分的就是空字符

(一)Vue.js的插件应该有一个公开方法:install. 这个方法的第一个参数是Vue构造器,第二个参数是一个可选的选项对象,一般是如下操作: MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, binding, vnode

Vim关于Vue的生态链还是很少,不过凑活凑活还是能用的. 缩进 缩进采用的是两个空格,.vimrc配置: au BufNewFile,BufRead *.html,*.js,*.vue set tabstop=2 au BufNewFile,BufRead *.html,*.js,*.vue set softtabstop=2 au BufNewFile,BufRead *.html,*.js,*.vue set shiftwidth=2 au BufNewFile,BufRead *.htm

1.架构从传统的MVC向REST API+前端MV*迁移 参考链接: http://blog.csdn.net/broadview2006/article/details/8615055 http://blog.csdn.net/u013628152/article/details/42709033 MV*包括:MVC.MVP.MVVM vue.js是MVVM框架 2.Iconmoon制作图标字体 2.1 点击IconMoon App 2.2点击import icons,导入svg图片 2.3选

1.使用getFieldDecorator的rules规则 最简单的方法就是使用getFieldDecorator中的rules验证.rules中定义校验规则,message为校验不通过时的提示文字. {getFieldDecorator('inputContent', { rules: [{ required: true, message: '请输入内容!', }], })( <Input /> )} rules校验规则 参数 说明 类型 默认值 enum 枚举类型 string - len

参考教程 官方回复 ESlint设置 rules: { 'no-multiple-empty-lines': [1, {max: 3}], // 控制允许的最多的空行数量 'vue/script-indent': ['error', 2, {baseIndent: 1}], // 控制js缩进 }, overrides: [ { files: ['*.vue'], rules: { 'indent': 'off' } } ] WebStorm修改配置兼容 File => Setting =>

彻底解决eslint与webstorm针对vue的script标签缩进处理方式冲突问题 2018年12月08日 21:58:26 Kevin395 阅读数 1753   背景不多介绍了,直接上代码. 打开项目根上下的.eslintrc.js,将rules节点中添加以下配置项. rules: { 'vue/script-indent': ['error', 2, {'baseIndent': 1}] } 其中第1个2是指统一缩进2个空格,第2个1是指1倍缩进. 另外需要添加以下节点,与rules同

1.初始化项目 vue init webpack-simple XXXXX(此处为插件名) 使用vue创建一个简单的项目,删除src中除了main.js和app.vue外的文件,清空app.vue中无用内容 插件编写完成 可以本地app.vue先运行一下 是否效果正常 再调整 2.更改配置文件 在index.js内 import headerNavbar from './webappHeader' const headNavbar = { install(Vue, options) { Vue.