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