Vue.js------Vue组件基础

news2025/1/13 13:10:23
  1. 能够理解Vue组件概念和作用
  2. 能够掌握封装创建组件能力
  3. 能够使用组件之间通信
  4. 能够完成todo案例

一.Vue组件创建和使用

1.折叠面板-实现多个 

 

创建一个文件夹demo 具体步骤请参考vue.js---vue基础

⚫ 解决方案: 采用vue提供的单.vue文件-组件方式来封装一套然后复用

在components文件夹下创建组件PanelComponent.vue

<template>
    <div>
        <div class="title">
            <h4>芙蓉楼送辛渐</h4>
            <span class="btn" @click="isShow = !isShow">
                {{ isShow ? "收起" : "展开" }}
            </span>
        </div>
        <div class="container" v-show="isShow">
            <p>寒雨连江夜入吴,</p>
            <p>平明送客楚山孤。</p>
            <p>洛阳亲友如相问，</p>
            <p>一片冰心在玉壶。</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isShow: false,
        };
    },
};
</script>

<style scoped>
.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0 1em;
}

.title h4 {
    line-height: 2;
    margin: 0;
}

.container {
    border: 1px solid #ccc;
    padding: 0 1em;
}

.btn {
    /* 鼠标改成手的形状 */
    cursor: pointer;
}</style>

 App.vue

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <Pannel></Pannel>
    <Pannel></Pannel>
    <Pannel></Pannel>
  </div>
</template>

<script>
import Pannel from './components/PanelComponent.vue'
export default {
  components: {
    Pannel: Pannel
  }
}
</script>

<style lang="less">
body {
  background-color: #ccc;

  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;

    h3 {
      text-align: center;
    }

  }
}
</style>

下载less,less-loader第三方库

npm install less-loader --save-dev

启动服务器，打开网站

 

1. 遇到重复标签想复用?

      封装成组件

2. 组件好处?   各自独立, 便于复用

2.组件概念

  • 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
  • 组件化 ：封装的思想，把页面上 `可重用的部分` 封装为 `组件`，从而方便项目的 开发 和 维护
  • 一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构 样式 和 行为(html, css和js)

组件是什么? 可复用的vue实例, 封装标签, 样式, JS

什么时候封装组件? 遇到重复标签, 可复用的时候

组件好处? 各自独立, 互不影响

 3.组件_基础使用

目标：每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

创建组件, 封装要复用的标签, 样式, JS代码

2. 注册组件

  • 全局注册 – main.js中 – 语法如图

  • 局部注册 – 某.vue文件内 – 语法如图

3. 使用组件

 

 文件demo\src\components\PanelComponent_1.vue

<template>
  <div>
    <div class="title">
      <h4>芙蓉楼送辛渐</h4>
      <span class="btn" @click="isShow = !isShow">
        {{ isShow ? "收起" : "展开" }}
      </span>
    </div>
    <div class="container" v-show="isShow">
      <p>寒雨连江夜入吴,</p>
      <p>平明送客楚山孤。</p>
      <p>洛阳亲友如相问，</p>
      <p>一片冰心在玉壶。</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  padding: 0 1em;
}
.title h4 {
  line-height: 2;
  margin: 0;
}
.container {
  border: 1px solid #ccc;
  padding: 0 1em;
}
.btn {
  /* 鼠标改成手的形状 */
  cursor: pointer;
}
</style>

 App.vue

<template>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <!-- 4. 组件名当做标签使用 -->
        <!-- <组件名></组件名> -->
        <PannelG></PannelG>
        <PannelL></PannelL>
    </div>
</template>

<script>
// 目标: 局部注册 (用的多)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/PanelComponent_1.vue'
export default {
    // 3. 局部 - 注册组件
    /*
      语法: 
      components: {
        "组件名": 组件对象
      }
    */
    components: {
        PannelL: Pannel
    }
}
</script>

