vue-项目使用过程中遇到的一些问题

vue-项目使用过程中遇到的一些问题

最近项目比较忙，五一前要把初版做完，周六加了一天班，今天收尾，明天做测试联调，改改bug，后面再找用户提提意见，估计晃晃悠悠就到五一了。

项目确实让人成长，我是个新手，项目过程中不是难免，是必定遇到了很多问题，我想记下来，一些技术上的盲点，还有一些思维上的盲点。

问题一 Cannot read property ‘xxx’ of undefined 这类问题

这个错误，在vue代码撰写中经常遇到。

原因主要分为这几类

原因一、你调用的数据没有初始化

解决方法，在你使用前进行初始化操作，或者一开始就在mouted中定义好，就像你会先在data里声明很多对象，需用用的时候直接使用this去拿。

原因二、你调用了当前对象没有的属性

你调用的对象中没有你想要的属性，自然是拿不到的，注意链式调用是你返回的到底是什么，中间是不是有空值。

解决方法，实现声明，但有的没有就是没有

原因三、你传入的类型不对

最常见的例子，他要传个函数，你传了一个对象

原因四、你调用的对象他空了，他是undefined,Nan,null

解决方法，提前声明，获取的对象要提前判空

单个数值用三目运算符，对象，建议自己写个方法

总结，其实这玩意就跟java空指针差不多，基本你java怎么做的，js也怎么做。你java遍历中间空指针会直接结束，js也是这样。

/**
 * 判断非空（包含 undefined、null、NaN、空字符串）
 * @param {*} data
 */
export function isNotNull(data) {
   
  if(data == undefined || data == null || data == NaN || data == '') {
   
    return false
  }
  return true
}

/**
 * 判断空（包含 undefined、null、NaN、空字符串）
 * @param {*} data
 */
export function isNull(data) {
   
  if(data == undefined || data == null || data == NaN || data == '') {
   
    return true
  }
  return false
}

问题二、 使用elementui时，如何调节一些 内部样式

说实话，新人，不是从项目开头做起，其实很多东西，以前老前辈都做的差不多了，基本这粘贴一段，那粘贴一段，真到了要自己写组件的时候，还真的要下点心思的，周六加班，画了个穿梭框，用的elementui的穿梭框，但中间各种问题，专门拿出来讲一讲。

这次我是做了wms里的一个盘点模块，要求让用户选完仓库后，自动弹出一个穿梭框，让用户自己勾选物料。我自己找了半天，在CSDN和知否上翻了半天也没找到解决方法，几个解决方法都是那种只能解决一半，根本没法彻底解决。最终还是问的边上的大哥。顺便学到了一点js的调试知识。

因为穿梭框，除了主框体还有内部两个小框体，搜索栏，按钮，标题等内部组件，elementui文档也没有写如何更改这方面的样式。解决方法：

步骤一：浏览器 F12打开调试模式

步骤二：点击这个鼠标箭头的表示，然后点击页面元素，他可以直接跳到当前元素对应的css

我点击了elementui官网的穿梭框组件的标题，它会自动指向这个元素，并且边上会显示他的css样式，这时候你就可以调试你想要的样式尺寸。

步骤三：复制样式类型，写到style里

顺便介绍一些几个js基础知识。

scoped 让css只在当前页面生效， 他会在你的样式后生成一个hash值，让你的样式不会重复

/deep/ 和 >>> 这两个都是深度选择器，意义一样 比scoped更好用 深度选择器 在你调用别人的组件，又想拥有自己的样式 ，就可以使用/deep/ 写在css前面

！important 样式内部存在层级覆盖，使用！important 让你的样式不被覆盖

>>> .el-transfer-panel {
   
    border: 1px solid #ebeef5;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    display: inline-block;
    vertical-align: middle;
    width: 400px !important;
    max-height: 100%;
    box-sizing: border-box;
    position: relative;
}

问题三、 在前端卡控输入内容，表单校验

表单校验有很多种方式，在这里只说两种 vue原生的rule 还有elementui提供的绑定事件

vue原生

<el-form ref="form" :inline="true" :model="form" label-width="280px" id="userForm" style="margin-top:10px;"
             :rules="rules">
      <el-row type="flex">
        <el-col :span="10">
          <el-form-item label="登录名" prop="loginName">
            <el-input v-model="form.loginName" class="input-common-width" :maxlength="60" style="width:250px;"
                      clearable></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-switch v-model="form.gender" active-text="男" inactive-text="女">
            </el-switch>
          </el-form-item>
          <el-form-item label=