• 前端小新手,记录项目中不懂的问题


    2017-11-9:

    1.对于vue配置路由的时候,应该要想着性能,因此采用懒加载(作用:按需加载,提高性能)
    例子:
    旧的:
    import index from '@/pages/index'
    export default new Router ({
    { path: name: 'index',component: index,},
    })
    新的:(为了方便管理,拆分开来写)

    const index = r => require.ensure([], () => r(require('../pages/index.vue')), 'index') //就相当于是 import index from '@/pages/index'

    const routes = [{path:'/index',name:'index',component,meta:{XXX:'sss',uid:'0'}]

    const router = new Routet({routes,linkActiveClass: "my-active"})

    export default router


    或者是另外一种写法:{path:‘/’,component:resolve =>require(['@components/index.vue'],resolve)

    2.对于vue搭建好了环境之后,
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name=full-screen content=yes>
    <meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait>
    <meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>
    <meta name="format-detection" content="telephone=no, email=no">
    <!--清除缓存-->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />


    若想使100px = 1rem ;
    则需要加上
    <script type="text/javascript"></script>
    <script>
    (function(d, c, e) {
    var f = d.documentElement,
    b = "orientationchange" in c ? "orientationchange" : "resize",
    a = function() {
    var g = f.clientWidth;
    if (g >= 750) {
    g = 750
    }
    if (g === e) {
    return
    }
    f.style.fontSize = 200 * (g / 750) + "px"
    };
    if (d.addEventListener === e) {
    return
    }
    c.addEventListener(b, a, false);
    d.addEventListener("DOMContentLoaded", a, false)
    })(document, window);
    </script>

    2017-11-10

    1.对于公共组件的使用------如使用公共的弹出选择框

    父组件使用子组件: <all-select ref="auditor" :selectDate="auditor" :parameter="'auditor'" :content="dateSlots3" @select="selectAuditor"></all-select>
    子组件:<mt-picker value-key="name" :slots="slots" @change="onValChange"></mt-picker>

    父组件传给子组件的值,子组件用props接收
    //content为选项内容 selectDate为已经选好的值 parameter为赋予给上层的值
    props:['content','selectDate','parameter'],

    子组件通过$emit事件去触发父组件,向父组件传值
    this.$emit('select',{value:this.value,type:this.parameter})

    父组件通过@select="selectAuditor" selectAuditor(){} 这个方法去接收子组件传递给父组件的值

    2017-11-14

    //判断是否为安卓或者苹果
    isiOS(){
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    return isiOS;
    },
    //处理聚焦 软键盘遮挡input 注意 此处的id 是可显示区域
    fouces(e,id){
    if(!this.isiOS()){
    setTimeout(function(){
    document.getElementById(id).scrollIntoView();
    document.getElementById(id).scrollIntoViewIfNeeded();
    },200)
    }
    },

    2017-11-17

    给与点击事件添加事件,让它不可点击

    // .noEdit_binding.msgs{
    // .my_jdsearch,.entrance_fist{
    // pointer-events: none;
    // }
    // }


    总结 css 样式的绑定 :class="{noEdit_binding:apimsg.name=='未绑定'}"
    事件的绑定 @click="apimsg.name=='未绑定'?prompt($event):enterSearch(true)" placeholder="项目名称、项目编号、甲方全称" ref="MainsearchVal" id="MainsearchVal" class="mint-searchbar-core" @keyup.enter="apimsg.name=='未绑定'?'':_searchDate()"

    判断选择的图片是什么类型
    if (fileObj[i].type != 'image/png' && fileObj[i].type != 'image/gif' && fileObj[i].type != 'image/jpeg') {
    isUpdate =false;
    break;
    }else{
    Indicator.open({
    text: '加载中...',
    spinnerType: 'fading-circle'
    });

    事件 @blur="contenteditable($event,index)"
    contenteditable(event,index){
    if(event.target.innerHTML!=""){
    // this.project_payment_line_ids[index].remark="<div>"+event.target.innerHTML+"</div>";
    this.project_payment_line_ids[index].remark=event.target.innerText;
    }
    },

    正则表达式的领悟:
    例子:^dw+@[a-z]+[.]D{2} => /^dw+@[a-z]+[.]D{2}d?$/ 意思是 以数字开头中间是至少一个任意字符@a-z之间至少一个 . 非数字字符至少两个,以数字结尾

    ? 最多一位 + 最少一位 * 不限位数

  • 相关阅读:
    hbase全分布安装配置
    ElasticSearch概述及Linux下的单机ElasticSearch安装
    Redis 集群搭建详细指南
    spark集群安装配置
    hbase全分布安装配置
    zookeeper图形界面工具zooinspector
    storm集群安装配置
    kafka集群安装配置
    sqoop配置安装以及导入
    Flume的安装部署
  • 原文地址:https://www.cnblogs.com/shejuan/p/7878754.html
Copyright © 2020-2023  润新知