【前端-VUE+TS】Vue3组件化-知识补充(六)

news2024/11/24 14:24:39

一. 动态组件

比如我们现在想要实现了一个功能:

  • 点击一个tab-bar,切换不同的组件显示;

案例截图

这个案例我们可以通过两种不同的实现思路来实现:

  • 方式一:通过v-if来判断,显示不同的组件;
  • 方式二:动态组件的方式;

1.1. v-if显示不同组件

我们可以先通过v-if来判断显示不同的组件,这个可以使用我们之前讲过的知识来实现:

<template>
  <div>
    <button v-for="tab in tabs" 
    :key="tab" 
    :class="{ active: currentTab === tab }" 
    @click="tabClick(tab)">
      {{ tab }}
    </button>

    <template v-if="currentTab === 'home'">
      <home></home>
    </template>
    <template v-else-if="currentTab === 'about'">
      <about></about>
    </template>
    <template v-else>
      <category></category>
    </template>
  </div>
</template>

<script>
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";
import Category from "./pages/Category.vue";

export default {
  components: {
    Home, About, Category
  },
  data () {
    return {
      tabs: ["home", "about", "category"],
      currentTab: "home"
    }
  },
  methods: {
    tabClick (tab) {
      this.currentTab = tab;
    }
  }
}
</script>

<style scoped>
.active {
  color: red;
}
</style>

这里不再给出过多解释,都是之前讲过的内容。

1.2. 动态组件的实现

动态组件是使用 component 组件,通过一个特殊的attribute is  来实现:

<template>
  <div>
    <button v-for="tab in tabs" 
    :key="tab" 
    :class="{ active: currentTab === tab }" 
    @click="tabClick(tab)">
      {{ tab }}
    </button>

    <component :is="currentTab"></component>
  </div>
</template>

这个currentTab的值需要是什么内容呢?

  • 可以是通过component函数注册的组件;
  • 在一个组件对象的components对象中注册的组件;

1.3. 动态组件的传值

如果是动态组件我们可以给它们传值和监听事件吗?

  • 也是一样的;
  • 只是我们需要将属性和监听事件放到component上来使用;

App.vue的代码如下:

<template>
  <div>
    <button v-for="tab in tabs" 
    :key="tab" 
    :class="{ active: currentTab === tab }" 
    @click="tabClick(tab)">
      {{ tab }}
    </button>

    <component name="why" 
    :age="18" 
    @pageClick="pageClick" 
    :is="currentTab" />
  </div>
</template>
  
<script>
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";
import Category from "./pages/Category.vue";

export default {
  components: {
    Home, About, Category
  },
  data () {
    return {
      tabs: ["home", "about", "category"],
      currentTab: "home"
    }
  },
  methods: {
    tabClick (tab) {
      this.currentTab = tab;
    },
    pageClick (payload) {
      console.log("pageClick", payload);
    }
  }
}
</script>
  
<style scoped>
.active {
  color: red;
}
</style>
  

Home.vue中的代码如下:

<template>
  <div @click="pageClick">
    Home组件: {{ name }}-{{ age }}
  </div>
</template>
  
<script>
export default {
  props: {
    name: String,
    age: Number
  },
  emits: ["pageClick"],
  methods: {
    pageClick () {
      this.$emit("pageClick", "Home组件");
    }
  }
}
</script>
  

1.4. keep-alive使用

1.4.1. 认识keep-alive

我们先对之前的案例中About组件进行改造:

  • 在其中增加了一个按钮,点击可以递增的功能;
<template>
  <div>
    About组件
    <button @click="counter++">{{ counter }}</button>
  </div>
</template>
  
<script>
export default {
  data () {
    return {
      counter: 0
    }
  }
}
</script>
  

比如我们将counter点到10,那么在切换到home再切换回来about时,状态是否可以保持呢?

  • 答案是否定的;
  • 这是因为默认情况下,我们在切换组件后,about组件会被销毁掉,再次回来时会重新创建组件;

但是,在开发中某些情况我们希望继续保持组件的状态,而不是销毁掉,这个时候我们就可以使用一个内置组件:keep-alive。

