第六篇【传奇开心果系列】Vant of Vue 开发移动应用示例：深度解析响应式布局支持

news2025/4/18 1:41:30

传奇开心果系列

  • 系列博文目录
    • Vant开发移动应用示例系列
  • 博文目录
    • 前言
    • 一、Vant响应式布局介绍
    • 二、媒体查询实现响应式布局示例代码
    • 三、短点设置实现响应式布局示例代码
    • 四、响应式工具类实现响应式布局示例代码
    • 五、栅格系统实现响应式布局示例代码
    • 六、响应式组件实现响应式布局示例代码
    • 七、内置的媒体查询工具类来设置样式实现响应式布局示例代码
    • 八、自定义断点设置实现响应式布局示例代码
    • 九、Flex实现响应式布局示例代码
    • 十、归纳总结

系列博文目录

Vant开发移动应用示例系列

博文目录

前言

在这里插入图片描述Vant提供了响应式布局的支持，可以根据不同的手机屏幕尺寸自动适配布局，使得组件在不同的终端上都能够呈现良好的展示效果。

一、Vant响应式布局介绍

在这里插入图片描述以下是Vant响应式布局的具体介绍：

  1. 媒体查询：Vant使用CSS媒体查询来实现响应式布局。通过设置不同的媒体查询规则，可以根据屏幕宽度、高度或方向等条件，为不同的设备提供不同的样式和布局。

  2. 断点设置：Vant定义了一组断点，用于根据不同的屏幕宽度进行响应式布局。这些断点定义了不同屏幕尺寸下的布局规则，开发者可以根据需求自定义断点设置。

  3. 响应式工具类：Vant提供了一系列响应式的CSS类，用于控制组件在不同屏幕尺寸下的显示和布局。开发者可以通过在元素上添加相应的CSS类，实现响应式的样式调整。

  4. 栅格系统：Vant还提供了栅格系统，用于实现灵活的响应式布局。开发者可以将组件放置在栅格中，根据不同的屏幕尺寸设置栅格的列数和宽度，实现自适应的布局效果。

  5. 响应式组件：Vant提供了一些特定的响应式组件，如van-row和van-col`。这些组件可以配合栅格系统使用，以便更好地控制组件在不同屏幕尺寸下的布局。

  6. 媒体查询工具类：除了使用媒体查询来自定义样式外，Vant还提供了一些内置的媒体查询工具类，方便开发者根据不同的屏幕尺寸设置样式。例如，可以使用.van-xs、.van-sm、.van-md、.van-lg、.van-xl等类名来针对不同的屏幕尺寸设置样式。

  7. 自定义断点：Vant提供了默认的断点设置，但也支持开发者根据项目需求自定义断点。通过配置断点，可以更精细地控制组件在不同屏幕尺寸下的布局和样式。

  8. Flex布局：Vant在设计和布局上广泛使用Flexbox弹性布局模型，这使得组件在不同屏幕尺寸下能够更好地自适应和排列。

通过结合以上的特性和工具，开发者可以实现灵活的响应式布局。Vant的响应式布局能够使组件在不同的手机屏幕尺寸下呈现出最佳的显示效果，并提供良好的用户体验。

二、媒体查询实现响应式布局示例代码

在这里插入图片描述Vant通过媒体查询实现响应式布局的示例代码如下：

<template>
  <div class="container">
    <van-button class="responsive-button">Responsive Button</van-button>
  </div>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .responsive-button {
    font-size: 14px;
    padding: 10px 20px;
  }
}

@media screen and (min-width: 769px) {
  .responsive-button {
    font-size: 18px;
    padding: 15px 30px;
  }
}
</style>

在这个示例中，我们使用了Vant的Button组件，并通过媒体查询来设置按钮在不同屏幕尺寸下的样式。

首先，我们定义了一个容器.container，使用display: flex和justify-content: center将按钮水平居中显示。

然后，在@media规则内，我们设置了两个媒体查询。第一个媒体查询针对最大宽度为768px的屏幕，设置了较小的字体大小和内边距。第二个媒体查询针对最小宽度为769px的屏幕，设置了较大的字体大小和内边距。

这样，根据不同的屏幕尺寸，按钮的样式会自动适应并改变。

通过使用媒体查询，我们可以根据不同的屏幕尺寸设置组件的样式，从而实现响应式布局。这使得组件能够在不同的设备上以最佳的方式呈现，并提供更好的用户体验。

在这里插入图片描述下面是一个更全面的示例代码，展示如何使用Vant的媒体查询和响应式工具类来实现更复杂的响应式布局：

<template>
  <div class="container">
    <van-row :gutter="20">
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 1</div>
      </van-col>
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 2</div>
      </van-col>
      <van-col :span="24" :lg="{ span: 8 }" :md="{ span: 12 }" :sm="{ span: 24 }">
        <div class="box">Box 3</div>
      </van-col>
    </van-row>
  </div>
</template>

<style>
.container {
  padding: 20px;
}

.box {
  background-color: #f2f2f2;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #333;
}

/* 媒体查询 */
@media screen and (max-width: 768px) {
  .box {
    font-size: 18px;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .box {
    font-size: 20px;
  }
}
</style>

在这个示例中，我们使用了Vant的Row和Col组件来创建一个响应式的布局。其中，Row表示行，Col表示列，可以根据不同的屏幕尺寸设置列的宽度。

在Col组件上，我们使用了:lg、:md和:sm属性来设置不同屏幕尺寸下的列宽。对于大屏幕(lg)，每列占据8份；对于中等屏幕(md)，每列占据12份；对于小屏幕(sm)，每列占据24份，即一整行。

在样式部分，我们定义了一个.box类，表示每个盒子的样式。通过媒体查询，我们根据不同的屏幕尺寸设置了不同的字体大小。

当屏幕宽度小于等于768px时，字体大小为18px；当屏幕宽度在769px到1024px之间时，字体大小为20px。

这样，无论是在大屏幕、中等屏幕还是小屏幕下，盒子的列宽和字体大小都会自动调整，实现了响应式布局。

通过这个示例，您可以更好地理解如何使用Vant的媒体查询和响应式工具类来实现灵活的响应式布局。您可以根据具体的需求，调整和扩展代码，以满足您的项目要求。

三、短点设置实现响应式布局示例代码

在这里插入图片描述Vant提供了一组预定义的断点，用于根据不同屏幕宽度进行响应式布局。您可以根据自己的需求自定义这些断点设置。以下是一个示例代码，演示了如何使用Vant的断点设置：

import { createApp } from 'vue';
import { createBreakpoint } from 'vant';

// 自定义断点设置
const customBreakpoints = {
  xs: 320,    // 小屏幕设备（手机）上的断点
  sm: 576,    // 中等屏幕设备（平板电脑）上的断点
  md: 768,    // 中大屏幕设备上的断点
  lg: 992,    // 大屏幕设备（电脑）上的断点
  xl: 1200    // 超大屏幕设备上的断点
};

// 创建断点实例
const breakpoint = createBreakpoint(customBreakpoints);

// 注册断点实例到Vant
createApp(App).use(breakpoint).mount('#app');

在这个示例代码中，我们首先通过createBreakpoint函数创建了一个断点实例，并传入了自定义的断点设置对象customBreakpoints。然后，将断点实例注册到Vant的Vue应用中。

通过自定义断点设置，您可以根据需要定义不同屏幕尺寸下的断点值。例如，xs表示小屏幕设备（手机）上的断点，sm表示中等屏幕设备（平板电脑）上的断点，以此类推。您可以根据实际需求调整断点的数值。

四、响应式工具类实现响应式布局示例代码

在这里插入图片描述Vant提供了一系列响应式的CSS类，用于控制组件在不同屏幕尺寸下的显示和布局。您可以通过在元素上添加相应的CSS类，实现响应式的样式调整。以下是一些常用的响应式工具类示例代码：

  1. 隐藏和显示类：
<!-- 在手机设备上隐藏该元素 -->
<div class="van-xs-hide">内容</div>

<!-- 在平板电脑设备上显示该元素 -->
<div class="van-sm-show">内容</div>
  1. 布局类：
<!-- 在小屏幕设备上设置元素宽度为100% -->
<div class="van-xs-24">内容</div>

<!-- 在中等屏幕设备上设置元素宽度为50% -->
<div class="van-md-12">内容</div>

<!-- 在大屏幕设备上设置元素宽度为33.33% -->
<div class="van-lg-8">内容</div>
  1. 偏移类：
<!-- 在小屏幕设备上设置元素左侧偏移为20px -->
<div class="van-xs-offset-20">内容</div>

<!-- 在中等屏幕设备上设置元素右侧偏移为10px -->
<div class="van-md-offset-right-10">内容</div>
  1. 对齐类：
<!-- 在小屏幕设备上设置元素居中对齐 -->
<div class="van-xs-text-center">内容</div>

<!-- 在中等屏幕设备上设置元素右对齐 -->
<div class="van-md-text-right">内容</div>

这些是一些常用的响应式工具类示例代码，您可以根据实际需求选择合适的类应用于元素上，以实现在不同屏幕尺寸下的样式调整。

五、栅格系统实现响应式布局示例代码

在这里插入图片描述Vant提供了栅格系统，用于实现灵活的响应式布局。您可以将组件放置在栅格中，根据不同的屏幕尺寸设置栅格的列数和宽度，实现自适应的布局效果。以下是一个示例代码，演示了如何使用Vant的栅格系统：

<van-row :gutter="20">
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第一列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第二列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第三列内容 -->
  </van-col>
  <van-col :span="24" :sm="12" :md="8" :lg="6">
    <!-- 第四列内容 -->
  </van-col>
</van-row>

在这个示例代码中，我们使用了van-row和van-col组件来创建栅格布局。van-row表示一行，包含多个列。van-col表示每一列，可以设置不同的列宽。

通过设置:span属性值，可以控制每列在不同屏幕尺寸下所占的宽度比例。例如，:sm="12"表示在小屏幕设备（如手机）上，该列占据总宽度的一半，:md="8"表示在中等屏幕设备（如平板电脑）上，该列占据总宽度的三分之一，:lg="6"表示在大屏幕设备（如电脑）上，该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容，并根据不同屏幕尺寸调整:span属性值，以达到您想要的响应式布局效果。

六、响应式组件实现响应式布局示例代码

在这里插入图片描述Vant的栅格系统是通过van-row和van-col组件来实现的，这两个组件用于创建栅格布局。可以根据不同屏幕尺寸设置每列的宽度，从而实现响应式布局。以下是一个示例代码：

<template>
  <van-row :gutter="20">
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第一列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第二列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第三列内容 -->
    </van-col>
    <van-col :span="24" :sm="12" :md="8" :lg="6">
      <!-- 第四列内容 -->
    </van-col>
  </van-row>
</template>

<script>
export default {
  // 组件逻辑代码
}
</script>

<style scoped>
/* 样式代码 */
</style>

在这个示例代码中，我们使用了van-row和van-col组件来创建栅格布局。通过设置:span属性值，可以控制每列在不同屏幕尺寸下所占的宽度比例。例如，:sm="12"表示在小屏幕设备（如手机）上，该列占据总宽度的一半，:md="8"表示在中等屏幕设备（如平板电脑）上，该列占据总宽度的三分之一，:lg="6"表示在大屏幕设备（如电脑）上，该列占据总宽度的四分之一。

您可以根据实际需求修改每列的内容，并根据不同屏幕尺寸调整:span属性值，以达到您想要的响应式布局效果。

七、内置的媒体查询工具类来设置样式实现响应式布局示例代码

在这里插入图片描述以下是使用Vant内置的媒体查询工具类来设置样式的示例代码：

<template>
  <div>
    <div class="van-xs">Extra Small Screen</div>
    <div class="van-sm">Small Screen</div>
    <div class="van-md">Medium Screen</div>
    <div class="van-lg">Large Screen</div>
    <div class="van-xl">Extra Large Screen</div>
  </div>
</template>

<style>
.van-xs {
  /* 样式针对 extra small 屏幕尺寸 */
}

.van-sm {
  /* 样式针对 small 屏幕尺寸 */
}

.van-md {
  /* 样式针对 medium 屏幕尺寸 */
}

.van-lg {
  /* 样式针对 large 屏幕尺寸 */
}

.van-xl {
  /* 样式针对 extra large 屏幕尺寸 */
}
</style>

在上面的示例中，我们使用了.van-xs、.van-sm、.van-md、.van-lg、.van-xl这些类名来分别针对不同的屏幕尺寸设置样式。你可以根据需要在对应的类名下编写样式规则，以实现在不同屏幕尺寸下的样式适配。

八、自定义断点设置实现响应式布局示例代码

在这里插入图片描述要自定义断点并配置Vant的断点设置，可以按照以下示例代码进行操作：

// 在项目的入口文件中引入 Vant
import { createApp } from 'vue';
import { vant } from 'vant';
import 'vant/lib/index.css';

const app = createApp(App);
app.use(vant);
app.mount('#app');

// 创建一个自定义的 Vant 断点配置文件（例如 breakpoints.js）
export default {
  xs: 480, // extra small
  sm: 576, // small
  md: 768, // medium
  lg: 992, // large
  xl: 1200, // extra large
};

// 在项目中的需要的地方引入自定义的断点配置文件
import breakpoints from './breakpoints';

// 在使用 Vant 之前，修改 Vant 的默认断点配置
import { use } from 'vant';

use({
  install(app) {
    app.config.globalProperties.$vant = {
      ...app.config.globalProperties.$vant,
      ...breakpoints,
    };
  },
});

通过上述代码，我们在项目中引入了 Vant，并创建了一个自定义的断点配置文件 breakpoints.js。在该文件中，我们定义了自己的断点尺寸，例如 xs、sm、md、lg、xl。

然后，在项目中需要使用 Vant 的地方，我们引入了自定义的断点配置文件，并通过 Vant 的 use 方法修改了默认断点配置。这样，Vant 将使用我们自定义的断点配置来进行布局和样式的适配。

请注意，以上示例中的代码是基于 Vue 3.x 和 Vant 3.x 的。如果你使用的是其他版本的 Vue 或 Vant，请根据相应的版本文档进行适配。

九、Flex实现响应式布局示例代码

在这里插入图片描述Vant广泛使用Flexbox弹性布局模型来设计和布局组件，以实现在不同屏幕尺寸下的自适应和排列。以下是一个使用Vant Flex布局的示例代码：

<template>
  <div class="container">
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
    </div>
  </div>
</template>

<style>
.container {
  width: 100%;
  height: 300px;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item {
  flex: 1 0 33.33%;
  padding: 10px;
  box-sizing: border-box;
}
</style>

在上面的示例中，我们创建了一个容器 .container，并在其中使用了Flex布局。.flex-container 是一个Flex容器，它的子元素 .flex-item 会根据剩余空间自动排列。

通过设置 .flex-item 的 flex 属性，我们指定了子元素的弹性，其中 flex: 1 0 33.33% 表示子元素的弹性比例为1，不允许缩小，初始宽度为33.33%。这样，无论容器的宽度如何变化，子元素都会平均占据一行的三分之一空间。

你可以根据需要在Flex容器和子元素上应用不同的样式，并根据项目要求进行调整。这样，Vant的Flex布局能够帮助你实现在不同屏幕尺寸下的自适应和排列效果。
在这里插入图片描述下面是一个更复杂的示例代码，展示了如何在Vant中使用Flex布局，并结合其他组件进行更丰富的布局和排列：

<template>
  <div class="container">
    <van-row>
      <van-col span="12">
        <div class="box">Box 1</div>
      </van-col>
      <van-col span="12">
        <div class="box">Box 2</div>
      </van-col>
    </van-row>

    <van-row>
      <van-col span="8">
        <div class="box">Box 3</div>
      </van-col>
      <van-col span="8">
        <div class="box">Box 4</div>
      </van-col>
      <van-col span="8">
        <div class="box">Box 5</div>
      </van-col>
    </van-row>
  </div>
</template>

<style>
.container {
  width: 100%;
  height: 300px;
}

.box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
}
</style>

在上面的示例中，我们使用了Vant的 van-row 和 van-col 组件来实现更灵活的布局。通过在 van-row 中使用 van-col，我们可以将内容划分为多个列，并根据需要进行自适应排列。

每个 van-col 组件都可以设置 span 属性来指定所占的列数。在示例中，我们在第一行中有两个 van-col，每个占据了12列（即占据了一半的宽度），而在第二行中有三个 van-col，每个占据了8列（即占据了三分之一的宽度）。

在每个 van-col 的内部，我们放置了一个具有 .box 类的 div 元素，用于展示灵活的内容。通过设置 .box 的样式，我们使其垂直居中并水平居中，同时给它一个背景颜色和边框，以便更好地展示布局效果。

你可以根据自己的需求和设计来修改和扩展这个示例，利用Vant的Flex布局和其他组件，实现更丰富的自适应布局和排列效果。

十、归纳总结

在这里插入图片描述当涉及到Vant的响应式布局，以下是一些重要的知识点：

  1. 使用Flexbox弹性布局：Vant广泛使用Flexbox弹性布局模型来实现组件的自适应和排列。通过设置容器和子元素的display: flex，可以创建一个Flex容器，并使用flex属性来控制子元素的弹性。

  2. 使用van-row和van-col组件：Vant提供了van-row和van-col组件，用于更灵活地实现响应式布局。van-row表示一行，可以在其中放置多个van-col组件，每个van-col组件代表一个列，并可以根据需要设置所占的列数。

  3. 使用span属性控制列数：在van-col组件中，可以使用span属性来控制所占的列数。例如，span="12"表示占据12列（即占据一半的宽度），span="8"表示占据8列（即占据三分之一的宽度），以此类推。

  4. 自定义样式：可以根据需要在Flex容器和子元素上应用自定义的样式，例如设置宽度、高度、对齐方式等。通过调整样式，可以实现不同屏幕尺寸下的自适应布局和排列效果。

在这里插入图片描述这些知识点可以帮助你在Vant中实现响应式布局。根据具体的项目需求，你可以灵活运用这些知识来创建适应不同屏幕尺寸的布局。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1444879.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode.144. 二叉树的前序遍历

LeetCode.144. 二叉树的前序遍历

题目 144. 二叉树的前序遍历 分析 这道题目是比较基础的题目&#xff0c;我们首先要知道二叉树的前序遍历是什么&#xff1f; 就是【根 左 右】 的顺序&#xff0c;然后利用递归的思想&#xff0c;就可以得到这道题的答案&#xff0c;任何的递归都可以采用 栈 的结构来实现…
阅读更多...
【单片机】简单的自定义延时程序设计（代码演示）

【单片机】简单的自定义延时程序设计（代码演示）

前言 大家好吖&#xff0c;欢迎来到 YY 滴 单片机系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY…
阅读更多...
洛谷UVA题目Unknown Error

洛谷UVA题目Unknown Error

UnexpectedResponseStatus: expect status code: 301 Moved Permanently on https://onlinejudge.org/index.php?optioncom_comprofiler&tasklogin, got: 200 OK 如果你绑定了账号&#xff0c;去原站Online Judge - Home 登录一下&#xff0c;好久没登陆&#xff0c;需要激…
阅读更多...
ElasticSearch级查询Query DSL上

ElasticSearch级查询Query DSL上

目录 ES高级查询Query DSL match_all 返回源数据_source 返回指定条数size 分页查询from&size 指定字段排序sort 术语级别查询 Term query术语查询 Terms Query多术语查询 exists query ids query range query范围查询 prefix query前缀查询 wildcard query通…
阅读更多...
vs2019 - signtool签名和验签的手工操作

vs2019 - signtool签名和验签的手工操作

文章目录 vs2019 - signtool签名和验签的手工操作概述笔记导入根证书时间戳服务器的选择code sign - 签名文件在代码签名(code sign)前后的区别签名后, 查看属性, 是正常的.用signtool命令行进行验签移除签名END vs2019 - signtool签名和验签的手工操作 概述 signtool是进行c…
阅读更多...
【深度学习：MPT-30B】提高开源基础模型的标准

【深度学习：MPT-30B】提高开源基础模型的标准

【深度学习&#xff1a;MPT-30B】提高开源基础模型的标准 MPT-30B家族MPT-30B (Base)MPT-30B-InstructMPT-30B-Chat使用 MosaicML Inference 部署 MPT-30B 模型通过 MosaicML 培训定制 MPT-30BLLM Foundry 下一步是什么&#xff1f; 附录致谢数据MPT-30B 8k 上下文窗口微调数据…
阅读更多...
2.12作业

2.12作业

程序代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h>//递归实现n! int n(int element) {if(0element)return 1;return element*n(element-1); }//递归实现0-n的和 int sub_sum(int element) {if(0element)return 0;return eleme…
阅读更多...
Java的接口

Java的接口

目录 1.接口的概念 2.语法规则 3.接口的使用 4.接口的特性 总结&#xff1a; 5.实现多个接口 6.接口间的继承 1.接口的概念 接口就是公共的行为规范标准&#xff0c;大家在实现时&#xff0c;只要符合规范标准&#xff0c;就可以通用。 在Java中&#xff0c;接口可以看成…
阅读更多...
C语言求解猴子分桃子

C语言求解猴子分桃子

问题&#xff1a;海滩上有一堆桃子&#xff0c;五只猴子来分。第一只猴子把这堆桃子平均分为五份&#xff0c;多了一个&#xff0c;这只 猴子把多的一个扔入海中&#xff0c;拿走了一份。第二只猴子把剩下的桃子又平均分成五份&#xff0c;又多了 一个&#xff0c;它同样把多的…
阅读更多...
【Java】Spring如何扫描自定义的注解？

【Java】Spring如何扫描自定义的注解？

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋…
阅读更多...
重温阿里云宝塔面板部署前后端项目

重温阿里云宝塔面板部署前后端项目

首先祝大家新年快乐啊&#xff01; 回到老家&#xff0c;便打算趁这一段空闲时间提升一下自己&#xff0c;重点是学习实践一下echarts相关内容&#xff0c;很多公司项目都需要实现可视化&#xff0c;所以在bilibili上找了黑马的一个教程开始学习&#xff0c;不同的是&#xff…
阅读更多...
每日五道java面试题之java基础篇（五）

每日五道java面试题之java基础篇（五）

第一题. final、finally、finalize 的区别&#xff1f; final ⽤于修饰变量、⽅法和类&#xff1a;final 修饰的类不可被继承&#xff1b;修饰的⽅法不可被重写&#xff1b;修饰的变量不可变。finally 作为异常处理的⼀部分&#xff0c;它只能在 try/catch 语句中&#xff0c;…
阅读更多...
Nginx与history路由模式：刷新页面404问题

Nginx与history路由模式：刷新页面404问题

使用nginx部署前端项目&#xff0c;路由模式采用history模式时&#xff0c;刷新页面之后&#xff0c;显示404。 路由模式 前端路由的基本作用为&#xff1a; ①当浏览器地址变化时&#xff0c;切换页面&#xff1b; ②点击浏览器后退、前进按钮时&#xff0c;更新网页内容&…
阅读更多...
【python】网络爬虫与信息提取--requests库

【python】网络爬虫与信息提取--requests库

导学 当一个软件想获得数据&#xff0c;那么我们只有把网站当成api就可以 requests库:自动爬取HTML页面&#xff0c;自动网络请求提交 robots协议&#xff1a;网络爬虫排除标准&#xff08;网络爬虫的规则&#xff09; beautiful soup库&#xff1a;解析HTML页面 工具&…
阅读更多...
使用Cargo创建、编译与运行Rust项目

使用Cargo创建、编译与运行Rust项目

在 Rust 开发中&#xff0c;Cargo 是一个非常重要的工具&#xff0c;它负责项目的构建、管理和依赖管理。以下是如何使用 Cargo 创建、编译和运行 Rust 项目的详细步骤。 1. 创建新项目 首先确保你已经在计算机上安装了 Rust 和 Cargo。然后&#xff0c;在命令行中输入以下命…
阅读更多...
美比特币ETF持仓跨越20万枚BTC大关，成为华尔街有史以来最受欢迎的ETF！

美比特币ETF持仓跨越20万枚BTC大关，成为华尔街有史以来最受欢迎的ETF！

号外&#xff1a;教链内参2.10《内参&#xff1a;BTC真的存在春节模式吗&#xff1f;》 自SEC在2024年1月份一口气批准了十多支比特币现货ETF之后&#xff0c;机构们“不待扬鞭自奋蹄”&#xff0c;在吸收客户上使出浑身解数&#xff0c;激烈竞争。贝莱德&#xff08;IBIT&…
阅读更多...
基于微信小程序的在线课堂的研究与实现，附源码

基于微信小程序的在线课堂的研究与实现，附源码

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
【Linux】信号保存与信号捕捉处理

【Linux】信号保存与信号捕捉处理

信号保存与信号捕捉 一、信号保存1. 信号的发送2. 理解信号保存&#xff08;1&#xff09;信号保存原因&#xff08;2&#xff09;信号保存概念 3. 信号保存系统接口&#xff08;1&#xff09;sigset_t&#xff08;2&#xff09;sigprocmask()&#xff08;3&#xff09;sigpend…
阅读更多...
【机器学习】支持向量机（SVM）

【机器学习】支持向量机（SVM）

支持向量机&#xff08;SVM&#xff09; 1 背景信息 分类算法回顾 决策树 样本的属性非数值 目标函数是离散的 贝叶斯学习 样本的属性可以是数值或非数值目标函数是连续的&#xff08;概率&#xff09; K-近邻 样本是空间&#xff08;例如欧氏空间&#xff09;中的点目标函…
阅读更多...
《统计学简易速速上手小册》第9章：统计学在现代科技中的应用（2024 最新版）

《统计学简易速速上手小册》第9章：统计学在现代科技中的应用（2024 最新版）

文章目录 9.1 统计学与大数据9.1.1 基础知识9.1.2 主要案例&#xff1a;社交媒体情感分析9.1.3 拓展案例 1&#xff1a;电商销售预测9.1.4 拓展案例 2&#xff1a;实时交通流量分析 9.2 统计学在机器学习和人工智能中的应用9.2.1 基础知识9.2.2 主要案例&#xff1a;预测客户流…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023