0%

vue中的生命周期钩子函数

在 Vue 3 中,生命周期函数总体上经历了一些改变,并引入了 Composition API,与 Vue 2.x 中的选项 API 有所不同。以下是 Vue 3 中常用的生命周期函数:

  1. setup:组件创建阶段的入口,在组件实例创建之前执行,用于设置组件的初始状态、逻辑以及副作用操作等。

  2. beforeCreate:与 Vue 2.x 中的 beforeCreate 类似,在组件实例初始化之后,数据观测之前被调用。

  3. created:与 Vue 2.x 中的 created 类似,在实例创建完成后被调用,实例已完成数据观测、属性和方法运算。

  4. beforeMount:与 Vue 2.x 中的 beforeMount 类似,在挂载开始之前被调用,相关的 render 函数首次调用。

  5. mounted:与 Vue 2.x 中的 mounted 类似,在挂载结束后被调用,实例已挂载到 DOM 上。

  6. beforeUpdate:当数据更改导致虚拟 DOM 重新渲染之前调用。

  7. updated:当数据更改导致虚拟 DOM 重新渲染和打补丁后调用。

  8. beforeUnmount:在卸载组件之前调用。

  9. unmounted:在卸载组件后调用。

  10. errorCaptured:捕获组件子树中任何错误的处理器。

除了上述生命周期函数外,Vue 3 还引入了 Composition API,开发者可以使用 onMountedonUpdatedonUnmounted 等函数来实现类似生命周期钩子的功能。Composition API 提供了更灵活的方式来组织组件的逻辑。请注意,Vue 3 中的生命周期钩子函数与 Vue 2.x 中可能略有差异,主要是由于引入了 Composition API 的改变。

使用线性渐变实现渐变背景