<keep-alive>
  <component name="why" 
  :age="18" 
  @pageClick="pageClick" 
  :is="currentTab"/>
</keep-alive>

1.4.2. keep-alive属性

keep-alive有一些属性

  • include - string | RegExp | Array。只有名称匹配的组件会被缓存;
  • exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存;
  • max - number | string。最多可以缓存多少组件实例,一旦达到这个数字,那么缓存组件中最近没有被访问的实例会被销毁;

include 和 exclude prop 允许组件有条件地缓存:

  • 二者都可以用逗号分隔字符串、正则表达式或一个数组来表示;
  • 匹配首先检查组件自身的 name 选项;
  • 如果 name 选项不可用,则匹配它的局部注册名称 (父组件 components 选项的键值);
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>
  
  <!-- regex (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>
  
  <!-- Array (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>
  

1.4.3. 缓存的生命周期

对于生命周期的知识下面的四有讲解,因为这部分知识和keep-alive联系紧密,所以放到了这里。

大家可以等学习了生命周期后,再回头看这部分的内容。

对于缓存的组件来说,再次进入时,我们是不会执行created或者mounted等生命周期函数的:

  • 但是有时候我们确实希望监听到何时重新进入到了组件,何时离开了组件;
  • 这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听;
<template>
  <div>
    About组件
    <button @click="counter++">{{ counter }}</button>
  </div>
</template>
  
<script>
export default {
  name: "about",
  data () {
    return {
      counter: 0
    }
  },
  // 当重新进入活跃状态时会回调
  activated () {
    console.log("about activated")
  },
  // 当离开活跃状态时会回调
  deactivated () {
    console.log("about deactivated")
  }
}
</script>
  

二. 异步组件

2.1. webpack的代码分包

默认的打包过程:

  • 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中);
  • 这个时候随着项目的不断庞大,app.js文件的内容过大,会造成首屏的渲染速度变慢;

打包时,代码的分包:

  • 所以,对于一些不需要立即使用的组件,我们可以单独对它们进行拆分,拆分成一些小的代码块chunk.js;
  • 这些chunk.js会在需要时从服务器加载下来,并且运行代码,显示对应的内容;

那么webpack中如何可以对代码进行分包呢?

默认情况下,我们直接使用import来依赖一个模块时,是不会进行分包的:

import {sum} from './utils/math';
console.log(sum(20, 30));

如果我们希望进行分包,那么可以使用import函数:

import("./utils/math").then(({ sum }) => {
  console.log(sum(20, 30));
});

import打包后的效果

2.2. vue中实现异步组件

如果我们的项目过大了,对于某些组件我们希望通过异步的方式来进行加载(目的是可以对其进行分包处理),那么Vue中给我们提供了一个函数:defineAsyncComponent

defineAsyncComponent接受两种类型的参数:

  • 类型一:工厂函数,该工厂函数需要返回一个Promise对象;
  • 类型二:接受一个对象类型,对异步函数进行配置;

工厂函数类型一的写法:

<script>
import { defineAsyncComponent } from 'vue';
const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"));

export default {
  components: {
    AsyncHome
  }
}
</script>

对象类型类型二的写法:

<script>
import { defineAsyncComponent } from "vue";
// const AsyncHome = defineAsyncComponent(() => import("./AsyncHome.vue"));

import Loading from "./Loading.vue";
import Error from "./Error.vue";
const AsyncHome = defineAsyncComponent({
  // 工厂函数
  loader: () => import("./AsyncHome.vue"),
  // 加载过程中显示的组件
  loadingComponent: Loading,
  // 加载失败时显示的组件
  errorComponent: Error,
  // 在显示 loadingComponent 之前的延迟 | 默认值:200(单位 ms)
  delay: 200,
  // 如果提供了 timeout ,并且加载组件的时间超过了设定值,将显示错误组件
  // 默认值:Infinity(即永不超时,单位 ms)
  timeout: 3000,
  // 定义组件是否可挂起 | 默认值:true
  suspensible: false,
  /**
  *
  * @param {*} error 错误信息对象
  * @param {*} retry 一个函数,用于指示当 promise 加载器 reject 时,加载器是否应该重试
  * @param {*} fail  一个函数,指示加载程序结束退出
  * @param {*} attempts 允许的最大重试次数
  */
  onError (error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试,最多可尝试 3 次
      retry();
    } else {
      // 注意,retry/fail 就像 promise 的 resolve/reject 一样:
      // 必须调用其中一个才能继续错误处理。
      fail();
    }
  },
});