<style lang="less">
body {
    background-color: #ccc;

    #app {
        width: 400px;
        margin: 20px auto;
        background-color: #fff;
        border: 4px solid blueviolet;
        border-radius: 1em;
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
        padding: 1em 2em 2em;

        h3 {
            text-align: center;
        }

    }
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/PanelComponent_1.vue'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", Pannel)


new Vue({
  render: h => h(App),
}).$mount('#app')

 

创建和使用组件步骤?

      创建.vue文件 – 标签 – 样式 – JS进去

      注册组件 (全局 / 局部)

      使用组件 (组件名用作标签)

组件运行结果? 把组件标签最终替换成, 封装的组件内标签

4.组件-scoped作用 

  • 准备: 当前组件内标签都被添加 data-v-hash值 的属性
  • 获取: css选择器都被添加 [data-v-hash值] 的属性选择器

Vue组件内样式, 只针对当前组件内标签生效如何做? 给style上添加scoped

原理和过程是什么? 会自动给标签添加data-v-hash值属性, 所有选择都带属性选择

 二.Vue组件通信

1.组件通信_父传子_props 

目标：父组件 -> 子组件 传值

首先明确父和子是谁, 在父引入子 (被引入的是子)

  • 父: App.vue
  • 子: MyProduct.vue

创建MyProduct.vue如下图所示

子组件内, 定义变量, 准备接收, 然后使用变量

2. 父组件(App.vue)内, 要展示封装的子组件(MyProduct.vue)引入组件, 注册组件, 使用组件, 传值进去

App.vue

<template>
    <div>
        <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
        <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
        <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
        <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
    </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
    data() {
        return {
            str: "好贵啊, 快来啊, 好吃"
        }
    },
    // 3. 注册组件
    components: {
        // Product: Product // key和value变量名同名 - 简写
        Product
    }
}
</script>

<style></style>

demo\src\components\MyProduct.vue

<template>
    <div class="my-product">
        <h3>标题: {{ title }}</h3>
        <p>价格: {{ price }}元</p>
        <p>{{ intro }}</p>
    </div>
</template>

<script>
export default {
    props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
    width: 400px;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 5px;
    margin: 10px;
}
</style>

什么时候需要父传子技术? 从一个vue组件里把值传给另一个vue组件(父->子)

父传子口诀(步骤)是什么?

子组件内, props定义变量, 在子组件使用变量

父组件内, 使用子组件, 属性方式给props变量传值

 2.组件通信_父向子-配合循环

目标：父组件 -> 子组件 循环使用-传值

每次循环obj和组件都是独立的, 新的

App.vue

<template>
    <div>
        <MyProduct v-for="obj in list" :key="obj.id" :title="obj.proname" :price="obj.proprice" :intro="obj.info">
        </MyProduct>
    </div>
</template>

<script>
// 目标: 循环使用组件-分别传入数据
// 1. 创建组件
// 2. 引入组件
import MyProduct from './components/MyProduct.vue'
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    proname: "超级好吃的棒棒糖",
                    proprice: 18.8,
                    info: "开业大酬宾, 全场8折",
                },
                {
                    id: 2,
                    proname: "超级好吃的大鸡腿",
                    proprice: 34.2,
                    info: "好吃不腻, 快来买啊",
                },
                {
                    id: 3,
                    proname: "超级无敌的冰激凌",
                    proprice: 14.2,
                    info: "炎热的夏天, 来个冰激凌了",
                },
            ],
        };
    },
    // 3. 注册组件
    components: {
        // MyProduct: MyProduct
        MyProduct
    }
};
</script>

<style></style>

 demo\src\components\MyProduct.vue

<template>
    <div class="my-product">
        <h3>标题: {{ title }}</h3>
        <p>价格: {{ price }}元</p>
        <p>{{ intro }}</p>
    </div>
</template>

<script>
export default {
    props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
    width: 400px;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 5px;
    margin: 10px;
}
</style>

循环使用组件注意事项? 每次循环, 变量和组件, 都是独立的 

