Vue及其插件库常见问题汇总 && 常用正则表达式

1.
req: data中都数据发生改变,但是视图并不发生改变;
reason: vue监听不到数据类型较为复杂的数据,
solve: this.$set(),使用该方法强制更新该条数据

2.
req: 当页面加载本地静态图片时,若图片相对路径在data种存放(即@)页面不显示(最好不要用绝对路径,不然打包上线路径会更改)
solve: 使用require引入
例如:imgUrl:require("@static/images/rps/reciveOrder.png"),

3.
req: elementui分页bug,修改样式 自定义class,在这个类下修改默认样式

4.
req: vue打印功能 不能打印图片
solve: 使用base64或者引用线上图片地址,不要用本地的路径

5.
req: 后端接口请求格式不正确
solve: form格式用qs模块转换 json格式直接传json

6.
req: 代码冲突

7.
req: 子组件修改父组件传递的值,报错
reason: vue遵循单向数据流规则
solve: 子组件修改父组件传递的值后,重新传递给父组件
8.
req el-table 动态列时位置错乱
solve 给每一列加一个key值

9. 0 “” null undefined 均为false 若拿这些值进行一些条件的判断 注意 === 的使用

10 绑定 ref ,需要用这个ref的值,但是有时候页面还没创建就用到会报错
需要先进行判断if(this.$refs.aaa){this.$refs.aaa.clear()}

11 Number("") = 0 ,,,,,,,,真令人吃惊

12.使用地图组件,echarts等,在created中不能初始化图例,需要在mounted中初始化
created中获取到的是data中的属性
mounted中获取到的是dom节点

13.使用elementUI中的日期类组件时,如果在组件中使用了v-if则会导致日期弹出窗错位,将v-if改成v-show即可 获取不到节点


14.this.$parent 可以访问到父组件 上所有的 data(){ 里的数据信息和生命周期方法,methods里的方法 }!

15 el-tree 设置高亮的方法 需要加上setTimeOut;因为节点新加后dom更新了,必须给一个延时才能获取到新的dom

 //设置tree选中
    setCurrentKey(key) {
      setTimeout(() => {
        const store = this.$refs.treeFault.store;
        store.setCurrentNodeKey(key);
        store.currentNodeKey = key;
      }, 200);
    },
let reg = /^(?!.*?_$)[a-zA-Z][a-zA-Z0-9_]*$/g;  // 请输入以英文字母开头,只能包含英文字母、数字、下划线,并且不能以下划线结尾。
let reg = /^(?!.*?_$)[a-zA-Z_][a-zA-Z0-9_]*$/g; //请输入以英文字母或下划线开头,只能包含英文字母、数字、下划线,并且不能以下划线结尾。
let reg = /^(?!.*?_$)[a-zA-Z][a-zA-Z_]*$/g;//请输入以英文字母开头,只能包含英文字母、下划线,并且不能以下划线结尾。
let reg = /^[a-zA-Z][a-zA-Z0-9]*$/g;//请输入以英文字母开头,只能包含英文字母、数字
let reg = /^[a-zA-Z0-9]*$/g;//请输入以英文字母或数字开头,且只能包含英文字母、数字
let reg = /^[a-zA-Z][ A-Za-z]*$/g;//请输入以英文字母开头,只能包含英文字母、空格,且不能以空格结尾
const reg = /^[0-9a-zA-Zu4e00-u9fa5]{1,}$/;//请输入名称,由数字字母或汉字组成
let reg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])d{8}$/;//请输入正确的手机号
let reg = /^((0d{2,3}-d{7,8})|((13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])d{8}))$/;//请输入正确的手机号或固话号码
let reg = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/;//请输入正确的邮箱
 let reg = /^.*(?=.{8,20})(([a-zA-Z]+[0-9]+)|([0-9]+[a-zA-Z]+)|([a-zA-Z]+[`~!@#$%^&*()-_=+\|[{}];:'",<.>/?]+)|([`~!@#$%^&*()-_=+|[{}];:'",<.>/?]+[a-zA-Z]+)|([0-9]+[`~!@#$%^&*()-_=+\|[{}];:'",<.>/? ]+)|([`~!@#$%^&*()-_=+\|[{}];:'",<.>/?]+[0-9]+))[a-zA-Z0-9`~!@#$%^&*()-_=+\|[{}];:'",<.>/?]*$/;//请输入8至20位密码,包含大小字母、数字、特殊字符至少两种字符组合。
var pattern = /^d{1,4}.?d{0,1}$/;//小数点后最多只能输入一位
let pattern = /^-?[1-9]d*.?d*|0.d*[1-9]d*|0$/;//请输入正确的浮点数
let reg = /(2(5[0-5]{1}|[0-4]d{1})|[0-1]?d{1,2})(.(2(5[0-5]{1}|[0-4]d{1})|[0-1]?d{1,2})){3}/g;//请输入正确的IP地址
const reg = /^[-+]?(0?d{1,5}.d{1,8}|1[0-7]?d{1}.d{1,2}|180.0{1,8})$/;//请输入正确的经度
const reg = /^[-+]?([0-8]?d{1}.d{1,8}|90.0{1,8})$/;//请输入正确的纬度
 
 

1.let regChinese = new RegExp("[\u4E00-\u9FFF]+", "g"); //判断是否包含汉字 只要包含汉字就为true,并不是都为汉字
5.let reg = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)+$/; //邮箱
6.let reg = /^[0-9a-zA-Z]{1,}$/ //请输入公司编码,由数字或字母组成
8.let reg = /^d{1,2}$/; //请输入层级好,层级号为小于等于两位数的数字
9.let reg = /^[A-Za-z0-9()[]!-*/#$%+<=>~&|^?:]+$/g; //计算器
10.var reg = /^[a-zA-Z][a-zA-Z0-9_]{0,}[a-zA-Z]{0,}$/g; 请输入以英文字母开头,只能包含英文字母、数字下划线,且不能以下划线结尾
11 let reg = /^[a-zA-Z]{2}$/; //由两位英文字母组成
12let reg = /^[+]{0,1}(d+)$|^[+]{0,1}(d+.d+)$/ //正数 (只能书正整数或者小数)
13let ref = /^(([^0][0-9]+|0)$)|^(([1-9]+)$)|^(([1-9]{1}d*)|(0{1}))(.d{0,1})$/; //由整数或者小数组成,小数后保留一位
14 let reg=/^(-|+)?d+(.d+)?$/ 由正数或者负数组成(1,-1,1.2,-1.2)

原文地址:https://www.cnblogs.com/wangqi2019/p/14229598.html