前端心得（就是个人做个记录有些表达不准确）

1.文字不居中，给一个容器，文本行高 line-height和当前容器或者元素相同高度  文字就会剧中

2.布局小技巧，用父级容器去挤子集容器（块级元素），然后从左往右挤元素（或者从一方向往另一个方向挤）

3.中间有缝隙的div 尽量用 红色框去挤里橙色框，不用magrin固定值去分离 这样分辨力切换，不会换行缩放还是一行三个

问题三的错误效果

4.前端 span 变成行内块元素，例如两个span 后边的span比前边的span 行高高出很多，第一个 span 是标题，需要在上边显示，如下如：

解决办法，把注释打开，就是flex布局的，用某一基线对齐排布        

    .serveArchivesListItemInfo3 {

              margin-bottom: 12px;

              font-size: 14px;

              color: #555555;

              // display: flex;

              // align-items:flex-start;

              > span:nth-child(1) {

                display: inline-block;

                width: 48px;

              }

              > span:nth-child(2) {

                display: inline-block;

                width: 88%;

              }

            }

5.vue 视频插件工具

      vue-video-player

6.vue地图插件

       vue-amap

7.其他页面的css样式，影响到了当前页面

      1.在style标签中写scoped

       2.在style不用写scoped,但是最外层的div的class或者id必须是整个项目来看都是唯一的

     注：页面不能进行滚动，屏幕下方还有部分页面未展示，当前遇见的问题某个div容器给了高度（获取其他页面的相同class给了高度）导致无法显示屏幕外的页面并且无法滚动

8.重点！重点！重点！vue 定义的form{} 页面上的 input 输入框为name  form 里并未直接定义name

      js操作 进行 form.name 赋值，input框里也显示了，但是input框无法操作，无法输入，无法删除，修改了form定义 form{ name:"" },之后 input框就可以修改了，为啥不知道，下班了，

9.前台vue 表单编辑回显后，表单数据修改没有反应

 参考：https://blog.youkuaiyun.com/weixin_44615754/article/details/106675852?utm_medium=distribute.pc_relevant.none-task-blog-title-2&spm=1001.2101.3001.4242

　　点击编辑按钮后，实现数据回显方法

这里是解决问题的关键！！！

处理方法：将表单中的值先转化为字符串，然后转化为json对象

JSON.stringify()：将值转换为 JSON 字符串。

JSON.parse() ：将一个 JSON 字符串转换为对象。

editCustomer(index, row, tableData) {
    this.ruleForm.updateData = JSON.parse(JSON.stringify(this.ruleForm));

}

当一个页面class 多个页面使用

scoped :（1）当前页面起作用、其他页面

              （2） 我们为了避免父组件的样式影响到子组件的样式，会在style中加<style scoped>，                           这样父组件中如果有跟子组件相同的class名称或者使用选择器的时候，就不会影                             响到子组件的样式。

 /deep/ ：当你想在父组件修改子组件的样式，就需要使用/deep/

!important ：css起作用的做高级别，当其他地方也给了高度，就不起作用了

<style lang="scss" scoped>

   /deep/.el-input__inner{

       min-height: 44px!important;

   }

</style>

使用vite

需要添加样式

         npm install vite

 npm i less -d --registry=https://registry.npm.taobao.org

等对前端有新的理解在更新