zoukankan      html  css  js  c++  java
  • 前端小新手,记录项目中不懂的问题

    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之间至少一个 . 非数字字符至少两个,以数字结尾

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

  • 相关阅读:
    165. Compare Version Numbers
    164. Maximum Gap
    3、桶排序
    162. Find Peak Element
    160. Intersection of Two Linked Lists
    155. Min Stack
    154. Find Minimum in Rotated Sorted Array II
    153. Find Minimum in Rotated Sorted Array
    Linux/Unix系统编程手册 第二章:基本概念
    Linux/Unix系统编程手册 第一章:历史和标准
  • 原文地址:https://www.cnblogs.com/shejuan/p/7878754.html
Copyright © 2011-2022 走看看