3.单向数据流  

目标：从父到子的数据流向, 叫单向数据流

原因: 子组件修改, 不通知父级, 造成数据不一致性

Vue规定props里的变量, 本身是只读的

为何不建议, 子组件修改父组件传过来的值?

父子数据不一致, 而且子组件是依赖父传入的值

什么是单向数据流? 从父到子的数据流向, 叫单向数据流

props里定义的变量能修改吗?不能, props里的变量本身是只读的 

4.组件通信_子向父_自定义事件 

目标：子组件触发父自定义事件方法

  • 需求: 商品组件, 实现砍价功能

  • 前置补充, 父 -> 索引 -> 子组件 (用于区分哪个子组件)

父组件内, 绑定自定义事件和事件处理函数

语法: @自定义事件名="父methods里函数名"

子组件内, 恰当的时机, 触发父给我绑的自定义事件, 导致父methods里事件处理函数执行  

 App.vue

<template>
    <div>
        <!-- 目标: 子传父 -->
        <!-- 1. 父组件, @自定义事件名="父methods函数" -->
        <MyProduct v-for="(obj, ind) in list" :key="obj.id" :title="obj.proname" :price="obj.proprice" :intro="obj.info"
            :index="ind" @subprice="fn"></MyProduct>
    </div>
</template>

<script>
import MyProduct from './components/MyProduct_sub.vue'
export default {
    data() {
        return {
            list: [
                {
                    id: 1,
                    proname: "超级好吃的棒棒糖",
                    proprice: 18.8,
                    info: "开业大酬宾, 全场8折",
                },
                {
                    id: 2,
                    proname: "超级好吃的大鸡腿",
                    proprice: 34.2,
                    info: "好吃不腻, 快来买啊",
                },
                {
                    id: 3,
                    proname: "超级无敌的冰激凌",
                    proprice: 14.2,
                    info: "炎热的夏天, 来个冰激凌了",
                },
            ],
        };
    },
    components: {
        MyProduct
    },
    methods: {
        fn(inde, price) {
            // 逻辑代码
            this.list[inde].proprice > 1 && (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(2))
        }
    }
};
</script>

<style></style>

demo\src\components\MyProduct_sub.vue

<template>
    <div class="my-product">
        <h3>标题: {{ title }}</h3>
        <p>价格: {{ price }}元</p>
        <p>{{ intro }}</p>
        <button @click="subFn">宝刀-砍1元</button>
    </div>
</template>

<script>
import eventBus from '../EventBus'
export default {
    props: ['index', 'title', 'price', 'intro'],
    methods: {
        subFn() {
            this.$emit('subprice', this.index, 1) // 子向父
            eventBus.$emit("send", this.index, 1) // 跨组件
        }
    }
}
</script>

<style>
.my-product {
    width: 400px;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 5px;
    margin: 10px;
}
</style>

import Vue from 'vue'
// 导出空白vue对象
export default new Vue()

 

什么时候使用子传父技术?

当子想要去改变父里的数据

子传父如何实现? 父组件内, 给组件@自定义事件="父methods函数" 子组件内, 恰当时机this.$emit('自定义事件名', 值)

总结:

组件是什么?

是一个vue实例, 封装标签, 样式和JS代码

组件好处? 便于复用, 易于扩展

组件通信哪几种, 具体如何实现? 父 -> 子 父

5.组件通信-EventBus  

目标：App.vue里引入MyProduct.vue和List.vue

目标：常用于跨组件通信时使用

⚫ 语法

  • src/EventBus/index.js – 创建空白Vue对象并导出
  • 在要接收值的组件(List.vue) eventBus.$on('事件名', 函数体)
  • 要传递值的组件(MyProduct.vue) eventBus.$emit('事件名', 值)

App.vue 

