每日前端学习笔记

Wary_Lin

已于 2023-04-18 17:37:11 修改

阅读量268

点赞数

分类专栏：前端文章标签：前端学习笔记 vue.js css

于 2023-04-18 17:35:20 首次发布

本文链接：https://blog.csdn.net/Wary_Lin/article/details/128864216

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.vscode调整代码大小。

放大 ctrl +
缩小 Ctrl -

2.浏览器携带数据访问服务器。

在ip后面?需要携带的数据

localhost:8080/home?name="wery"&age=18

3.html 中给一个table表格中的一行单元格设置与其他行单元格不同的宽度。

不设置其他样式时，td的宽度一般根据内容决定，table中td每一列的宽度都一致。在需求行放入一个table，在分别设置td的宽度，一行的td的宽度和为100%。

4.table只要内边框

样式设置：

table td {
  border-top:0;
  border-right:1px #ccc solid;
  border-buttom:1px #ccc solid;
  border-left:0;
}

5.vue this.$refs.xyy与document.getElementById(‘xyy’),前者性能更好

6.vue element el-table sort-change的使用

–学习来源–

关于element table排序 sort-change 和sort-method 的一些记录

    <el-table :data="dataTable" @sort-change="changeSort">
      <!-- 需要sortable属性 -->
      <el-table-column prop="adress" sortable></el-table-column>
    </el-table>
<javaScript>
    changeSort(column) {//sort-change当表格的排序条件发生变化的时候会触发该事件
      console.log(column);// column:该列,prop该列的prop,order："ascending","descending"
      this.searchModel.sortFlag = column.prop
      this.searchModel.sortType = column.order
      this.getPageList()//携带sortFlag和sortType给后台，刷新数据
    },
</javaScript>

el-table sort-change{column}

7.bootstrap4

–学习来源–

菜鸟教程/Bootstrap4

–前端组件库，响应式布局，移动设备优先的WEB项目

–基于HTML、CSS、JS开发的开源工具集，Sass、minxin、响应式栅格系统、可扩展的预制组件、基于JQuery的插件系统

1.网格布局

.col-针对所有设备

.col-sm-num平板-屏幕宽度>=576px

.col-md-num桌面显示器>=768px

.col-lg-num大桌面显示器>=992px

.col-cl-num超大桌面显示器>=1200px

2.网格系统

只有列可以是行的直接子节点

网格列使用flexbox(弹性盒子)：没有指定宽度的网格自动设置为等宽与等高列

8.Flex布局（FlexBox）

–学习来源–

菜鸟教程

阮一峰老师Flex 布局教程：语法篇

css3布局模式，响应式设计
flex-shrink-1:设置子元素的收缩规则，当子元素的宽度大于容器的宽度。
Webkit内核的浏览器，必须加上-webkit前缀。

设置为Flex布局后，子元素的float、clear、vertical-align属性失效

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

水平的主轴miain axis,垂直的交叉轴cross axis

容器：使用display:flex|inline-flex; (felx container)

项目：容器的所有子元素（flexi tem)

1.容器的属性

flex-direction 主轴的方向，项目的排列方向
flex-wrap 默认项目在一行上，一条轴线排列不下时，项目换不换行
flex-flow 是flex-direction和flex-wrap的简写，默认row nowrap;
justify-content 项目在主轴上的对齐方式
align-items 项目在交叉轴上的对齐方式
align-content 多根轴线的对齐方式，（多行，一行时不起作用）

.box{
    flex-direction:row |row-reverse|column|column-reverse; // 默认值row
    flex-wrap:nowrap|wrap|wrap-reverse;//nowrap:(默认) 不换行；wrap:换行
     justify-content:flex-star|flex-end|center|space-between|space-around; //默认值flex-star;space-between:两端对齐，起始和最后项目贴着容器；space-around：起始和结束的项目距离容器左右间距之和等于项目之间间距
    align-items:flex-star|flex-end|center|baseline|stretch; //默认值stretch;baseline:项目第一行文字的基线对齐；stretch:项目未设置高度或者设为auto时，占满整个容器的高度
     align-content:flex-star|flex-end|center|space-between|space-around|stretch; //默认值stretch;stretch:轴线占满整个容器的高度
}

2.项目的属性

order: 定义项目的排列顺序。数值越小，排列越前，默认值为0
flex-grow: 定义项目的放大比例，默认为0，为0时，若剩余空间，也不放大项目
flex-shrink: 定义项目的缩小比例，默认为1，即若空间不足，项目缩小
flex-basis: 在分配多余空间之前，项目占据主轴空间。浏览器根据该属性，计算主轴是否有多余空间，默认值为auto，即项目本身大小。值类型与width一致，即项目占据固定空间。
flex：是flex-grow、flex-shrink和flex-basis简写，默认值为0 1 auto,(优先使用，浏览器根据其推算相关值)

align-self:单个项目与其他项目又不一样的多齐方式，可覆盖align-items属性，默认值为auto，即继承父级align-items,无父级元素时，为stretch

.box-item{
    order:number;
    flex-grow:number;
    flex-shrink:number;
    flex:0 1 auto;
    align-self:auto|flex-star|flex-end|center|baseline|stretch;
}

兼容webKit内核浏览器，写有关属性，记得添加这些

.box{
    display:-webkit-flex;
    -webkit-flex-direction:值;
    -webkit-flex-wrap:值;
    -webkit-justify-content:值;
    -webkit-align-items:值;
    -webkit-align-content:值;
}
.box-item{
    -webkit-order:值;
    -webkit-flex-grow:值;
    -webkit-flex-shrink:值;
    -webkit-flex:值;
    -webkit-align-self:值;
    
}

9.vue this.$confirm一个小小的对话框样式

<button @click="open()">
   按钮 
</button>
open(){
this.$confirm("弹出的内容").then(_=>{
console.log('点击确定后执行的内容')
})
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WGG64g8X-1681810282387)(D:\Desktop\confirm.png)]

10. element input等框中有属性clearable时，点击×时清除验证

在input框使用clear事件

<el-form :model="myForm">
    <el-form-item  prop="phone">
        <el-input v-model="loginForm.phone" clearable placeholder="请输入手机号"@clear="emptyValidate">
        </el-input>
    </el-form-item>
</el-form>

emptyValidate(){ //clear :在点击由 clearable 属性生成的清空按钮时触发
this.$refs['myForm'].clearValidate('phone')
}