美文网首页让前端飞
项目中遇到的问题(后续不断更新)

项目中遇到的问题(后续不断更新)

作者: 穆熙沐 | 来源:发表于2018-03-16 11:05 被阅读95次

    1,
    select标签(二级联动,两种解决方案,Vue计算属性改变小类的option;添加change事件)
    2,
    滚动条消失(再在外层套个div,overflow:hidden;width:100px;子层div,overflow-y:scroll;width:126px;多出的26px则掩盖父级滚动条宽度)
    3,
    textarea标签特点(input标签不能设置自动换行,只能用textarea,默认文本提示placeholder;用div模拟:contenteditable属性;但是在Firefox下聚焦时候会有虚框,解决办法:outline:0)
    4,
    vue-router(hash(带有#,兼容所有浏览器),history(不带#,IE9不兼容))
    5,
    flex (flex兼容IE11,以下不兼容)
    6,
    刚到新公司,拉代码:首先要有自己的ssh才可以成功clone
    cd ~/.ssh (如果不存在则执行第二三四条语句)
    mkdir ~/.ssh
    git config --global user.name
    git config --global user.email
    ssh-keygen -t rsa -C 'user.email'
    7,
    clone代码后,启动vue项目时,报错:npm: no such file or directory, scandir '.../node_modules/node-sass/vendor'
    查找原因:node_modules/node-sass下竟然没有vendor模块,天啊,安装依赖npm install 时候竟然没有安装上,只好重新安装一次node-sass模块(npm rebuild node-sass ),启动项目ok。
    8,
    修改了配置文件,一定要重新启动项目,不然不起作用。
    9,
    window.location.href:当URL
    https://www.jianshu.com:8080/p/c9324d237a8e?id=‘111’
    window.location.protocol:协议
    https
    window.location.host:域名+端口
    www.jianshu.com:8080
    window.location.hostname:域名
    www.jianshu.com
    window.location.port:端口
    8080
    window.location.pathname:路径部分
    /p/c9324d237a8e
    window.location.search:请求的参数
    ?id=XXX
    window.location.origin:参数之前的URL
    https://www.jianshu.com/p/c9324d237a8e
    10,
    this.route.query和 this.route.params的区别
    query对应的是path

    query.png
    params对应的是name
    params.png
    11,
    列可以设置 :formatter="formatterColumn",对列的值进行处理
    //状态改成汉字

    formatterColumn(row, column) {
            switch(row.IsAudit){
            case 0:
                    return '未通过';
                    break;
            case 1:
                    return '审核通过';
                     break;
            case 10:
                    return '待审核';
                    break;
    }
    },

    12,
    promise.all([asyncTask1,asyncTask2,asyncTask3])
    虽然是异步处理task,但是最后resultList仍然会一一映射到list里边。resultList[result1,result2,result3]。
    Promise.all([
        new Promise(function(resolve, reject) {
        resolve(1)
        }),
        new Promise(function(resolve, reject) {
        resolve(2)
        }),
        new Promise(function(resolve, reject) {
        resolve(3)
        })
    ]).then(arr => {
        console.log(arr) // [1, 2, 3]
    }).catch(e=>{
        console.log(2)//promise.all参数若有一个存在reject,就会直接执行.catch,不会执行.then
    })


    image.png
    image.png

    promise.race([asyncTask1,asyncTask2,asyncTask3]);
    只要有一个实例有resolve或者reject,其他实例就不执行了。

    race.png
    13,
    点击按钮,点击多次时候会不停发送请求,所以方法一,点击一次后disable按钮,但是当发现有需要修改的地方,修改后再次点击,发现已经disable了。所以在验证当时候还要取消disable,总之,很麻烦。
    vue中有lodash。引入import _ from lodash
    postAction=_.debounce(this.sendajax,500)
    在500这个时间段,不论点击多少次,都只请求一次。
    14,
    vue中props传递数据是单向传递,父组件中的数据传递到子组件,子组件props接收后不能修改,违背了单向数据流到设计原则。
    直接 stash-list.png
    git stash pop 删除缓存堆栈中到第一个stash,并且应用恢复到当前目录
    git stash apply 不删除stash,可以多次将stash应用到工作目录中。
    17,
    git 提交时候忽略到文件添加到.gitignore中。
    touch .gitignore
    vim .gitignore
    把需要忽略的文件名/文件夹/文件规则 添加进去
    18,
    git commit --amend
    1)修改最后一次提交信息。
    例如:最近一次修改: git commit -m 'c' 应该为c3,可以使用
    git commit --amend -m 'c3'
    2)修改最后一次提交的文件
    如果想要修改最后一次提交的文件,但是避免提交记录很多累赘,可以使用此命令,首先用git add增加到暂存区,有了跟踪状态,然后git commit --amend。
    19,
    git 中报错
    fatal: unable to auto-detect email address (got 'tim@newton.(none)')
    解决办法:
    git config --global user.email "you@example.com"
    git config --global user.name "Your Name"
    20,
    在非主分支dev下创建新分支 zm_dev
    git checkout dev
    git pull origin dev
    git checkout -b zm_dev
    21,
    移动端项目在手机端进行本地调试
    1)确保手机和电脑在同一局域网(链接统一无线)
    2)在终端输入ifconfig,找到ip地址
    网络设置.png
    终端.png
    3)在手机端输入 http://...:8080网址请求
    21,
    vue数据初始化和生命周期的关系
    https://github.com/vuejs/vue/blob/dev/src/core/instance/index.js vue源码
    1)实例化时候_init函数初始化各个功能
    实例化中_init函数.png
    2)在_init函数中初始化顺序如下:
    initState在beforeCreate和created之间.png
    3)initState函数中对props,data, computed,methods进行了初始化。所以都是在beforeCreated和created之间完成的
    initState.png
    22,
    导出查询数据功能实现
    提交form 表单
    form表单.png
    action:URL当提交表单时向何处发送表单数据;
    target:在何处打开URL
    target值.png
    method:规定用于发送 form-data 的 HTTP 方法。
    input标签中的内容是提交表单的数据,也就是请求的参数。
    表单提交.png
    23,
    mac上iTerm显示分支及高亮
    效果如下:
    效果图.png
    1)切换到etc目录下
    sudo vim /etc/profile
    2)把如下代码加入
    find_git_branch () {

    local dir=. head

    until [ "$dir" -ef / ]; do

    if [ -f "$dir/.git/HEAD" ]; then

    head=$(< "$dir/.git/HEAD")

    if [[ $head = ref:\ refs/heads/* ]]; then

    git_branch=" (${head#*/*/})"

    elif [[ $head != '' ]]; then

    git_branch=" → (detached)"

    else

    git_branch=" → (unknow)"

    fi

    return

    fi

    dir="../$dir"

    done

    git_branch=''

    }

    PROMPT_COMMAND="find_git_branch; $PROMPT_COMMAND"

    black=$'\[\e[1;30m\]'

    red=$'\[\e[1;31m\]'

    green=$'\[\e[1;32m\]'

    yellow=$'\[\e[1;33m\]'

    blue=$'\[\e[1;34m\]'

    magenta=$'\[\e[1;35m\]'

    cyan=$'\[\e[1;36m\]'

    white=$'\[\e[1;37m\]'

    normal=$'\[\e[m\]'

    PS1="$white[$white@$green\h$white:$cyan\W$yellow\$git_branch$white]\$ $normal"
    3)执行命令
    source /etc/profile
    24,
    css实现td表格中文字居中后左对齐
    效果图如下:

    image.png
    实现思路:td中嵌套个div,td中文字设置居中text-align: center,div中文字设置左对齐:text-align: left;position: relative;left: 50%;margin-left: div宽度的一半,
    25,
    git 对文件名大小写修改不敏感问题
    今天提交了代码,发现修改的文件名由小写字母改成大写字母,却没有在git status中显示出来,于是,使用了如下命令,可以了。

    git mv abc.vue Abc.vue

    image.png
    26,
    vue中watch踩坑
    1)项目中,我想监听的内容是在初始化赋值之后再进行监听,而不是上来就用data中返回的值和初始化值进行比较。
    解决办法: image.png
    赋值之后,进行监听。
    2) watch监听obj的时候,如果想要监听到obj的属性是否变化,需要深度监听,deep:true;或者‘obj.attr‘进行监听。
    val和oldVal相同:
    变异对象或数组.png
    3)vue中想给已有的对象增加两个或者多个新的属性,需要这样做:
    this.userProfile = Object.assign({}, this.userProfile, { age: 27, favoriteColor: 'Vue Green' })
    而不是:
    Object.assign(this.userProfile, { age: 27, favoriteColor: 'Vue Green' })

    相关文章

      网友评论

        本文标题:项目中遇到的问题(后续不断更新)

        本文链接:https://www.haomeiwen.com/subject/fmelqftx.html