主要是针对vue做过的项目

vue

懒加载

vue-lazyload

import VueLazyLoad from 'vue-lazyload';
import defaultImg from '默认图片';
Vue.use(VueLazyLoad,{
  error: defaultImg,
  loading: defaultImg,
  listenEvents: [ 'scroll' ]
});

最后将使用:src的改为v-lazy

输入框事件

键盘enter: @keydown.13
focus事件: @focus
blur事件: @blur

阻止默认、阻止冒泡

@click.stop
@click.prevent
@click.stop.prevent

动态添加class

:class=”{‘我的class’: 某个具体判断}”
eg: :class=”{‘pic_selected’: list.selected == ‘Y’}”

:class=”某个判断 ? ‘class1’ : ‘class2’”
eg: :class=”list.selected ? ‘colorHeart’ : ‘whiteHeart’”

vuex

mapState computed:mapState({})

在vue-cli重配置jquery

npm install jquery –save

配置webpack文件中resolve的alias

1	'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery.js'),

import $ from ‘jquery’

子组件调用父组件的方法

现在子组件中this.$emit(“方法名”, 参数, 参数, …更多参数);
在父组件中@方法名=”父组件方法”
eg:
有index.vue子组件，在该组件中this.$emit(“sayHi”, “Hello”);
1
<index></index>

然后app.vue引用该子组件，将其命名为v-index，如下

<app>
  <v-index @sayHi="sayHiFather"></v-index>
</app>

在方法中
sayHiFather(str){
  console.log(str)
}

此时子组件便成功调用父组件方法

css

less

文件引用

在vue内 @import url(‘…..’)
在less内 @import ‘…..’
对常用颜色，事先用变量定义好，方便引用

mixin

图片根据像素比适配

.bg-image(@url){
    background: ~'url(@{url}@2x.png)';
    background-size: 100% 100%;
    @media (-webkit-device-pixel-ratio: 3), (-webkit-min-device-pixel-ratio: 3){
        background: ~'url(@{url}@3x.png)';
        background-size: 100% 100%;
    }
}

div边框

有几种处理方法

outline
border
box-shadow

宽高不固定图片居中

flex

图片背景

background的各个属性

移动端点击有某种颜色

去掉该颜色
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
关键是后面那个透明度设置，前面设什么好像没所谓

禁止用户长按选择文字

user-select: none;

文字超出用省略号

单行
多行

输入框文字颜色

js

rem

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
            doc.body.style.display="block";
        };
    if (!doc.addEventListener) return;
    //recalc();
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

移动端点击

fastclick

import FastClick from 'fastclick'
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function () {
    FastClick.attach(document.body);
  }, false);
}

判断是ios，android还是微信

const sysJuc = {
    ios: /(iPhone|iPad|iPod|iOS)/i,
    android: /(Android)/i,
    wx: /(MicroMessenger)/i
};
const nav = navigator.userAgent;
const system = sysJuc.wx.test(nav) ? 'wx' : sysJuc.ios.test(nav) ? 'ios' : sysJuc.android.test(nav) ? 'android' : 'other';

滚动加载事件

节流与防抖

版本号比较

const compareVersion = (curV, reqV) => {
    var arr1 = curV.split('.');
    var arr2 = reqV.split('.');
    //将两个版本号拆成数字 
    var minL = Math.min(arr1.length, arr2.length);
    var pos = 0;        //当前比较位
    var diff = 0;        //当前为位比较是否相等

    //逐个比较如果当前位相等则继续比较下一位
    while (pos < minL) {
        diff = parseInt(arr1[pos]) - parseInt(arr2[pos]);
        if (diff != 0) {
            break;
        }
        pos++;
    }

    if (diff > 0) {
        //新版本
        return true;
    } else if (diff == 0) {
        //稳定版
        return true;
    } else {
        //旧版本
        return false;
    }
}

网络请求

vue-resource, fetch, axios

vue-resource

好久没用了

fetch

关于fetch的兼容whatwg-fetch

axios

请求拦截
this.$http.interceptors.request.use(config => {return config}, err => {})

微信分享页

添加微信分享

绑定域名（我这里是后台配的，前端未参与）
引入js文件
就是引用微信分享的jssdk

通过config注入权限
请求后台给的微信分享的地址，获取相应数据，然后配置到wx.config中

wx.config({
  debug: false,
  appId: 后台返回数据,
  timestamp: 后台返回数据,
  nonceStr: 后台返回数据,
  signature: 后台返回数据,
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone']
})

成功
1
2
wx.ready(function(){
})

微信授权登录

移动端阻止滑动

overflow:hidden
touchmove preventDefault()

与客户端联动

window.location.href = “自定义协议”
window.成功后的回调方法

分享页唤醒app

调试

vConsole