vue项目一些实用技巧总结

文章开头第一句加入：本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一 空格占位符

   {{ "\xa0" }}

参考链接：blog.csdn.net/weixin_5036…

blog.csdn.net/wangooo/art…

二 动态赋值

	let testData = {
					key: 'keyNum',
					test: 'testKy',
					demo: "demoTest"
				}
				for (const key in testData) {
					const [ret] = [key]
					console.log(ret, "ret");//这里ret会动态赋值了，分别是key,test,demo
					console.log(testData[key],"ret")
				}

三 空参数判断

let value=undefined;
    //为空参数判断提示
    if (['', undefined, null].indexOf(value) >= 0) {
        alert("不能为空，请检查")
    }

四 数组传输参数格式

if (['indices', 'brackets', 'repeat', 'comma'].indexOf(arrayFormat) == -1) arrayFormat = 'brackets'

参考文档 www.cnblogs.com/imgss/p/120…

五 日期补0 操作

/**
 * @description 日期的月或日补零操作
 * @param {String} value 需要补零的值
 */
function padZero(value) {
	return `00${value}`.slice(-2)
}

六 uview-ui 中有各种怪验证方法

在 test.js 文件里

/**
 * 是否数组
 */
function array(value) {
    if (typeof Array.isArray === 'function') {
        return Array.isArray(value)
    }
    return Object.prototype.toString.call(value) === '[object Array]'
}

/**
 * 验证是否包含某个值
 */
function contains(value, param) {
    return value.indexOf(param) >= 0
}

/**
 * 只能是字母或者数字
 */
function enOrNum(value) {
    // 英文或者数字
    const reg = /^[0-9a-zA-Z]*$/g
    return reg.test(value)
}

/**
 * 只能输入字母
 */
function letter(value) {
    return /^[a-zA-Z]*$/.test(value)
}

/**
 * 金额,只允许2位小数
 */
function amount(value) {
    // 金额，只允许保留两位小数
    return /^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value)
}

/**
 * 是否车牌号
 */
function carNo(value) {
    // 新能源车牌
    const xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
    // 旧车牌
    const creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
    if (value.length === 7) {
        return creg.test(value)
    } if (value.length === 8) {
        return xreg.test(value)
    }
    return false
}

/**
 * 验证整数
 */
function digits(value) {
    return /^\d+$/.test(value)
}

/**
 * 验证身份证号码
 */
function idCard(value) {
    return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
        value
    )
}

/**
 * 验证电子邮箱格式
 */
function email(value) {
    return /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)
}

/**
 * 验证手机格式
 */
function mobile(value) {
    return /^1[23456789]\d{9}$/.test(value)
}

/**
 * 验证日期格式
 */
function date(value) {
    if (!value) return false
    // 判断是否数值或者字符串数值(意味着为时间戳)，转为数值，否则new Date无法识别字符串时间戳
    if (number(value)) value = +value
    return !/Invalid|NaN/.test(new Date(value).toString())
}

七 uniApp中自定义组件

新建组件目录

然后在目录下新建 props.js 和组件.vue

props.js文件格式

export default {
    props: {
        
    }

在组件.vue目录中引入 props.js 文件

import props from "./props.js";

在export default中混入

export default {
    name: "u-input",
    mixins: [uni.$u.mpMixin, uni.$u.mixin, props],

样式写法

如果class是直接写则用下拉线条(__),如果是方法控制则用横线(--)

写法如下

.chy-box{
	border: 1px solid red;
	display: flex;
	justify-content: space-between;
	align-items: center;
	&__left{ color: red;
    	flex: 8;
		background: burlywood;
		&--bgcolor{
			background: #fff;
			border-radius: 20rpx;
			margin: 10rpx;
		}
	}
	&__right{
		flex: 4;
		color: aqua;
	}
}

• computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
• 计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新。
• watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
• watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

参考www.cnblogs.com/zqlym/p/160…

八 解构参数

data() {
			return {
			  num:"num2",
			  ceshi:'ceshi2',
			  xd:'xd222',
			  innerValue:"bigInnerValue"
			}
		},
            
const { num, ceshi, xd, innerValue } = this;
console.log(num,ceshi,xd,innerValue,"innerValue");    //这里可以获得value值        

九 样式相关

	.u-col-0 {
		width: 0;
	}

	.u-col-1 {
		width: calc(100%/12);
	}

	.u-col-2 {
		width: calc(100%/12 * 2);
	}

	.u-col-3 {
		width: calc(100%/12 * 3);
	}

	.u-col-4 {
		width: calc(100%/12 * 4);
	}

	.u-col-5 {
		width: calc(100%/12 * 5);
	}

	.u-col-6 {
		width: calc(100%/12 * 6);
	}

	.u-col-7 {
		width: calc(100%/12 * 7);
	}

	.u-col-8 {
		width: calc(100%/12 * 8);
	}

	.u-col-9 {
		width: calc(100%/12 * 9);
	}

	.u-col-10 {
		width: calc(100%/12 * 10);
	}

	.u-col-11 {
		width: calc(100%/12 * 11);
	}

	.u-col-12 {
		width: calc(100%/12 * 12);
	}