export default {
  components: {
    AsyncHome,
  },
};
</script>

2.3. 异步组件和Suspense

注意,目前(2021-06-08)Suspense显示的是一个实验性的特性,API随时可能会修改。

Suspense是一个内置的全局组件,该组件有两个插槽:

  • default:如果default可以显示,那么显示default的内容;
  • fallback:如果default无法显示,那么会显示fallback插槽的内容;
<template>
  <div>
    <suspense>
      <template #default>
        <async-home></async-home>
      </template>

      <template #fallback>
        <loading />
      </template>
    </suspense>
  </div>
</template>

三. 模块引用

3.1. $refs

某些情况下,我们在组件中想要直接获取到元素对象或者子组件实例:

  • 在Vue开发中我们是不推荐进行DOM操作的;
  • 这个时候,我们可以给元素或者组件绑定一个ref的attribute属性;

组件实例有一个$refs属性:

  • 它一个对象Object,持有注册过 ref attribute 的所有 DOM 元素和组件实例。

App.vue的实现:

<template>
  <div>
    <h2 ref="title">哈哈哈</h2>
    <hello-world ref="helloCpn"></hello-world>

    <button @click="visitElement">访问元素或者组件</button>
  </div>
</template>
  
<script>
import HelloWorld from './HelloWorld.vue';

export default {
  components: {
    HelloWorld
  },
  methods: {
    visitElement () {
      // 访问元素
      console.log(this.$refs.title);
      // 访问组件实例
      this.$refs.helloCpn.showMessage();
    }
  }
}
</script>
  

HelloWorld.vue实现:

<template>
  <div>

  </div>
</template>
  
<script>
export default {
  methods: {
    showMessage () {
      console.log("我是HelloWorld组件的showMessage方法");
    }
  }
}
</script>
  

3.2. $parent

我们可以通过$parent来访问父元素。

HelloWorld.vue的实现:

  • 这里我们也可以通过$root来实现,因为App是我们的根组件;
<template>
  <div>
    <button @click="visitParent">访问父组件</button>
  </div>
</template>
  
<script>
export default {
  methods: {
    showMessage () {
      console.log("我是HelloWorld组件的showMessage方法");
    },
    visitParent () {
      console.log(this.$parent.message);
    }
  }
}
</script>
  

注意:在Vue3中已经移除了$children的属性,所以不可以使用了。

四. 生命周期

4.1. 生命周期图片

什么是生命周期呢?

  • 每个组件都会经历从创建、挂载、更新、卸载等一系列的过程;
  • 在这个过程中的某一个阶段,用于可能会想要添加一些属于自己的代码逻辑(比如组件创建完后就请求一些服务器数据);
  • 但是我们如何可以知道目前组件正在哪一个过程呢?Vue给我们提供了组件的生命周期函数;

生命周期函数:

  • 生命周期函数是一些钩子函数,在某个时间会被Vue源码内部进行回调;
  • 通过对生命周期函数的回调,我们可以知道目前组件正在经历什么阶段;
  • 那么我们就可以在该生命周期中编写属于自己的逻辑代码了;

实例的生命周期

4.2. 生命周期演练

我们通过一个App和Home来演练所有的生命周期函数。

App.vue组件对象:

<template>
  <div>
    <button @click="toggle">切换</button>
    <div v-if="isShow">
      <home></home>
    </div>
  </div>
</template>
  
<script>
import Home from './Home.vue';

export default {
  components: {
    Home
  },
  data () {
    return {
      isShow: true
    }
  },
  methods: {
    toggle () {
      this.isShow = !this.isShow;
      console.log(this.isShow);
    }
  }
}
</script>
  

Home.vue组件对象:

<template>
  <div>
    <button @click="changeMessage">修改message</button>
    <h2 ref="titleRef">{{ message }}</h2>
  </div>
</template>
  