1
background-image: linear-gradient(270deg, #f66, #ff9f9f);

这段CSS代码是用于设置元素的背景图片,但是这里使用的不是传统的图像文件,而是通过线性渐变(linear gradient)来实现背景效果。让我们来解释一下这段代码的含义:

  1. background-image: 这是CSS属性,用于设置元素的背景图片。

  2. linear-gradient(270deg, #f66, #ff9f9f); 这是具体的背景图片值,表示使用线性渐变(从一个颜色过渡到另一个颜色)来创建背景。

  • 270deg 表示指定线性渐变的方向为270度,即从底部到顶部的垂直方向。

  • #f66#ff9f9f 是渐变的起始色和结束色。第一个颜色 #f66 代表浅红色,第二个是 #ff9f9f 代表淡红色。在这种情况下,从底部到顶部的背景将逐渐从浅红色过渡到淡红色。

所以,这段代码的意思是设置元素的背景为从底部到顶部的垂直线性渐变,颜色过渡从浅红色(#f66)到淡红色(#ff9f9f)。这样的效果会创建一个具有渐变色的背景,使元素看起来更加丰富和动态。

Flex布局与Grid布局

Grid布局和Flex布局都是在CSS中用于进行页面布局的工具,它们各有优势和适用场景。以下是它们的一些异同点以及优缺点:

异同点:

  1. 相同点:

    • 两者都是现代CSS布局工具,用于实现响应式布局和页面排版。
    • 都支持对网格和弹性盒子进行灵活布局。
    • 都可以在容器内部的子元素之间创建空间布局。
  2. 不同点:

    • Flex布局(弹性布局):

      • 适用于一维布局,例如在一条水平或垂直的轴线上布局元素。
      • 适合于构建灵活的、水平或垂直居中的布局。
      • 可以根据内容的大小来调整元素的尺寸。
    • Grid布局(网格布局):

      • 适用于二维布局,可以在交叉轴上对元素进行定位,创建复杂的网格布局。
      • 适用于规划复杂的网格结构,如页面布局的整体设计。
      • 可以控制行与列交叉点的位置,实现更精确的布局设计。

优缺点:

  1. Flex布局优点:

    • 简单实用,适合搭建基本的布局和页面结构。
    • 支持响应式布局,更容易实现移动端适配,适合移动端开发。
    • 配合弹性盒子布局的属性丰富,可以快速实现元素的排列和对齐。

    缺点:

    • 适用于相对简单布局,复杂的网格结构可能实现起来比较困难。
    • 不太适合搭建复杂的多列布局。
  2. Grid布局优点:

    • 可以实现更复杂的网格布局,可以精确控制元素的位置和大小。
    • 适合搭建大型网站和复杂的设计布局。
    • 支持分区和定位,可以创建更灵活的页面结构。

    缺点:

    • 学习成本相对较高,语法相对复杂,初学者可能需要一定时间适应。
    • 在一维布局方面不如Flex布局灵活,并不适用于所有布局场景。

结论:

  • 如果页面结构相对简单,主要涉及到一维布局的元素排列和对齐,Flex布局是一个不错的选择。
  • 如果需要实现复杂的二维布局,例如创建大型网格结构,Grid布局更适合用来实现。
  • 在实际项目中,可以根据具体需求和布局复杂度来选择合适的布局方法,有时候也可以结合使用两者来实现更灵活和多样化的布局效果。

文本的截断和显示控制

下面三个属性通常用于在Web开发中对文本进行截断和显示控制,主要用于控制文本在容器中的显示方式。具体含义如下:

  1. display: -webkit-box;:这个属性用于指定元素应该生成一个块级容器框。在这种布局模型中,元素是一个块级容器,可以在内部容纳其他元素。在这种情况下,通常需要与其他属性结合使用。

  2. -webkit-line-clamp: 2;:这个属性用于指定显示的行数限制。在文本溢出时,只显示指定行数的文本内容。上面的例子中,只显示不超过两行的文本内容。

  3. -webkit-box-orient: vertical;:这个属性用于指定盒子的排列方向。在这种情况下,盒子内的元素垂直排列。

这些属性通常与前缀 -webkit- 一起使用,表示这些属性是Webkit浏览器专有的CSS扩展。这些属性主要用于控制元素的显示方式,特别是在限制文本显示行数和盒子内元素排列方向方面。

text-overflow的用法

text-overflow是CSS样式属性,用于控制当文本溢出容器时如何显示。

常见的取值有:

  • clip:默认值,表示将溢出的部分隐藏。
  • ellipsis:表示将溢出的文本显示为省略号(…)。
  • inherit:继承父元素的文本溢出样式。

示例:

1
2
3
4
5
.text-ellipsis {
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 溢出隐藏 */
text-overflow: ellipsis; /* 超出部分以省略号显示 */
}

在上面的示例中,当文本内容超出容器的宽度时,将以省略号的形式显示。需要注意的是,通常需要配合white-space: nowrap;overflow: hidden;这两个样式属性一起使用,来确保省略号的效果正常显示。

text-overflow通常用于单行文本或者内联元素,对于多行文本或块级元素,更适合使用-webkit-line-clamp结合-webkit-box来实现类似的效果。

less中的&符号

在 Less 预处理器中,& 符号用于引用当前选择器的父级。这在嵌套规则中非常有用,可以帮助生成更复杂的选择器,而不需要重复父选择器的名称。

基本用法

在 Less 中,& 符号代表父选择器,可以用来构建更复杂的选择器规则。例如:

1
2
3
4
5
6
7
8
9
10
11
.container {
color: black;

&:hover {
color: blue;
}

&::before {
content: "Prefix";
}
}

编译后的 CSS 如下:

1
2
3
4
5
6
7
8
9
.container {
color: black;
}
.container:hover {
color: blue;
}
.container::before {
content: "Prefix";
}

具体示例

以下是一些常见的 & 符号用法示例:

1. 伪类和伪元素

1
2
3
4
5
6
7
8
9
10
11
.button {
background-color: green;

&:hover {
background-color: darkgreen;
}

&::after {
content: " (hover me)";
}
}

编译后的 CSS:

1
2
3
4
5
6
7
8
9
.button {
background-color: green;
}
.button:hover {
background-color: darkgreen;
}
.button::after {
content: " (hover me)";
}

2. 子选择器

1
2
3
4
5
.nav {
&-item {
color: red;
}
}

编译后的 CSS:

1
2
3
.nav-item {
color: red;
}

3. 父选择器引用

1
2
3
4
5
6
7
8
9
.list {
.list-item {
color: blue;

&.active {
color: darkblue;
}
}
}

编译后的 CSS:

1
2
3
4
5
6
.list .list-item {
color: blue;
}
.list .list-item.active {
color: darkblue;
}

4. 嵌套媒体查询

1
2
3
4
5
6
7
8
9
.container {
width: 100%;

@media (min-width: 768px) {
& {
width: 50%;
}
}
}

编译后的 CSS:

1
2
3
4
5
6
7
8
.container {
width: 100%;
}
@media (min-width: 768px) {
.container {
width: 50%;
}
}

总结

& 符号在 Less 中非常强大,可以帮助你避免重复代码,并使样式表更具可读性和可维护性。通过合理使用 & 符号,可以轻松创建复杂的选择器规则,提升 CSS 编写的效率和灵活性。

Overflow的用法

overflow 是 CSS 中的一个属性,用于控制元素内容在水平方向和垂直方向上的溢出行为。它决定了当内容溢出元素的尺寸时,是否显示滚动条、截断内容或其他处理方式。

语法

1
overflow: visible | hidden | scroll | auto;

属性值

  • visible:默认值。内容不会被剪裁,会呈现在元素框之外。
  • hidden:溢出内容会被剪裁(隐藏),不会显示滚动条。
  • scroll:无论内容是否溢出,都会显示滚动条。
  • auto:如果内容溢出,浏览器会自动显示滚动条。

示例

假设有一个包含大量文本的容器:

1
2
3
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
</div>

CSS 代码如下:

1
2
3
4
5
6
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto; /* 自动显示滚动条 */
}

在这个例子中:

  • 当容器的内容宽度或高度超过 200px 或 100px 时,浏览器会自动显示水平或垂直滚动条,以便用户可以滚动查看内容。

各属性值示例

  1. visible
1
2
3
4
5
6
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: visible;
}

内容会溢出容器,不会显示滚动条。

  1. hidden
1
2
3
4
5
6
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: hidden;
}