<template>
  <div style="overflow: hidden;">
    <div style="float: left;">
      <MyProduct
      v-for="(obj, ind) in list"
      :key="obj.id"
      :title="obj.proname"
      :price="obj.proprice"
      :intro="obj.info"
      :index="ind"
      @subprice="fn"
    ></MyProduct>
    </div>
    <div style="float: left;">
      <List :arr="list"></List>
    </div>
  </div>
</template>

<script>
import MyProduct from "./components/MyProduct_sub.vue";
import List from "./components/ProductList.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: {
    MyProduct,
    List,
  },
  methods: {
    fn(inde, price) {
      this.list[inde].proprice > 1 &&
        (this.list[inde].proprice = (this.list[inde].proprice - price).toFixed(
          2
        ));
    },
  },
};
</script>

<style>
</style>

 components/ProductList.vue

<template>
  <ul class="my-product">
    <li v-for="(item, index) in productList" :key="index">
      <span>{{ item.proname }}</span>
      <span>{{ item.proprice }}</span>
    </li>
  </ul>
</template>

<script>
import eventBus from "../EventBus/index";

export default {
  props: ["arr"],
  data() {
    return {
      productList: []
    };
  },
  created() {
    this.productList = [...this.arr]; // 创建副本
    eventBus.$on("send", (index, price) => {
      this.handlePriceUpdate(index, price);
    });
  },
  methods: {
    handlePriceUpdate(index, price) {
      if (this.productList[index].proprice > 1) {
        // 更新副本而不是原始的 arr
        this.productList[index].proprice = (this.productList[index].proprice - price).toFixed(2);
        // 发送事件通知父组件更新
        eventBus.$emit("priceUpdated", this.productList);
      }
    }
  }
};
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

 components/MyProduct_sub.vue

<template>
    <div class="my-product">
        <h3>标题: {{ title }}</h3>
        <p>价格: {{ price }}元</p>
        <p>{{ intro }}</p>
        <button @click="subFn">宝刀-砍1元</button>
    </div>
</template>

<script>
import eventBus from '../EventBus'
export default {
    props: ['index', 'title', 'price', 'intro'],
    methods: {
        subFn() {
            this.$emit('subprice', this.index, 1) // 子向父
            eventBus.$emit("send", this.index, 1) // 跨组件
        }
    }
}
</script>

<style>
.my-product {
    width: 400px;
    padding: 20px;
    border: 2px solid #000;
    border-radius: 5px;
    margin: 10px;
}
</style>

 

什么时候使用eventBus技术? 当2个没有引用关系的组件之间要通信传值

eventBus技术本质是什么? 空白Vue对象, 只负责$on和$emit

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

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

相关文章

Hadoop的安装及配置

Hadoop的安装及配置

8.下面我们开始安装配置Hadoop 1&#xff09;首先下载hadoop-2.7.2的jar包 并添加到我们的jtxy1的/root/目录下 2&#xff09;yum install在线安装软件 yum install net-tools //支持ifconfig yum install vim //支持vim yum install glibc.i686 --java命令不好使 3&am…
阅读更多...
人工智能论文GPT-3（2）：2020.5 Language Models are Few-Shot Learners；微调；少样本Few-Shot (FS)

人工智能论文GPT-3（2）：2020.5 Language Models are Few-Shot Learners；微调；少样本Few-Shot (FS)

2 方法Approach 我们的基本预训练方法&#xff0c;包括模型、数据和训练&#xff0c;与GPT-2中描述的过程相似&#xff0c;只是模型规模、数据集规模和多样性&#xff0c;以及训练时长有所扩大&#xff0c;相对简单直接。 我们使用的上下文学习也与GPT-2相似&#xff0c;但在…
阅读更多...
Web程序设计-实验03 JavaScript语言基础

Web程序设计-实验03 JavaScript语言基础

题目 【实验主题】 素数问题求解。计算&#xff08;判断&#xff09; 1~100中哪些是素数、哪些是合数。 素数也称为质数&#xff0c;是只能被1及其自身整除的自然数。与素数相对应的是合数&#xff0c;合数可以被分解为若干个素数的乘积&#xff0c;这些素数称为这个合数的质…
阅读更多...
即席查询笔记