<script>
export default {
  data () {
    return {
      message: "Hello World"
    }
  },
  methods: {
    changeMessage () {
      this.message = "你好啊,李银河";
    }
  },
  beforeUpdate () {
    console.log("beforeUpdate");
    console.log(this.$refs.titleRef.innerHTML);
  },
  updated () {
    console.log("updated");
    console.log(this.$refs.titleRef.innerHTML);
  },
  beforeCreate () {
    console.log("beforeCreate");
  },
  created () {
    console.log("created");
  },
  beforeMount () {
    console.log("beforeMount");
  },
  mounted () {
    console.log("mounted");
  },
  beforeUnmount () {
    console.log("beforeUnmount");
  },
  unmounted () {
    console.log("unmounted");
  }
}
</script>
  

五. 组件的v-model

5.1. 组件的v-model

前面我们在input中可以使用v-model来完成双向绑定:

  • 这个时候往往会非常方便,因为v-model默认帮助我们完成了两件事;
  • v-bind:value的数据绑定和@input的事件监听;

如果我们现在封装了一个组件,其他地方在使用这个组件时,是否也可以使用v-model来同时完成这两个功能呢?

  • 也是可以的,vue也支持在组件上使用v-model;

当我们在组件上使用的时候,等价于如下的操作:

  • 我们会发现和input元素不同的只是属性的名称和事件触发的名称而已;

那么,为了我们的MyInput组件可以正常的工作,这个组件内的 <input> 必须:

  • 将其 value attribute 绑定到一个名叫 modelValue 的 prop 上;
  • 在其 input 事件被触发时,将新的值通过自定义的 update:modelValue 事件抛出;

MyInput.vue的组件代码如下:

<template>
  <div>
    <input :value="modelValue" @input="inputChange">
  </div>
</template>
  
<script>
export default {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  methods: {
    inputChange (event) {
      this.$emit("update:modelValue", event.target.value);
    }
  }
}
</script>
  

在App.vue中,我们在使用MyInput可以直接使用v-model:

<template>
  <div>
    <my-input v-model="message" />
    <button @click="changeMessage">修改message</button>
  </div>
</template>
  
<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  data () {
    return {
      message: ""
    }
  },
  methods: {
    changeMessage () {
      this.message = "Hello World"
    }
  }
}
</script>
  

5.2. computed实现

在上面的案例中,我们可能会想到一种实现方法:直接将Props中的属性双向绑定到input上

<template>
  <div>
    <input v-model="modelValue">
  </div>
</template>
  
<script>
export default {
  props: ["modelValue"]
}
</script>
  

上面这种方式可以实现组件的双向绑定吗?答案是不可以

  • 因为我们在内部修改了props之后,外界并不知道我们对props的修改,所以并不会将事件传递出去;
  • 另外,在开发中直接修改props中的属性不是一个好的习惯,不要这样去做;

那么,我们依然希望在组件内部按照双向绑定的做法去完成,应该如何操作呢?我们可以使用计算属性的settergetter来完成。

<template>
  <div>
    <input v-model="value">
  </div>
</template>
  
<script>
export default {
  props: ["modelValue"],
  emits: ["update:modelValue"],
  computed: {
    value: {
      get () {
        return this.modelValue;
      },
      set (value) {
        this.$emit("update:modelValue", value)
      }
    }
  }
}
</script>
  

5.3. 绑定多个属性

我们现在通过v-model是直接绑定了一个属性,如果我们希望绑定多个属性呢?也就是我们希望在一个组件上使用多个v-model是否可以实现呢?

  • 我们知道,默认情况下的v-model其实是绑定了 modelValue 属性和 @update:modelValue的事件;
  • 如果我们希望绑定更多,可以给v-model传入一个参数,那么这个参数的名称就是我们绑定属性的名称;

我们先看一下在App.vue中我是如何使用的:

<template>
  <div>
    <my-input v-model="message" v-model:title="title" />
    <h2>{{ message }}</h2>
    <button @click="changeMessage">修改message</button>
    <hr>
    <h2>{{ title }}</h2>
    <button @click="changeTitle">修改title</button>
  </div>
</template>
  
<script>
import MyInput from './MyInput.vue';

