1.当一个图片与一行文字需要水平垂直居中时,给图片img设置属性vertical-align:middle;
2.ToFixed()四舍五入为指定小数
(parseInt(this.num)*this.pric).toFixed(2).将金额保留两位小数
3.对象字符串之间的转换
对象转字符串 JSON.stringify(obj)
字符串转对象 JSON.parse(str)
4.字符串拼接
(var).join(",")
5.input框只能输入数字的控制
pc οnkeyup=“this.value=this.value.replace(/^(0+)|[^\d]+/g,")" onafterpaste="this.value=this.value.replace(/^(0+)[^\d]+/g,")"
手机端 οninput="this.value=this.value.replace(/\D/g,")"
6.js实现每四位用“:”隔开
var num1="4262079669"
var num2=num1.replace(/(.{4})/g,"$1:")
7.删除数组中指定的某个元素
arr.splice(1,2)表示从第二个开始,删除长度为2
arr.splice(0,1)表示删除第一个元素
8.获取当前年与日的时间
let date=new Date();
let Y=date.getFullYear()+'-';
let M=(date.getMonth()+1<10?'0'+(date.getMonth()+1:date.getMonth()+1)+'-';
let D=(date.getDate()<10?'0'+date.getDate():date.getDate())+'-';
let datedata=Y+M+D;
9.js获取前一个月的时间
let dayMonths=[0,31,28,31,30,31,30,31,31,30,31,30,31]
let Y=date.getFullYear();
let M=date.getMonth()+1;
let D=date.getDate();
if(((Y%4)===0)&&((Y%100)!==0)||((Y%400)===0)){
dayMonths[2]=29;
}
if(M-1===0){
Y-=1;
M=12;
}else{
M-=1;
}
D=Math.min(D.dayMonths[M]);
if(M<10){
M='0'+M;
}
if(D<10){
D='0'+D}
this.datastr=Y+'-'+M+'-'+D;
10.vue页面之间传参数
1>参数在url中显示
2>this.$route.params.参数名
3>this.$route.query.参数名
传值段:this.$router.push({path:"/url",query:{res:JSON.stringify(res)}})
接收端 this.data=JSON.parse(this.$router.query.res);
11.判断输入框是否为空
valueEmpty(){
let isEmpty=true
if(this.data.userName==" "||this.data.userName==null){
isEmpty=false
Toast('姓名不能为空')
}else if(this.data.idNo==" "||this.data.idNo==null){
isEmpty=false
Toast('证件号码不能为空')
}else if(this.data.mobilPahone==" "||this.data.mobilPahone==null){
isEmpty=false
Toast(手机号码不能为空')
}
return isEmpty;
}
在方法中判断
函数名(){
if(this.valueEmpty()){
//执行输入不为空的代码
}
}
{
path:'/paramsUrl/:name/:age/:sex',
component:paramsUrl
}
12.substr的用法( 加密手机号或卡号)
let data=6217908500001625652
let data2= (data).substr(0,4)+'****'+'****'+(data).substr(12)
data2=6217********5652
截取卡后四位
let data=6217908500001625652
let data2=(data).substr((data).length-4)
data2=5652
13.vuejs 60s后获取验证码
页面
<label>短信验证码</label>
<input type="text" style="width:130px;" placeholder="请输入短信验证码"v-model="data.identcode" />
<mt-button type="danger" :disabled="disabled" @click="send"> {{content}} </mt-button>
script
data(){
rurn{
disabled:false,
content:'获取验证码',
totaltime:60,
clickCancle:true,
}
}
方法
//验证手机号码部分
send(){
if(!this.clickCancle) return;
this.clickCancle=false;
this.content=this.totaltime+'s后重新发送';
let m=setInterval(()=>{
this.totaltime--;
this.content=this.totaltime+'s后重新发送';
if(this.totaltime==0){
clearInterval(m);
this.content='发送验证码';
this.totaltime=60;
this.clickCancle=true;
}
},1000)
},
14.在给一个列表中的li设置底边线,除了最后一个li
.list li:not(:last-child){
border-bottom: 1px solid #eee;
}
15.date=20150908 转换为2015-09-08
this.date=this.date.substr(0,4)+"-"+this.date.substr(4,2)+"-"+this.date.substr(6,2);
16.var a="2018-09" 输出 a=201809
var b=a.replace(/-/g,"")
17.当input框聚焦时清空input中的value值
id="search" @focus="foucksclick"
方法
foucksclick(){
let search=document.getElementById("search");
search.value=" ";
},
18.金额分割符号
//金额分割符
moneysplit(value){
// value=100.00;
if(!value) return '0.00';
1.let intpart=Number(value).toFixed(0);
2. let intpart=Number(value);
intpart=Math.floor(intpart);
let intpartFormat=intpart.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
let float='.00';
let value2=value.split('.');
if(value2.length==2){
float=value2[1].toString();
if(float.length==1){
return intpartFormat+'.'+float+'0';
}else{
return intpartFormat+'.'+float;
}
}else{
return intpartFormat+float;
}
},
19.身份证的校验
let cardright=/^[1-9]\d{5}(18|19|20)d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/;
20.标题超出规定长度 ,用省略号
style="width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
21.oried属性打不上时用此
style="text-align:center;line-height:middle"
22.在vue项目中,给一个div设置背景的方式 有两种,鼠标点上时给此div设置一个背景颜色
1>以类的方式
页面
<div style=" v-for="item in list1" :key="item.id" :class="choosedata == item.year_month?'active':''" @click="chooseMonth(item)">
</div>
. small-img{display: block;width: 0.25rem;height: 0.25rem;position: absolute;top: 0.07rem;left: 0.2rem;background: url('~@/assets/icon/s_s_part_icon.png');background-size: 100%;}
.active{background: #C9161E;color: #fff;border-radius: 0.1rem;}
.active div{color: #fff;}
.active .small-img{background: url('~@/assets/icon/s_s_part_icon.png');background-size: 100%;}
2>在data中设置
data(){
return{
note:{
backgroundImage:"url("+require("@/assets/icon/nocard.png")+")",
backgroundRepeat:'no-repeat',
backgroundPosition:"center",
backgroundSize:'7.02rem 2.81rem',
},}}
23.判断一个字符串中是否存在一个字符串
string st1="ab";
string st2="abcd";
if(str.indexOf(st1)>=0){
syso("字符串str中包含st1);
}
if(str.indexOf(st2)==-1){
syso("字符串中不包含st2")}
24..flex-orient属性不管用时,在package.json中添加
"iOS>=6",
"Android>4.1",
"Firefox>20"
25.当一条记录与后面的记录的时间不能重复时,需要删除后面添加的那条记录
1》先写第一条记录时
//单个月份
returnDatesingle(v){
this.datetime2 = v;
//单个月份的缴费时间
this.userdate= this.datetime2
//多个月份中的数据
let list=this.personList;
//单个月已经交了的月份
let oldDate=new Date(this.userdate);
let oldYaer=oldDate.getFullYear(),oldMonth=oldDate.getMonth();
let newArr=[],obj={};
for(let i=0;i<list.length;i++){
let newDate=new Date(list[i].favoreevaliduntil);
let newYaer=newDate.getFullYear(),newMonth=newDate.getMonth();
if(newYaer == oldYaer && newMonth ==oldMonth){
MessageBox({
message : "缴纳月份重复,请重新选择",
confirmButtonText : "确定",
}).then(action =>{
if(action == 'confirm'){
this.personList.splice(i,1);
this.personList = [...this.personList];
}
})
}
}
this.personList=[...this.personList]
},
2》当后写后面的记录,两者做判断
//更多月时间
returnDateGet1(v,index){
this.personList[index] = {
...this.personList[index],
favoreevaliduntil : v
}
//缴纳更多月,与已缴月份比较
let list=this.personList;
let oldDate=new Date(this.userdate);
let oldYaer=oldDate.getFullYear(),oldMonth=oldDate.getMonth();
let newArr=[],obj={};
let oldLen=list.length;
for(let i=0;i<list.length;i++){
let newDate=new Date(list[i].favoreevaliduntil);
let newYaer=newDate.getFullYear(),newMonth=newDate.getMonth();
if(newYaer == oldYaer && newMonth ==oldMonth){
MessageBox({
message : "缴纳月份重复,请重新选择",
confirmButtonText : "确定",
}).then(action =>{
if(action == 'confirm'){
this.personList.splice(index,1);
this.personList = [...this.personList];
}
})
}
if(!obj[list[i].favoreevaliduntil]){
newArr.push(list[i])
obj[list[i].favoreevaliduntil] = true
}
}
if(oldLen != newArr.length){
// Toast("日期不能重复!")
MessageBox({
message : "缴纳月份重复,请重新选择",
confirmButtonText : "确定",
}).then(action =>{
if(action == 'confirm'){
this.personList = [...newArr]
this.jsMoney()
}
})
}
this.personList = [...newArr]
},
26.对金额的失焦补点
//金额校验
addAmount(amount){
let regfund = amount;
if(/^([0-9]{1,16}[.][0-9]{2})$/.test(regfund)){
return true;
}else if(/^([0-9]{1,16}[.][0-9]{1})$/.test(regfund)){
this.moneymem = regfund+"0";
return true;
}else if(/^([0-9]{1,16})$/.test(regfund)) {
this.moneymem = regfund+".00";
return true;
}
},
27.mint-ui的swipe轮播,上下数据需要统一时,
<mt-swipe :auto="0" ref="swpie" :showIndicators="false" @change="handlechange" >
<mt-swipe-item class="slide1 leftd" v-for="(item,index) in cardNolist" :key="index" >
<div class="cart note" :style="note" >
</div>
</mt-swipe-item>
</mt-swipe>
//在滑动的函数中,将index传下去,利用index绑定数据
handlechange(index){
this.cardNo=this.cardNolist[index].cardNo
this.queryfive()
},
28.vue项目的相关结构搭建
访问的时候,先进入index.html ,加载页面,加载到div页面时,会自动加载app模块(vue项目中的每一个页面都是一个组件模块)
在app中有 <template> <div id="app" class="app"><router-view /> </div></template> 而<router-view /> 会自动去找路由文件
在router中 import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import {commonMenu} from "../views/menu"
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
linkActiveClass: 'actives',
linkExactActiveClass: 'active',
routes: [
...commonMenu,
{
name: 'demo',
path: '/',
//alias:"/", //别名
component: () => import(/* webpackChunkName: "v_detailHome" */'@/views/demo'),
meta : { title : 'demo' }
},
]
})
这就是整个vue项目的访问过程
总结vue项目中重要的文件夹
index.html (项目的入口文件)
App.vue(项目的总模块)
main.js(项目的公共样式,js,组件等引入的地方
29.re m px
1rem=50px
30.扫一扫
<img @click="scanCode" src="@/assets/images/business-02.png" alt="" class="fr img-size">
在方法中
scanCode(){
let _this = this
//拉起微信扫一扫
wx.ready(function(){
wx.checkJsApi({
jsApiList:['scanQRCode'],
success:function(res){
if(res.checkResult.scanQRCode === true){
wx.scanQRCode({ //微信扫一扫接口
needResult:1,//默认为0,扫描结果由微信处理,1则直接返回扫描结果
scanType:['qrCode','barCode'],//可以指定扫描二维码还是一维码,默认二者都有
success:function(res){
let result = res.resultStr;//当needresult为1时,扫码返回的结果
if(result.indexOf("http") != -1){
let CifNo = result.substring((result.indexOf("?")+1));
result = CifNo;
}
_this.businessCode = result;//赋值给输入框
}
})
}else{
alert('抱歉,当前客户端版本不支持扫一扫');
}
},
fail:function(res){ //检测getNetworkType该功能失效时处理
alert('fail' + res)
}
});
});
wx.error(function(res){
alert("出错了:"+ res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可
})
},
30.限制四位
imgCodeFun(e){
this.imgCode = e.target.value.replace(/[^\d]/g,'');
if(this.imgCode.length>4){
this.imgCode=this.imgCode.substr(0,4)
return ;
}
},
31.返回的字符串中有特殊字符时,可以根据特殊字符截取取值
this.shop_Cate_Names='llnnbbADbvcsl/测试sw01/9999/社区养老驿站/居家养老服务/养老特惠 商户/唐柯(测试)/孙巍测试'
let aa = []
aa =this.shop_Cate_Names.split('/')
截取后的aa=?["llnnbbADbvcsl", "测试sw01", "9999", "社区养老驿站", "居家养老服务", "养老特惠商 户", "唐柯(测试)", "孙巍测试"]
aa =this.shop_Cate_Names.split('/')[0]
aa= llnnbbADbvcsl
复制一个订单号的功能
Vue页面 orderInfo.sub_order_id为待复制的数据
<input type="text" v-model="orderInfo.sub_order_id" id="copyInput" readonly style="height:0px;opacity:0;display:block">
方法clickCopyFun触发复制事件
<li class="flex-justify-align">
<div class="flex-start">
<label>订单编号</label>
<p class="autowrap">{{orderInfo.sub_order_id}}</p>
</div>
<div class="txt-red van-button--danger mainBack pad-lr" @click="clickCopyFun">复制</div>
</li>
Method中的复制方法
clickCopyFun(){
let copyInput = document.getElementById("copyInput")
copyInput.select()
document.execCommand("Copy")
this.$toast("已复制")
}
33.vue项目刷新当前页面的几种方式
1>go(0)和reload()
通过location.reload()或是this.$router.go(0)两种强制刷 新方式,相当于按F5,会出项瞬间的白屏,体验差
2>定义一个空白路由页面,路由跳转到该空白页立马跳回当前页,实现路由刷新。
34.v-if与v-show的区别
最大差别对于dom的操作,v-if会依照条件决定是否将原件渲染至网页上,v-show则是必定会产出原件,但以条件来切换css的显示与否,若以条件改变频率,用v-show来切换更合适
35.解决跨域的六种方法
跨域由于浏览器的同源策略,协议、域名、端口其中一个不一致就会出现
1.JSONP跨域
JSONP(填充式JSON),JSON与JSONP的区别,JSON返回的是一串数据,JSONP返回的是脚本代码,JSONP只支持get请求
JSONP的应用技巧:
在HTML标签里,一些标签比如script、img这样的获取资源的标签是没有跨域限制的
2.CORS跨域
后端修改请求头
header('Access-Control-Allow-Origin:*')
允许访问的地址
header('Access-Control-Allow-Methods:POST,GET')允许访问的方式
3.nginx反向代理
35.html css的一些常用写法
css超出一行显示省略号
给定宽度 width:100px
超出隐藏:overflow:hidden
强制在同一行显示:white-space:nowrap
省略号:text-overflow:ellipsis
36.常见的字体单位
1.em相当于倍,在父元素的基础上增加多少倍
2.rem r是root,始终根据html根元素的大小进行缩放
3.vh 和%单位一致 不同点:%在没有内容的时候设置height:100%不会被撑开,但是vh会撑开
4.vw视窗宽度 1vw=视窗宽度的1% 1vw就是当前屏幕的宽度1%
所以出现50vw比50%大
37.常见的转义字符
> 大于号 <小于号 "双引号 © 版本符号
38.常见css属性
首行缩进 text-indent 2em/2px缩进2个字符
font:italic(normal oblique) blod(bloder更粗) 36px "宋体"
39.浏览器兼容前缀
-moz- 火狐 -webkit-谷歌 safari
-o-Opera -ms- IE