内容会被剪裁,溢出部分不可见,不会显示滚动条。

  1. scroll
1
2
3
4
5
6
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: scroll;
}

无论内容是否溢出,都会显示滚动条。

  1. auto
1
2
3
4
5
6
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
}

当内容溢出时,浏览器会自动显示滚动条。

组合使用 overflow-xoverflow-y

有时你可能需要分别控制水平方向和垂直方向的溢出行为,这时可以使用 overflow-xoverflow-y 属性。

1
2
3
4
5
6
7
.container {
width: 200px;
height: 100px;
border: 1px solid black;
overflow-x: auto; /* 水平方向自动显示滚动条 */
overflow-y: hidden; /* 垂直方向隐藏溢出内容 */
}

注意事项

  • overflow 属性仅在元素具有限定的宽度和高度时起作用。
  • overflow 属性常用于创建滚动区域,特别是在布局响应式设计中。

通过合理使用 overflow 属性,可以更好地控制元素内容在水平方向和垂直方向上的显示方式,提升页面的可读性和用户体验。

Axiso库

官方介绍:

Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios官方文档:https://www.axios-http.cn/docs/intro

更新

2024.5.24 第一次更新,主要学习了一下Axiso的基本用法

功能特点

  • 在浏览器中发送XMLHttpRequest请求

    避免了兼容性问题,fech是存在兼容性问题的

  • 在node.js中发送http请求

    不需要关心在不同的环境用不同的API,axiso会自动识别环境,在不同的环境下用的都是同一个API

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求和响应数据

  • 取消请求

  • 超时处理

  • 查询参数序列化支持嵌套项处理

  • 自动将请求体序列化为:

    • JSON (application/json)
    • Multipart / FormData (multipart/form-data)
    • URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求

  • 自动转换JSON数据

  • 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)

  • 为 node.js 设置带宽限制

安装

npm install axios

在需要使用的js文件中引入axios

import axios from ‘axios’

axios请求方法