export default {
  components: {
    MyInput
  },
  data () {
    return {
      message: "",
      title: ""
    }
  },
  methods: {
    changeMessage () {
      this.message = "Hello World"
    },
    changeTitle () {
      this.title = "Hello Title"
    }
  }
}
</script>
  

注意:这里我是绑定了两个属性的

<my-input v-model="message" v-model:title="title"/>

v-model:title相当于做了两件事:

  • 绑定了title属性;
  • 监听了 @update:title的事件;

所以,我们MyInput中的实现如下:

<template>
  <div>
    <input :value="modelValue" @input="input1Change">
    <input :value="title" @input="input2Change">
  </div>
</template>
  
<script>
export default {
  props: ["modelValue", "title"],
  emits: ["update:modelValue", "update:title"],
  methods: {
    input1Change (event) {
      this.$emit("update:modelValue", event.target.value);
    },
    input2Change (event) {
      this.$emit("update:title", event.target.value);
    }
  }
}
</script>

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

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

相关文章

Flink中StateBackend(工作状态)与Checkpoint(状态快照)的关系

State Backends 由 Flink 管理的 keyed state 是一种分片的键/值存储&#xff0c;每个 keyed state 的工作副本都保存在负责该键的 taskmanager 本地中。另外&#xff0c;Operator state 也保存在机器节点本地。Flink 定期获取所有状态的快照&#xff0c;并将这些快照复制到持…

力扣349两个数的交集

题目连接&#xff1a;349. 两个数组的交集 - 力扣&#xff08;LeetCode&#xff09; 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1&#xff1a; 输入&#xff1a; nums1 [1,2,2…

学习嵌入式的第十二天-------二维数组函数的调用和指针的运算

二维数组函数调用 输入设备-------cpu------输出设备 | V 存储器 总线&#xff1a; 总线宽度&#xff1a;32位或64位 &#xff08;1.数据总线2.控制总线3.地址总线&#xff09; 练习&#xff1a; 定义一个二维整型数组&#xff0c;实现一个函数…

风水+起名测算小程序源码系统 带完整的安装代码包以及搭建教程

风水学是中国古老的一门学问&#xff0c;讲究人与自然的和谐&#xff0c;通过调整环境气场来影响人的运势和发展。而起名测算则是根据个人五行属性和命理特点&#xff0c;为其起一个好名字&#xff0c;以助其运势和发展。这两者结合&#xff0c;可以帮助用户更好地了解自己的命…

为什么每天上班明明没做什么体力活,却仍感觉到身体好累?

​为什么每天上班明明没做什么体力活&#xff0c;却仍感觉到身体好累&#xff1f; 在现代社会&#xff0c;许多人在工作中并不需要从事繁重的体力劳动&#xff0c;然而&#xff0c;他们却常常感到身体疲惫不堪。这种情况不仅发生在办公室工作的人群中&#xff0c;也普遍存在于…

前端Web开发

安装flask框架 pip install flask 导入flask模块 from flask import Flask 【可能遇到的问题】 出现了如下警告&#xff1a; WARNING: You are using pip version 21.2.4; however, version 22.0.4 is available.You should consider upgrading via the D:\Python\python…

java 社区资源管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web社区资源管系统是一套完善的java web信息管理系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为Mysql5.…

STM32低功耗模式概念

一、低功耗模式介绍 STM32 的低功耗模式有 3 种&#xff1a; 1)睡眠模式&#xff08;CM3 内核停止&#xff0c;外设仍然运行&#xff09; 2)停止模式&#xff08;所有时钟都停止&#xff09; 3)待机模式&#xff08;1.8V 内核电源关闭&#xff09; 在这三种低功耗模式中&#…

CGAL5.4.1 边塌陷算法

目录 1、使用曲面网格的示例 2、使用默认多面体的示例 3、使用丰富多面体的示例 主要对1、使用曲面网格的示例 进行深度研究 CGAL编译与安装CGAL安装到验证到深入_cgal测试代码-CSDN博客 参考资料CGAL 5.4.5 - Triangulated Surface Mesh Simplification: User Manual …

STM32通用定时器、计数器

