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

且后端需要配置：

1. Access-Control-Allow-Origin 字段必须指定域名，不能为*

2. 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