config请求配置

  • url: url 是用于请求的服务器 URL

    1
    url: '/user',
  • method:method 是创建请求时使用的方法

    1
    method: 'get', // 默认值
  • baseURL: baseURL 将自动加在 url 前面,除非 url 是一个绝对 URL。
    它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL

    1
    2
    3
    // `baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'https://some-domain.com/api/',
  • transformRequest: transformRequest 允许在向服务器发送前,修改请求数据。

    • 它只能用于 ‘PUT’, ‘POST’ 和 ‘PATCH’ 这几个请求方法。
    • 数组中最后一个函数必须返回一个字符串, 一个Buffer实例,ArrayBuffer,FormData,或 Stream。
    • 你可以修改请求头。
    1
    2
    3
    4
    5
    transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
    }],
  • transformResponse:transformResponse 在传递给 then/catch 前,允许修改响应数据

    1
    2
    3
    4
    transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理
    return data;
    }],
  • 自定义请求头

    1
    headers: {'X-Requested-With': 'XMLHttpRequest'},
  • params:params 是与请求一起发送的 URL 参数,必须是一个简单对象或 URLSearchParams 对象

    1
    2
    3
    params: {
    ID: 12345
    }
  • paramsSerializer:paramsSerializer是可选方法,主要用于序列化params

    1
    2
    3
    paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
    },
  • data:data 是作为请求体被发送的数据

    • 仅适用 ‘PUT’, ‘POST’, ‘DELETE 和 ‘PATCH’ 请求方法
    • 在没有设置 transformRequest 时,则必须是以下类型之一:
      • string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
      • 浏览器专属: FormData, File, Blob
      • Node 专属: Stream, Buffer
1
2
3
data: {
firstName: 'Fred'
},
  • timeout:timeout 指定请求超时的毫秒数。
1
2
// 如果请求时间超过 `timeout` 的值,则请求会被中断
timeout: 1000, // 默认值是 `0` (永不超时)
  • withCredentials:withCredentials 表示跨域请求时是否需要使用凭证

    1
    withCredentials: false, // default
  • adapter:adapter 允许自定义处理请求,这使测试更加容易。

    1
    2
    3
    4
    //返回一个 promise 并提供一个有效的响应
    adapter: function (config) {
    /* ... */
    },
  • responseEncoding:responseEncoding 表示用于解码响应的编码 (Node.js 专属)

    注意:忽略 responseType 的值为 ‘stream’,或者是客户端请求

1
responseEncoding: 'utf8', // 默认值

更多参数,查询:https://www.axios-http.cn/docs/req_config

axios

axios(config)

axios(config)——post请求
1
2
3
4
5
6
7
8
9
// 发起一个post请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
axios(config)——get请求
1
2
3
4
5
6
7
8
9
// 在 node.js 用GET请求获取远程图片
axios({
method: 'get',
url: 'http://bit.ly/2mTM3nY',
responseType: 'stream'
})
.then(function (response) {
response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});
axios(url[, config])
1
2
// 发起一个 GET 请求 (默认请求方式)
axios('/user/12345');

请求别名

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])

常用的两个

axios.get

axios.post

Url:请求地址

data:请求体

config:配置

vscode快捷键(mac中)

缩进

选中需要缩进的行,按住 Command+] 键。

Vue-父子组件的通信

在 Vue.js 中,父子组件之间的通信可以通过 props 和 events 来实现。下面分别介绍了 props 和 events 的用法:

使用 Props(父传子):

  • 父组件可以通过 props 向子组件传递数据。
  • 在子组件中,props 是响应式的,即当父组件的数据发生变化时,子组件会自动更新。
  • 父组件通过在子组件上使用属性绑定的方式传递数据。

父组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
data() {
return {
parentMessage: 'Hello from Parent',
};
},
components: {
ChildComponent,
},
};
</script>

子组件:

1
2
3
4
5
6
7
8
9
<template>
<div>{{ message }}</div>
</template>

<script>
export default {
props: ['message'],
};
</script>

使用 Events(子传父):

  • 子组件可以通过 events 向父组件发送消息。
  • 在子组件中使用 $emit 方法触发一个自定义事件,并传递数据。
  • 父组件通过在子组件上监听自定义事件来接收子组件发送的消息。

父组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
<ChildComponent @child-event="handleChildEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
methods: {
handleChildEvent(data) {
console.log('Received data from child:', data);
},
},
components: {
ChildComponent,
},
};
</script>

子组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<button @click="sendMessage">Send Message to Parent</button>
</template>

<script>
export default {
methods: {
sendMessage() {
this.$emit('child-event', 'Hello from Child');
},
},
};
</script>

通过 props 和 events,父子组件之间可以方便地进行通信,实现数据的传递和交互。