时间记录&#xff1a;2024/1/30 一、时钟介绍&#xff08;TIM2-TIM5&#xff09; &#xff08;1&#xff09;通用定时器时钟频率介绍 内部时钟AHB为72MHz&#xff0c;经过APB1预分频器2分频变为36MHz&#xff0c;TIMxClk定时器时钟由时钟树可以看出&#xff0c;如果APB1预分…

力扣136、只出现一次的数字(简单)

1 题目描述 图1 题目描述 2 题目解读 在非空整数数组nums中&#xff0c;有一个元素只出现了一次&#xff0c;其余元素均出现两次。要求找出那个只出现一次的元素。 3 解法一&#xff1a;位运算 位运算&#xff0c;是一种非常简便的方法。 3.1 解题思路 异或运算&#xff0c;有…

PHP抽奖设置中奖率,以及防高并发

一、中奖率,先在后台设定好奖项名称,抽奖份数,以及中奖百分比 奖品表draw 二、 借助文件排他锁,在处理下单请求的时候,用flock锁定一个文件,如果锁定失败说明有其他订单正在处理,此时要么等待要么直接提示用户"服务器繁忙" 阻塞(等待)模式,一般都是用这个模…

如何开通GitHub Copilot

GitHub Copilot 是由GitHub 和OpenAI共同开发的人工智能代码辅助工具&#xff0c;可以自动地生成高质量代码片段、上下文信息等。 通过自然语言处理和机器学习技术&#xff0c;能够通过分析程序员编写的代码、注释和上下文信息&#xff0c;自动生成代码&#xff0c;减轻程序员的…

Centos 7.9 在线安装 VirtualBox 7.0

1 访问 Linux_Downloads – Oracle VM VirtualBox 2 点击 ​the Oracle Linux repo file 复制 内容到 /etc/yum.repos.d/. 3 在 /etc/yum.repos.d/ 目录下新建 virtualbox.repo&#xff0c;复制内容到 virtualbox.repo 并 :wq 保存。 [rootlocalhost centos]# cd /etc/yum.rep…

【js逆向】scrapy基础

目录 一, 爬虫工程化 二, scrapy简介 三, Scrapy工作流程(重点) 四, scrapy安装 4.1 pip 安装 4.2 wheel安装 五, Scrapy实例 六, 自定义数据传输结构item 七, scrapy使用小总结 一, 爬虫工程化 在之前的学习中我们已经掌握了爬虫这门技术需要的大多数的技术点, 但是我…

vue使用json格式化

安装 npm i bin-code-editor -S // Vue2 npm install vue-json-viewer --save 在main.js引用 //引入bin-code-editor相关插件和样式 import CodeEditor from bin-code-editor; import bin-code-editor/lib/styles/index.css; import JsonViewer from vue-json-viewer //vue使用…

【C++航海王:追寻罗杰的编程之路】引用、内联、auto关键字、基于范围的for、指针空值nullptr

目录 1 -> 引用 1.1 -> 引用概念 1.2 -> 引用特性 1.3 -> 常引用 1.4 -> 使用场景 1.5 -> 传值、传引用效率比较 1.6 -> 值和引用作为返回值类型的性能比较 1.7 -> 引用和指针的区别 2 -> 内联函数 2.1 -> 概念 2.2 -> 特性 3 -…

布局管理和样式表

目录 手动操作 相关功能解释&#xff1a; Qt Designer或者QC中的Spacer控件及其属性 网格布局 代码操作 setFocusPolicy() 如果不进行布局&#xff0c;意味着界面上的东西都是写死的。 当我们进行布局操作之后&#xff0c;控件的位置、大小一般会根据窗口缩放来自动调整。…

计算机设计大赛 深度学习 opencv python 实现中国交通标志识别

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 &#x1f525; 优质…

excel怎么设置密码?轻松保护您的工作表

在数字化时代&#xff0c;数据的安全性显得尤为重要。excel作为我们日常工作中广泛使用的办公软件&#xff0c;其中可能包含了大量的敏感数据。为了确保这些数据不被未授权的人访问&#xff0c;本文将为您详细介绍excel怎么设置密码&#xff0c;从而有效地保护您的数据安全。 方…