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

9 js中a?b:c和a&&b||c有什么区别

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目前还无法广泛使用，所以在此不表）。

webp图片实践之路

具体：

@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');
        }
    }
}

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()