即席查询笔记

文章目录 一、Kylin4.x1、Kylin概述1.1 定义1.2 Kylin 架构1.3 Kylin 特点1.4 Kylin4.0 升级 2、Kylin 环境搭建2.1 简介2.2 Spark 安装和部署2.3 Kylin 安装和部署2.4 Kylin 启动环境准备2.5 Kylin 启动和关闭 3、快速入门3.1 数据准备3.2 Kylin项目创建入门3.3 Hive 和 Kylin…
阅读更多...
Qt Debug模式下应用程序输出界面乱码【已解决】

Qt Debug模式下应用程序输出界面乱码【已解决】

Qt Debug模式下应用程序输出乱码 一、问题描述二、解决方法三、相关测试 一、问题描述 源码为utf-8编码. Qt Creator在Debug模式下运行程序&#xff0c;下方应用程序输出界面显示乱码. 但正常运行无乱码&#xff1a; 二、解决方法 尝试修改文件编码、执行编码无果… 可参考…
阅读更多...
架构师系列-搜索引擎ElasticSearch（十）- 索引别名及重建

架构师系列-搜索引擎ElasticSearch（十）- 索引别名及重建

索引别名 别名&#xff0c;有点类似数据库的视图&#xff0c;别名一般都会和一些过滤条件相结合&#xff0c;可以做到即使是同一个索引上&#xff0c;让不同人看到不同的数据。 别名的作用 在开发中&#xff0c;一般随着业务需求的迭代&#xff0c;较老的业务逻辑就要面临更新…
阅读更多...
小型燃气站3D可视化：打造安全高效的燃气新时代

小型燃气站3D可视化：打造安全高效的燃气新时代

随着科技的不断进步&#xff0c;越来越多的行业开始融入3D可视化技术&#xff0c;燃气行业也不例外。 小型燃气站作为城市燃气供应的重要节点&#xff0c;其安全性和运行效率至关重要。传统的燃气站管理方式往往依赖于人工巡检和纸质记录&#xff0c;这种方式不仅效率低下&…
阅读更多...
JVM 讲解 （主要类加载其以及流程和机制（双亲委派））

JVM 讲解 （主要类加载其以及流程和机制（双亲委派））

JVM有什么用&#xff1f; 说白了&#xff0c;就是我们编写 Java 代码&#xff0c;编译 Java 代码&#xff0c;目的不是让它在 Linux、Windows 或者 MacOS 上跑&#xff0c;而是在 JVM 上跑。&#xff08;保证只要有JVM这个东西&#xff0c;就可以跨平台使用Java) 可以把JVM想象…
阅读更多...
事务的传播行为介绍和事务失效

事务的传播行为介绍和事务失效

常用的就下图介绍的这两种&#xff0c;REQUIRED 支持当前事务&#xff0c;如果不存在&#xff0c;就新建一个&#xff0c;EQUIRES_NEW 如果有事务存在&#xff0c;挂起当前事务&#xff0c;创建一个新的事务 同一个service中必须用代理对象调用&#xff0c;否则失效
阅读更多...
ADOP 万兆电口光模块：SFP+转RJ45端口解决方案

ADOP 万兆电口光模块：SFP+转RJ45端口解决方案

&#x1f335;在数据中心的接入层中&#xff0c;大多数服务器网卡&#xff08;NIC&#xff09;和存储设备都采用10GBASE-T RJ45端口&#xff0c;而与之相连的TOR&#xff08;机架顶部&#xff09;交换机通常配备SFP端口&#xff0c;且二者无法直接相连。为了解决该问题&#xf…
阅读更多...
软考高级架构师：项目配置管理中产品配置例题

软考高级架构师：项目配置管理中产品配置例题

