日常开发记录（2021-11-08）

本是古典何须时尚 2023-10-02 14:19 5阅读 0赞

**目录**

1.Css样式问题

2.页面加载样式错乱，刷新正常的情况

3.前端报错Cannot read property ‘xxx‘ of undefined

4.功能：页面默认只显示输入手机号框，等到输入11位手机号之后，自动显示密码框、验证码框等。

5.nuxt.js框架中props怎么用的

6.git简便使用

--------------------

### 1.Css样式问题 ###

> 修改elementUI组件库的默认样式，比如按钮、分页的颜色之类的，可以使用 ：：deep 深度作用符。

.adv-video {
      margin-top: rem(25);
      height: $video-height;
      width: 100%;
      position: relative;
    
      ::v-deep video {
        width: 100%;
        height: $video-height;
        object-fit: fill;
      }
    }

--------------------

### 2.页面加载样式错乱，刷新正常的情况 ###

--------------------

原因：某个页面没有加scoped

--------------------

解释：因为如果你不加相当于全局， 浏览器加载的时候，如果加载到相同的样式以后就不会在加载了，所以要加这玩意

--------------------

总结：加上scoped ，然后需要修改使用深度作用选择符

--------------------

### 3.前端报错Cannot read property ‘xxx‘ of undefined ###

--------------------

原因：一般来说都是异步问题，既数据还没回来，但是就已经使用了，就会导致这类问题。

--------------------

解决：1.使用v-if

2.使用async await

--------------------

### 4.功能：页面默认只显示输入手机号框，等到输入11位手机号之后，自动显示密码框、验证码框等。 ###

--------------------

思路：可以使用手机号校验+计算属性。

--------------------

### 5.nuxt.js框架中props怎么用的 ###

@prop（）
    
    跟数据如 data！：any
    
    @prop
    
    跟第二个数据如data2:any

### 6.git简便使用 ###

> 使用vscode，点全部提交，然后点一下推送就完事。

**1.点全部提交**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_10_color_FFFFFF_t_70_g_se_x_16][]

**2.点推送**

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_11_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_10_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/58d01a04d195490ebd7525b293506c99.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_10,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC_size_11_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/81cd646b148948848e2ddaf99e3e9d85.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5o6l552A5aWP5LmQ5o6l552A6Iie44CC,size_11,color_FFFFFF,t_70,g_se,x_16