plus代码闪光点
1. 快速变成 String 格式：
{ stamp: +new Date() }
2. 封装axios请求：
axios.get(this.URI, { params: { }, withCredentials: true //这里表示axios跨域请求携带 cookies }) .then(response => { let rst = response.data; if (rst.msg == '成功' && rst.code == '1000') { callback && callback(rst.rs); } else { errCallback && errCallback(); } }) .catch(error => { errCallback && errCallback(); });
且后端需要配置：
-
Access-Control-Allow-Origin字段必须指定域名，不能为* -
Access-Control-Allow-Credentials为true
3. 循环渲染的item，如果要处理数据，可以使用函数处理，然后再return给 html：
<div v-for="(item, index) in bannerData" :key="index" > <img alt="" :data-src="imgCut(item.pictureUrl, '750x175')" class="nut-img-lazyload" /> </div> { methods:{ imgCut:(item,str){ return item+'str' } } }
此外，注意一下图片懒加载的问题。
4. 给某个不方便设置宽高的蒙层设置 box-shadow 也可以撑满整个屏幕
.guide-line { position: relative; z-index: 1112; box-shadow: 0 0 0 2000px greenyellow; }
5. 设置动画，要求 div 左右3D旋转，然后从上往下动作，关键代码：主要是 perspective 的使用。
.guide-card { position: absolute; left: 50%; top: 50%; top: 2.94rem; width: 7.24rem; height: 3.94rem; margin-left: -3.62rem; transform: perspective(500px) rotateY(0deg); transition: transform 1s; transform-style: preserve-3d; perspective: 500px; z-index: 1112; &-animate { animation: reversal 0.9s ease-out 2s forwards; } @keyframes reversal { 70% { transform: perspective(500px) rotateY(180deg); top: -1.5rem; z-index: 0; } 100% { transform: perspective(500px) rotateY(180deg); top: 0.13rem; z-index: 0; } } }
6. 页面按需加载，不需要更改webpack，但是打包后的代码会分成 N 份 js。
import Vue from "vue"; import VueRouter from "vue-router"; // 懒加载（按需加载） const FeedBack = () => import("./view/feedback.vue"); const Personal = () => import("./view/personal.vue"); const MyFeedback = () => import("./view/myfeedback.vue"); const MyFocus = () => import("./view/MyFocus.vue"); const MyDeal = () => import("./view/MyDeal.vue"); Vue.use(VueRouter); const routes = [ { path: "/feedback", component: FeedBack, meta: { keepAlive: false, title: "提交问题"} }, { path: "/personal", component: Personal, meta: { keepAlive: false, title: "个人中心"} }, { path: "/myfd", component: MyFeedback, meta: { keepAlive: false, title: "我的反馈"} }, { path: "/myfocus/:count", component: MyFocus, meta: { keepAlive: false, title: "我的关注"} }, { path: "/mydeal/:count", component: MyDeal, meta: { keepAlive: false, title: "我的待办"} } ];
上述方法，会分成0 1 2.。。等数字的js文件，所以要加上注释，变成trunkName
const Home = ()=> import(/* webpackChunkName:"home"*/"./view/home"); const TopStrategy = ()=> import(/* webpackChunkName:"topStrategy"*/"./view/topStrategy"); const TopBattle = ()=> import(/* webpackChunkName:"topBattle"*/"./view/topBattle"); const TopIssue = ()=> import(/* webpackChunkName:"topIssue"*/"./view/topIssue"); const TopHelp = ()=> import(/* webpackChunkName:"topHelp"*/"./view/topHelp"); const TopTask = ()=> import(/* webpackChunkName:"topTask"*/"./view/topTask");
组件懒加载：
// 下面2行代码，没有指定webpackChunkName，每个组件打包成一个js文件。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')
webpack打包也会生成2个单独的js代码,写别名：
const AddMeetingDialog = ()=>import("./component/AddMeetingDialog.vue"/*webpackChunkName:"addmeet"*/);
7 添加水印：
addWaterMarker(dom,str){ var can = document.createElement('canvas'); var mask = document.createElement('div'); var body = document.body; body.appendChild(can); dom.appendChild(mask); dom.style.position='relative'; mask.style.position='absolute'; mask.style.left = 0; mask.style.right = 0; mask.style.top = '-50px'; mask.style.bottom = 0; can.style.display='none'; can.width=200 + str.length * 5; //画布的宽 can.height=212;//画布的高度 var ctx = can.getContext('2d'); ctx.clearRect(0,0,can.width,can.height); //绘制之前画布清除 ctx.font="12px Helvetica"; ctx.rotate(-45*Math.PI/180); ctx.fillStyle = "rgba(0,0,0,0.1)"; ctx.fillText(str, -30, 200); mask.style.pointerEvents='none'; mask.style.backgroundImage="url("+can.toDataURL("image/png")+")"; //把画布插入到dom中 }
8 . vue 过滤器使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title></title>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<h1>{{price}}</h1>
<h1>{{price | myCurrency('￥')}}</h1>
</div>
<script>
// filter
new Vue({
el: '#container',
data: {
msg: 'Hello Vue',
price:356
},
//过滤器的本质 就是一个有参数有返回值的方法
filters:{
myCurrency:function(myInput,arg1){
console.log(arg1);
//根据业务需要，对传来的数据进行处理
// 并返回处理后的结果
var result = arg1+myInput;
return result;
}
}
})
</script>
</body>
</html>
在或者
<a :href="item | getHref" /> //这里定义 item是参数 getHref是函数 在filter中定义 import filters from '../mixin/filters.js'; //过滤器的本质 就是一个有参数有返回值的方法 export default { filters: { getHref(item) { const ua = navigator.userAgent; //根据业务需要，对传来的数据进行处理 // 并返回处理后的结果 if (plusFrom == 'wq') { return item.weixinHref || 'javascript:;'; } else if (/jdapp/i.test(ua)) { return item.openappHref || 'javascript:;'; } else { return item.imageHref || 'javascript:;'; } } }, }
官方Vue定义： https://cn.vuejs.org/v2/guide/filters.html#ad
a?b:c // a为true时返回b；false时返回c
a&&b||c // a,b都不是假值，返回b；a,b其中有一个是假值，返回c
也就是说 三目运算符只看a是否为true，为true则返回b，为false则返回c；
而a&&b||c，同样先看a，如果a为true，且b为true则返回b；如果b为false 则返回c
如果a为false，则返回c（c肯定为true的条件下）
也就是说下面这种情况肯定会返回有数值。
10.使用scss设置webp 图片：
/* 通过这个函数来引入图片，例如： #wrapper{ @include bg('../img/sample.jpg') } 这段代码经过编译后便会生成如下两句代码 #wrapper{ background-image:url('../img/sample.jpg'); } .webp #wrapper{ background-image:url('../img/sample.jpg.webp'); } */ @mixin bg($url) { background-image: url($url); @at-root(with: all) .webp & { background-image: url($url + '.webp'); } }
其中 @at-root 经常和 & 一起，表示放在嵌套器的最外层：
.a{ .b{ .c{ @at-root .e &{ color:red; } } } }
等价于：
.e .a .b .c {color:red;}
默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support。
如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。
这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。
具体：
@mixin bg($url) { background:#f5ca3a; background-repeat: no-repeat; background-image: url($url); @at-root(with: all) .webp & { background-image: url($url + '.webp'); } } .warpper{ li { width: 100%; &:before { @include bg('../img/pr-icon.png'); } } }
11
let aa = [1,2,3]; let bb = [...aa]; bb[1]=5; console.log(aa); //[1,2,3] console.log(bb); //[1,5,3] ---- let cc = [ { name:'xiaohua', age:20 }, { name:'xiaogao', age:21 } ] let dd = [...cc]; cc[1].age = 31; console.log(cc); //[{name: "xiaohua", age: 20},{name: "xiaogao", age: 31}] console.log(dd); //[{name: "xiaohua", age: 20},{name: "xiaogao", age: 31}] //综上，es6的扩展数组方法 只能浅复制 --- const aa = []; aa.push({ name:'xiaohua', age:21 }) console.log(aa);//可以 -- qs.stringify()将对象 序列化成URL的形式，以&进行拼接。 var a = {name:'hehe',age:10}; qs.stringify(a) // 'name=hehe&age=10' JSON.stringify(a) // '{"name":"hehe","age":10}' let timer = settimeout(()=>{ console.log('ss'); },1000); clearTimer()