题目 项目配置管理中&#xff0c;产品配置是指一个产品在其生命周期各个阶段所产生的各种形 式和各种版本的文档、计算机程序、部件及数据的集合。该集合中的每一个元素 称为该产品配置中的 一个配置项&#xff0c; ( )不属于产品组成部分工作成果的配置项。 A需求文档 B设计文…
阅读更多...
Redis中的事务(二)

Redis中的事务(二)

事务 事务的实现 执行事务 当一个处于事务状态的客户端向服务器发送EXEC命令时&#xff0c;这个EXEC命令将立即被服务器执行&#xff0c;服务器会遍历这个客户端的事务队列&#xff0c;执行队列中保存的所有命令&#xff0c;最后将执行命令所得的结果全部返回给客户端。 例…
阅读更多...
3、MYSQL-一条sql如何在MYSQL中执行的

3、MYSQL-一条sql如何在MYSQL中执行的

MySQL的内部组件结构 大体来说&#xff0c;MySQL 可以分为 Server 层和存储引擎层两部分。 Server层 主要包括连接器、查询缓存、分析器、优化器、执行器等&#xff0c;涵盖 MySQL 的大多数核心服务功能&#xff0c;以及所有的内置函数&#xff08;如日期、时间、数学和加密函…
阅读更多...
MIMO（多天线）通信的四种译码算法

MIMO（多天线）通信的四种译码算法

目录 一. 介绍 二. 极大似然译码 三. 破零译码算法 四. 最小均方误差算法 五. 球形译码 一. 介绍 发射天线数记为Mt&#xff0c;接收天线数记为Mr。由此发射信号x为向量&#xff1a; 接受信号y为向量&#xff1a; 信道H为矩阵&#xff1a; 利用n代表噪声向量&#xff0c;…
阅读更多...
【若依前后端分离】温湿度仪表盘

【若依前后端分离】温湿度仪表盘

示例&#xff1a; 代码&#xff1a; TemperatureAndHumidity.vue组件 //温湿度仪表盘 <template><div><!-- 在这里放置你的图表组件 --><div ref"echarts" style"width: 100%; height: 400px;"></div></div> </t…
阅读更多...
【C++干货基地】面向对象核心概念 const成员函数 | 初始化列表 | explicit关键字 | 取地址重载

【C++干货基地】面向对象核心概念 const成员函数 | 初始化列表 | explicit关键字 | 取地址重载

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 哈喽各位铁汁们好啊&#xff0c;我是博主鸽芷咕《C干货基地》是由我的襄阳家乡零食基地有感而发&#xff0c;不知道各位的…
阅读更多...
数据结构PT1——线性表/链表

数据结构PT1——线性表/链表

1&#xff1a;顺序存储实现(数组实现) Data&#xff1a; a1 a2 .....ai ai1 .... an .... typedef struct LNode *List; //指向LNode的指针&#xff0c;这是typedef的&#xff0c;你可以随时声明&#xff0c;而不加typedef只是创建一个 struct LNode{ //结构体成员ElementT…
阅读更多...
Sentinel 流控注解使用

Sentinel 流控注解使用

大概原理&#xff1a;通过反射解析注解 SentinelResource信息完成调用&#xff0c;处理方法&#xff0c;类似AOP编程 处理方法的返回类型要保持一致&#xff0c;参数和顺序保持一致&#xff0c; 可以在参数列表最后加 com.alibaba.csp.sentinel.slots.block.BlockException; …
阅读更多...
【leetcode面试经典150题】62. K 个一组翻转链表（C++）

【leetcode面试经典150题】62. K 个一组翻转链表（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
OpenHarmony音视频—opus

OpenHarmony音视频—opus

简介 Opus是一种用于在互联网上进行交互式语音和音频传输的编解码器。它可以从低比特率窄带语音扩展到非常高的高品质立体声音乐。 下载安装 直接在OpenHarmony-SIG仓中搜索opus并下载。 使用说明 以OpenHarmony 3.1 Beta的rk3568版本为例 将下载的opus库代码存在以下路径&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023