Vue的学习 —— <vue组件>

目录

前言

正文

一、选项式API与组合式API

二、生命周期函数

 1、onBeforeMount()

2、onMounted()

3、onBeforeUpdate()

4、onUpdated()

5、onBeforeUnmount()

6、onUnmounted()

三、组件之间的样式冲突

四、父组件向子组件传递数据

1、定义props

2、静态绑定props

3、动态绑定props

4、校验props

① 基本类型检查

② 必填项的校验

③ 属性默认值

④ 自定义验证函数

5、子组件向父组件传递数据

① 子组件向父组件传递自定义事件

② 在子组件中触发自定义事件

③ 在父组件中监听自定义事件


前言

在学习完第三章的基础知识后,已经可以编写一些简单的组件了,但是这样的组件功能比较简单,无法满足实际项目开发中各种复杂的需求。为了能够更灵活地使用组件,还需要更深入地学习组件的相关知识。

正文

一、选项式API与组合式API

Vue 3支持选项式API和组合式API。其中,选项式API是从Vue 2开始使用的一种写法,而Vue 3新增了组合式API的写法。选项式API是一种通过包含多个选项的对象来描述组件逻辑的API,其常用的选项包括data、methods、computed、watch等。组合式API相比于选项式API,组合式API是将组件中的数据、方法、计算属性、侦听器等代码全部组合在一起,写在setup()函数中。

选项式API写法如下:

<script>
export default {data() {return { // 定义数据 }},methods: { // 定义方法 },computed: { // 定义计算属性 },watch: { // 定义侦听器 }
}
</script>

组合式API写法如下:

<script>
import { computed, watch } from 'vue'
export default {setup() {const 数据名 = 数据值const 方法名 = () => {}const 计算属性名 = computed(() => {})watch(侦听器的来源, 回调函数, 可选参数)return { 数据名, 方法名, 计算属性名 }}
}
</script>

Vue提供的选项式API和组合式API这两种写法可以覆盖大部分的应用场景,它们是同一底层系统所提供的两套不同的接口。选项式API是在组合式API的基础上实现的。

二、生命周期函数

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。

Vue生命周期如下图所示:

  • 以下将在 vite 创建的工程中,举例说明生命周期函数

  • beforecatecreated,它们已经被setup方法本身所取代

  • 以下钩子都应该在组件的 setup() 阶段被同步调用

 1、onBeforeMount()

作用在组件被挂载之前被调用。(获取不到 DOM 元素)

描述:当这个钩子被调用时,组件已经完成了其响应式状态的设置,但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

2、onMounted()

作用在组件挂载完成后执行。(可以获取到DOM 元素)

描述:组件在以下情况下被视为已挂载:

  • 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。

  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时,才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用,或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。一般在这里进行数据网络请求操作

下面演示onMounted()函数的用法:

  1. 创建src\components\onMountedDemo.vue文件用于存放演示代码,写入如下代码:

    <script setup>
    import { onBeforeMount, onMounted } from "vue";
    ​
    console.log('setup')
    ​
    onBeforeMount(() => {console.log('onBeforeMount —— 组件挂载前执行')
    })
    ​
    onMounted(() => {console.log('onMounted —— 组件挂载后执行')
    })
    ​
    </script>
  2. 修改src\main.js文件,切换页面中显示的组件

    import App from './components/onMountedDemo.vue'
  3. 保存代码,使用浏览器访问http://127.0.0.1:5173/,打开开发者控制台,页面效果如下图所示:

3、onBeforeUpdate()

作用在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

描述:这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

4、onUpdated()

作用在组件因为响应式状态变更而更新其 DOM 树之后调用。

描述

  • 父组件的更新钩子将在其子组件的更新钩子之后调用。

  • 这个钩子会在组件的任意 DOM 更新后被调用,这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM,请使用 nextTick() 作为替代。

下面演示以上钩子的使用方法:

  1. 创建src\components\onMountedDemo.vue文件用于存放演示代码,写入如下代码:

    <template><div><h2>count 计数为:{{count}}</h2><button @click="count++">点击 + 1</button></div>
    </template>
    ​
    <script setup>
    import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
    ​
    const count = ref(0)
    ​
    console.log('setup')
    // 1
    onBeforeMount(() => {console.log('onBeforeMount —— 组件挂载前执行')
    })
    // 2
    onMounted(() => {console.log('onMounted —— 组件挂载后执行')console.log('===============================================')
    })
    ​
    // 3
    onBeforeUpdate(() => { console.log('onBeforeUpdate —— 数据更新前调用')
    })
    // 4
    onUpdated(() => {console.log('onUpdated —— 数据更新后调用')
    })
    ​
    </script>
  2. 修改src\main.js文件,切换页面中显示的组件

    import App from './components/onUpdated.vue'
  3. 保存代码,使用浏览器访问http://127.0.0.1:5173/,打开开发者控制台,点击页面上的“点击 + 1” 按钮,页面效果如下图所示:

5、onBeforeUnmount()

作用组件内实例被卸载之前调用

描述:当这个钩子被调用时,组件实例依然还保有全部的功能。

6、onUnmounted()

作用在组件实例被卸载之后调用

描述:一个组件在以下情况下被视为已卸载:

  • 其所有子组件都已经被卸载。

  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用,例如计时器、DOM 事件监听器或者与服务器的连接。

以上钩子代码示例:

App.vue组件中,通过 v-if 指令,控制 Hello.vue 组件的显示隐藏,来模拟组件的挂载/卸载,

下面演示卸载生命周期的用法:

  1. 创建src\components\unInstall.vue文件用于存放演示代码,写入如下代码:

    <template><div><h2>uninstall 组件</h2></div></template><script setup>import { onBeforeUnmount, onUnmounted } from "vue";
    ​onBeforeUnmount(() => {console.log('onBeforeUnmount —— 组件卸载前执行')})
    ​onUnmounted(() => {console.log('onUnmounted —— 组件卸载后执行')})</script>
  2. 在src/components/App.vue文件中显示上面创建的unInstall.vue组件,代码如下:

    <template><div><h2>count 计数为:{{count}}</h2><button @click="count++">点击 + 1</button><hr>
    ​<unInstall v-if="display"/><button @click="display=!display">挂载/卸载unInstall组件</button>
    ​</div>
    </template>
    ​
    <script setup>
    import { onBeforeMount, onBeforeUpdate, onMounted, onUpdated, ref } from "vue";
    import unInstall from './components/unInstall.vue'
    ​
    const count = ref(0)
    const display = ref(true)
    ​
    console.log('setup')
    // 1
    onBeforeMount(() => {console.log('onBeforeMount —— 组件挂载前执行')
    })
    // 2
    onMounted(() => {console.log('onMounted —— 组件挂载后执行')console.log('===============================================')
    })
    ​
    // 3
    onBeforeUpdate(() => { console.log('onBeforeUpdate —— 数据更新前调用')
    })
    // 4
    onUpdated(() => {console.log('onUpdated —— 数据更新后调用')console.log('===============================================')
    })
    ​
    </script>
  3. 修改src\main.js文件,切换页面中显示的组件

    import App from './App.vue'
  4. 保存代码,使用浏览器访问http://127.0.0.1:5173/,打开开发者控制台,点击页面上的“挂载/卸载unInstall组件” 按钮,页面效果如下图所示:

三、组件之间的样式冲突

在默认情况下,写在Vue组件中的样式会全局生效,很容易造成多个组件之间的样式冲突问题。例如,为Component1组件中的h5元素添加边框样式,其他组件则不添加,同时显示在页面上。具体代码如下:

<!-- Component1 -->
<template><h5>组件1</h5>
</template>
<style>
h5 {border: 1px dotted black;
}
</style>
<!-- Component2 -->
<template><h5>组件2</h5>
</template>
<!-- Component3 -->
<template><h5>组件3</h5>
</template>
<!-- App.vue --> 
<template><div><Componet1/><Componet2/><Componet3/></div>
</template>
<script setup>
import Componet1 from './components/Componet1.vue';
import Componet2 from './components/Componet2.vue';
import Componet3 from './components/Componet3.vue';
</script>

在main.js切换App.vue显示,保存代码后,使用浏览器访问http://localhost:5173/,页面效果如下:

image-20240123102739135

从上图可以看出,Component1组件、Component2组件和Component3组件中h5元素的边框样式都发生了改变,但是代码中只有Component1组件设置了边框样式效果,说明组件之间存在样式冲突。

导致组件之间会产生样式冲突的原因:

导致组件之间样式冲突的根本原因是:在单页Web应用中,所有组件的DOM结构都是基于唯一的index.html页面进行呈现的。每个组件中的样式都可以影响整个页面中的DOM元素。在Vue中可以使用scoped属性和深度选择器来解决组件之间的样式冲突。Vue为<style>标签提供了scoped属性,用于解决组件之间的样式冲突。

为<style>标签添加scoped属性后,Vue会自动为当前组件的DOM元素添加一个唯一的自定义属性(如data-v-7ba5bd30),并在样式中为选择器添加自定义属性(如.list[data-v-7ba5bc90]),从而限制样式的作用范围,防止组件之间的样式冲突问题。

下面演示scoped属性的使用:

  1. 修改Componet1组件的内容,修改后的完整代码如下:

    <template><h5>组件1</h5>
    </template>
    <style scoped>
    h5 {border: 1px dotted black;
    }
    </style>
  2. 保存上述代码后,在浏览器中访问http://127.0.0.1:5173/,页面效果如下图所示:

  3. 打开开发者控制台,切换到元素面板,可以看到当<style>标签添加scoped属性后,h5元素和相应的选择器被Vue自动添加了data-v-428f8930属性,从而解决了样式冲突的问题。

四、父组件向子组件传递数据

1、定义props

若想实现父组件向子组件传递数据,需要先在子组件中声明props,表示子组件可以从父组件中接收哪些数据。在不使用setup语法糖的情况下,可以使用props选项声明props。props选项的形式可以是对象或字符串数组。声明对象形式的props的语法格式如下:

<script>
export default {props: {自定义属性A: 类型,自定义属性B: 类型,……}
}
</script>

如果不需要限制props的类型,可以声明字符串数组形式的props,示例代码如下:

props: ['自定义属性A', '自定义属性B'],

当使用setup语法糖时,可使用defineProps()函数声明props,语法格式如下:

<script setup>
const props = defineProps({'自定义属性A': 类型}, {'自定义属性B': 类型})
</script>

使用defineProps()函数声明字符串数组形式的props,语法格式如下:

const props = defineProps(['自定义属性A', '自定义属性B'])

在组件中声明了props后,可以直接在模板中输出每个prop的值,语法格式如下:

<template> {{ 自定义属性A }}{{ 自定义属性B }}
</template>

2、静态绑定props

当在父组件中引用了子组件后,如果子组件中声明了props,则可以在父组件中向子组件传递数据。如果传递的数据是固定不变的,则可以通过静态绑定props的方式为子组件传递数据。如果子组件中未声明props,则父组件向子组件中传递的数据会被忽略,无法被子组件使用。

通过静态绑定props的方式为子组件传递数据,其语法格式如下:

<子组件标签名 自定义属性A="数据" 自定义属性B="数据" />

在上述语法格式中,父组件向子组件的props传递了静态的数据,属性值默认为字符串类型。

下面演示父组件向子组件传递数据的方法

  1. 创建src\components\Count.vue文件,用于展示子组件的相关内容,文件代码如下:

    <template>初始值为:{{ num }}
    </template>
    <script setup>
    const props = defineProps({num: String
    })
    </script>
  2. 创建src\components\Props.vue文件,用于展示父组件的相关内容,文件代码如下:

    <template><Count num="1" />
    </template>
    <script setup>
    import Count from './Count.vue'
    </script>
  3. 修改src\main.js文件,切换页面中显示的组件

    import App from './components/Props.vue'
  4. 保存上述代码后,在浏览器中访问http://127.0.0.1:5173/,父组件向子组件中传递数据的页面效果如下图所示:

3、动态绑定props

在父组件中使用v-bind可以为子组件动态绑定props,任意类型的值都可以传给子组件的props,包括字符串、数字、布尔值、数组、对象等。

从父组件中为子组件传递字符串类型的props数据,示例代码如下:

<template><Child :init="username" />
</template>
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
const username = ref('小红')
</script>

上述代码用到了名称为Child的子组件,该子组件的示例代码如下:

<template></template>
<script setup>
const props = defineProps(['init'])
console.log(props)
</script>

在Vue中,所有的props都遵循单向数据流原则,props数据因父组件的更新而变化,变化后的数据将向下流往子组件,而且不会逆向传递,这样可以防止因子组件意外变更props导致数据流向难以理解的问题。 ​ 每次父组件绑定的props发生变更时,子组件中的props都将会刷新为最新的值。开发者不应该在子组件内部改变props,如果这样做,Vue会在浏览器的控制台中发出警告。

4、校验props

在封装组件时,可以在子组件中对从父组件传递过来的props数据进行合法性校验,从而防止出现数据不合法的问题。

使用字符串数组形式的props的缺点是无法为每个prop指定具体的数据类型,而使用对象形式的props的优点是可以对每个prop进行数据类型的校验。对象形式的props可以使用多种验证方案,包括基础类型检查、必填项的校验、属性默认值、自定义验证函数等。在声明props时,可以添加验证方案。

① 基本类型检查

在开发中,有时需要对从父组件中传递过来的props数据进行基础类型检查,这时可以通过type属性检查合法的类型,如果从父组件中传递过来的值不符合此类型,则会报错。 ​ 常见的类型有String(字符串)、Number(数字)、Boolean(布尔值)、Array(数组)、Object(对象)、Date(日期)、Function(函数)、Symbol(符号)以及任何自定义构造函数。

为props指定基础类型检查,示例代码如下:

props: {自定义属性A: String,       // 字符串自定义属性B: Number,       // 数字自定义属性C: Boolean,      // 布尔值自定义属性D: Array,        // 数组自定义属性E: Object,       // 对象自定义属性F: Date,         // 日期自定义属性G: Function,         // 函数自定义属性H: Symbol,       // 符号
}

通过配置对象的形式定义验证规则,示例代码如下:

props: {自定义属性: { type: Number },
}

如果某个prop的类型不唯一,可以通过数组的形式为其指定多个可能的类型,示例代码如下:

props: {自定义属性: { type: [String, Array] },   // 字符串或数组
}
② 必填项的校验

父组件向子组件传递props数据时,有可能传递的数据为空,但是在子组件中要求该数据是必须传递的。此时,可以在声明props时通过required属性设置必填项,强调组件的使用者必须传递属性的值,示例代码如下:

props: {自定义属性: { required: true },
}
③ 属性默认值

在声明props时,可以通过default属性定义属性默认值,当父组件没有向子组件的属性传递数据时,属性将会使用默认值,示例代码如下:

props: {自定义属性: { default: 0 },
}
④ 自定义验证函数

如果需要对从父组件中传入的数据进行验证,可以通过validator()函数来实现。validator()函数可以将prop的值作为唯一参数传入自定义验证函数,如果验证失败,则会在控制台中发出警告。为prop属性指定自定义验证函数的示例代码如下:

props: {自定义属性: {validator(value) {return ['success', 'warning', 'danger'].indexOf(value) !== -1;},},
}

5、子组件向父组件传递数据

父子组件的关系可以总结为 prop 向下传递,emit事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件emit给父组件发送消息。

① 子组件向父组件传递自定义事件

若想使用自定义事件,首先需要在子组件中声明自定义事件。在不使用setup语法糖时,可以通过emits选项声明自定义事件,示例代码如下:

<script>
export default {emits: ['demo']
}
</script>

在使用setup语法糖时,需要通过调用defineEmits()函数声明自定义事件,示例代码如下:

<script setup>
const emit = defineEmits(['demo'])
</script>
② 在子组件中触发自定义事件

在子组件中声明自定义事件后,接着需要在子组件中触发自定义事件。当使用场景简单时,可以使用内联事件处理器,通过调用$emit()方法触发自定义事件,将数据传递给使用的组件,示例代码如下:

<button @click="$emit('demo', 1)">按钮</button>

在上述代码中,$emit()方法的第1个参数为字符串类型的自定义事件的名称,第2个参数为需要传递的数据,当触发当前组件的事件时,该数据会传递给父组件。

除了使用内联方式外,还可以直接定义方法来触发自定义事件。在不使用setup语法糖时,可以从setup()函数的第2个参数(即setup上下文对象)来访问到emit()方法,示例代码如下:

export default {setup(props, ctx) {const update = () => {ctx.emit('demo', 2)}return { update }}
}

如果使用setup语法糖,可以调用emit()函数来实现,示例代码如下:

<script setup>
const update = () => {emit('demo', 2)
}
</script>
③ 在父组件中监听自定义事件

在父组件中通过v-on可以监听子组件中抛出的事件,示例代码如下:

<子组件名 @demo="fun" />

在上述代码中,当触发demo事件时,会接收到从子组件中传递的参数,同时会执行fun()方法。父组件可以通过value属性接收从子组件中传递来的参数。在父组件中定义fun()方法,示例代码如下:

const fun = value => {console.log(value)
}

下面演示向父组件传递数据的使用方法:

  1. 创建src\components\CustomSubComponent.vue文件,用于展示子组件的相关内容。子组件代码如下:

    <template><p>count值为:{{ count }}</p><button @click="add">加n</button>
    </template>
    <script setup>
    import { ref } from 'vue'
    const emit = defineEmits(['updateCount'])
    const count = ref(1)
    // 自身count + 1,向父组件传值为2
    const add = () => {  count.value++ emit('updateCount', 2) }
    </script>
  2. 创建src\components\CustomEvents.vue文件,用于展示父组件的相关内容。父组件代码如下:

    <template><p>父组件当前的值为:{{ number }}</p><CustomSubComponent @updateCount="updateEmitCount" />
    </template>
    <script setup>
    import CustomSubComponent from './CustomSubComponent.vue'
    import { ref } from 'vue'
    const number = ref(10)
    const updateEmitCount = (value) => {  number.value += value }
    </script>
  3. 修改src\main.js文件,切换页面中显示的组件。

    import App from './components/CustomEvents.vue'
  4. 保存上述代码后,在浏览器中访问http://127.0.0.1:5173/,初始页面效果如下图所示:

  5. 单击“加n”按钮后的页面效果如下图所示:

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

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

相关文章

C++青少年简明教程:赋值语句

C青少年简明教程&#xff1a;赋值语句 赋值语句是编程中最基本也是最常用的概念之一&#xff0c;它用于将一个值分配给一个变量。 使用等号&#xff08; 称为赋值运算符&#xff09;来给变量赋值&#xff0c;赋值语句的左边是要赋值的变量&#xff0c;右边是要赋给变量的值。C…

Docker 使用 CentOS 镜像

使用 docker run 直接运行 CentOS 7 镜像&#xff0c;并登录 bash。 C:\Users\yhu>docker run -it centos:centos7 bash Unable to find image centos:centos7 locally centos7: Pulling from library/centos 2d473b07cdd5: Pull complete Digest: sha256:be65f488b7764ad36…

GPT-4o:全面深入了解 OpenAI 的 GPT-4o

GPT-4o&#xff1a;全面深入了解 OpenAI 的 GPT-4o 关于 GPT-4o 的所有信息ChatGPT 增强的用户体验改进的多语言和音频功能GPT-4o 优于 Whisper-v3M3Exam 基准测试中的表现 GPT-4o 的起源追踪语言模型的演变GPT 谱系&#xff1a;人工智能语言的开拓者多模式飞跃&#xff1a;超越…

连接虚拟机的 redis

用Windows 的 Redis Insight 连接虚拟机的 安装redis发现连不上 我的redis是新安装&#xff0c;没有用户名密码&#xff0c;发现是ip问题 127 开头的被我注释了&#xff0c;换成了ifconfig查到的ip

vim命令大全(基础版)

创建一个py文件 vim cs.py一、命令模式 按Esc后&#xff0c;按shift&#xff1a;进入命令模式 :wq # 保存并退出 :q # 退出 :q! # 强制退出 :%d # 删除全部内容按两下d&#xff0c;删除光标所在行 按两下y&#xff0c;复制光标所在行 按一下p&#xff0c;粘贴复制内容到下…

Android性能:SurfaceFlinger与BufferQueue(3)

Android性能&#xff1a;SurfaceFlinger与BufferQueue&#xff08;3&#xff09; Android显示系统的组成可以概括为两大部分&#xff1a;绘制(DrawFrame)合成&#xff08;SurfaceFlinger HWC&#xff09; 绘制&#xff1a;Surface中空的 GraphicBuffer->CPU或者GPU通过Canv…

Python GUI开发- Qt Designer环境搭建

前言 Qt Designer是PyQt5 程序UI界面的实现工具&#xff0c;使用 Qt Designer 可以拖拽、点击完成GUI界面设计&#xff0c;并且设计完成的 .ui 程序可以转换成 .py 文件供 python 程序调用 环境准备 使用pip安装 pip install pyqt5-toolsQt Designer 环境搭建 在pip安装包…

Vue 常见通信

Vue 常见通信 1、父子通信 父传子 props&#xff0c;子传父 events&#xff08;$emit&#xff09;&#xff1b; 通过父链 / 子链 通信$parent / $children&#xff1b; $refs获取ref 可以访问组件实例方法&#xff0c;&#xff1b; 提供与注射provide / inject a t t r s …

使用Processing和PixelFlow库创建交互式流体太极动画

使用Processing和PixelFlow库创建交互式流体太极动画 引言准备工作效果展示代码结构代码解析第一部分&#xff1a;导入库和设置基本参数第二部分&#xff1a;流体类定义MyFluidDataConfig 类详解MyFluidData 类详解my_update 方法详解流体类定义完整代码 第三部分&#xff1a;太…

找数字-算法

解法一、数位模拟 比n大的最小数就是n1&#xff0c;当n1时&#xff0c;以下几种情况会导致n中1的个数发生变化&#xff08;或者不变&#xff09; 1.n的低位连续1的个数count>1&#xff0c;如1011&#xff0c;10111,1111等&#xff0c;加1后使得n中1的个数减少count-1个 解…

基于SVPWM的飞轮控制系统的simulink建模与仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于SVPWM的飞轮控制系统的simulink建模与仿真。SVPWM的核心思想是将逆变器输出的三相电压矢量在两相静止坐标系&#xff08;αβ坐标系&#xff09;中表示&#xff0c;通过控…

Python3 数据类型详解:掌握数据基石,编写高效程序

Python3 中的基本数据类型包括整数&#xff08;int&#xff09;、浮点数&#xff08;float&#xff09;、布尔值&#xff08;bool&#xff09;、字符串&#xff08;str&#xff09;、列表&#xff08;list&#xff09;、元组&#xff08;tuple&#xff09;、集合&#xff08;se…

JAVA static注入 Util使用之Service注入

一般在Util等静态方法中调用Service或mapper&#xff0c;初始化后会出现空指针异常&#xff1a;java.lang.NullPointerException。 代码执行优先级的问题&#xff0c;在一个Java类中&#xff0c;存在着静态代码块&#xff0c;静态方法&#xff0c;构造函数,成员方法等等。不同…

golang中的类和接口

类 在 Go 语言中并没有类的概念&#xff0c;而是使用结构体来实现面向对象的特性。通过 type 关键字可以定义自定义类型&#xff0c;包括结构体类型。下面是一个简单的示例&#xff1a; package mainimport "fmt"// 定义一个结构体类型 type Person struct {Name s…

只对外公开必要的信息和步骤

隐藏内部结构 使对象的内部结构对外部不可见的内容的处理被称为封装化。只公开方法等使用者所需要的最低限度的接口&#xff0c;使用者只能通过外部接口进行访问。如此一来&#xff0c;使用该类的程序就无须知道其内部的具体实现。 通过封装化&#xff0c;不仅可以防止调用者…

Node.js安装及环境配置(超详细!保姆级!!)

目录 一、进入官网地址下载安装包 二、安装程序 三、环境配置 四、测试 五、安装淘宝镜像 一、进入官网地址下载安装包 Node.js — Download Node.js (nodejs.org) 选择对应你系统的 node.js 版本&#xff0c;我选择的是Windows系统&#xff0c;64位 点击图中选项&#…

无人机+应急通信:灾害现场应急通信车技术详解

无人机和应急通信车是灾害现场应急通信中的重要技术。无人机可以通过快速到达灾害现场&#xff0c;搭载高清摄像头、红外热成像仪、激光雷达等设备&#xff0c;对灾区进行实时监测和灾情评估&#xff0c;同时也可以通过搭载的通信设备&#xff0c;与指挥中心进行实时通信和数据…

APP逆向实现方式总览

方式一&#xff1a;硬核分析 梳理出参数的构造逻辑&#xff0c;代码还原算法 方式二&#xff1a;模拟执行 2.1 Frida-RPC 电脑调用已加载到手机内存中的方法&#xff0c;直接获取到结果 2.2 AndServer-RPC 安卓程序调用手机中的方法&#xff0c;最后暴露成HTTP服务供电脑…

✅什么是排他锁、共享锁、意向锁

共享锁 共享锁&#xff0c;又被称为读锁&#xff0c;是由读取操作所创建的一种锁。在此期间&#xff0c;其他用户可以同时读取数据&#xff0c;但在数据上未释放所有共享锁之前&#xff0c;任何事务均无法对其进行修改&#xff08;即获取数据的排他锁&#xff09;。 一旦事务…

202009青少年软件编程(Python)等级考试试卷(三级)

第 1 题 【单选题】 通过算式123122021120可将二进制1101 转为十进制,下列进制转换结果正确的是?( ) A :0b10转为十进制,结果是2 B :0d10转为十进制,结果是8 C :0x10转为十进制,结果是10 D :0o10转为十进制,结果是16 正确答案:A 试题解析: 第 2 题 【单选题】 语句flo…