Vue的使用

Vue的使用

Vue到底是啥?Vue中包含了两部分虚拟DOM  模块化编程虚拟DOM,在我们重用模板的时候,在Vue中存在虚拟DOM
虚拟DOM是为了更好的去重用我们的DOM
(增加元素的时候,先去虚拟DOM找是否存在,如果有那么不用生成,注意头插和尾插)模块化编程:Vue可以将一个页面的部分抽取成一个碎片(Fragment)当我们的页面需要显示的时候,将这些碎片进行组合 每一个碎片都包含 HTML JS CSS

初始Vue

初识Vue:1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;3.root容器里的代码被称为【Vue模板】;4.Vue实例和容器是一一对应的;5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;注意区分:js表达式 和 js代码(语句)1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:(1). a(2). a+b(3). demo(1)(4). x === y ? 'a' : 'b'2.js代码(语句)(1). if(){}(2). for(){}
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue第一个项目</title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><!--准备一个模板--><div id="div01">我是{{user.username +':hahahaha'}},hahaha...<br />爱好{{habbits[0]}}<br>是否成年{{age>=18}}</div><!--初始化Vue--><script type="text/javascript">new Vue({el:"#div01",data:{username:"张三",user:{username:"ZhangSan"},habbits:["男","女","其他"],age:18}})</script></body>
</html>

数据绑定

v-bind:这个后面跟的是属性名字 表示的是要给这个属性赋值
v- 开头的所有的指令语法 的数据都是直接去 Vue对象中的data中找数据的
v-bind:是单向绑定  数据发生改变 页面会发生改变  页面数据发生改变 数据不改变这个就称为 单向绑定v-bind 在开发中可以直接省略 直接以 :开头就表示的是 v-bindv-model:属性名字  :这个表示的是 数据的双向绑定
数据的双向绑定:数据发生改变 页面发生改变  页面发生改变 那么数据也跟着改变 这个就称为数据的双向绑定v-model 也有省略的写法  v-model后面不用写属性名字  默认就是value
数据的双向绑定 一般情况下用在表单数据的收集上
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue的数据绑定</title><script src="js/vue.min.js" type="text/javascript"></script></head><body><!--模板--><div id="div01"><!--	<input type="text" v-bind:value="data1" />--><input type="text" :value="data1" /><br /><!--<input type="text" v-model:value="data2" /><br />--><input type="text" v-model="data2" /><br /></div><!--初始化--><script type="text/javascript">var vm=new Vue({el:"#div01",data:{data1:"测试单向绑定",data2:"测试双向绑定"}})</script></body>
</html>

结果:

在这里插入图片描述

Vue的插值语法和指令语法

Vue模板语法有2大类:1.插值语法:功能:用于解析标签体内容。写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。2.指令语法:功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。举例:v-bind:href="xxx" 或  简写为 :href="xxx",xxx同样要写js表达式,且可以直接读取到data中的所有属性。备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue的模板语法</title><script src="js/vue.min.js" type="text/javascript"></script></head><body><!--模板--><div id="div01"><!--插值语法--><div>my name is {{username}}</div><!--指令语法--><a v-bind:href="path">跳转百度</a></div><!--初始化--><script>new Vue({el:"#div01",data:{username:"ZhangSan",path:"http://www.baidu.com"}})</script></body>
</html>

Vue下的el和data的两种写法

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue下的el和data的两种写法</title><script src="js/vue.min.js" type="text/javascript"></script></head><body><!--模板--><div id="div01">my name is {{username}}</div><!--初始化--><script type="text/javascript">/*        new Vue({el:"#div01",data:{username:"ZhangSan"}})*//*        var vm = new Vue({el:"#div01",data:{username:"LiSi"}})vm.$mount("#div01")*/new Vue({el:"#div01",data(){return {username:'WangWu'}}})</script></body>
</html>

事件

事件的基本使用:1.使用v-on:xxx 或 @xxx 绑定事件,其中xxx是事件名;2.事件的回调需要配置在methods对象中,最终会在vm上;3.methods中配置的函数,不要用箭头函数!否则this就不是vm了;4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm 或 组件实例对象;5.@click="demo" 和 @click="demo($event)" 效果一致,但后者可以传参;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>vue下的el和data的两种写法</title><script src="js/vue.min.js" type="text/javascript"></script></head><body><!--模板--><div id="div01"><!-- <button v-on:click="btnClick1">单击事件</button>--><!--简写--><button @click="btnClick1">单击事件</button><button @dblclick="btnClick2">双击事件</button><!--参数传递--><button @click="btnClick3(123)">单击传递参数事件</button><button @click="btnClick3($event)">单击传递点击事件</button></div><!--初始化--><script type="text/javascript">new Vue({el: "#div01",data(){return{username:"ZhangSan",password:"123"}},methods: {btnClick1(){console.log("my name is "+this.username+this.password)},btnClick2(){console.log("双击事件触发")},btnClick3(str){console.log("双击事件触发...."+str)}}})</script></body>
</html>

结果:

在这里插入图片描述

MVVM模型

MVVM模型M:Model ---代表的是 data中的数据V:View ----代表的是模板VM:Vue 这个表示的是Vue实际上就是 连接 模型和 视图之间的中间桥
观察发现:1.data中所有的属性,最后都出现在了vm身上。2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>MVVM模型</title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script></head><body><!--准备一个模板--><div id="div01">{{username}}</div><!--初始化Vue--><script type="text/javascript">new Vue({el:"#div01",data(){return{username:'ZhangSan',password:'123'}},method:{}})</script></body>
</html>

Vue下的修饰符

Vue中的事件修饰符:1.prevent:阻止默认事件(常用);2.stop:阻止事件冒泡(常用);3.once:事件只触发一次(常用);4.capture:使用事件的捕获模式;5.self:只有event.target是当前操作的元素时才触发事件;6.passive:事件的默认行为立即执行,无需等待事件回调执行完毕;
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>时间修饰符</title><script src="js/vue.min.js" type="text/javascript"></script></head><body><!--模板--><div id="div01"><div @click="btnClick1"style="width: 400px;height: 400px; line-height: 400px; text-align: center; background: pink; border: 1px solid ; border-radius: 10px;"><div @click.stop="btnClick2"style="width: 200px;height: 200px; line-height: 200px; text-align: center; background: skyblue; border: 1px solid ; border-radius: 10px;position: absolute;top: 100px;left: 100px;">点击我</div></div><hr/><a href="https://www.baidu.com" @click.prevent="btnClick3">跳转</a><br><button @click.once="btnClick4">点击只触发一次</button></div><!--初始化--><script type="text/javascript">new Vue({el: "#div01",methods: {btnClick1() {console.log("AAAA")},btnClick2() {console.log("BBBB")},btnClick3() {console.log("阻止事件的默认行为")},btnClick4() {console.log("只执行一次")}}})</script></body>
</html>

结果:

在这里插入图片描述

键盘事件

1.Vue中常用的按键别名:回车 => enter删除 => delete (捕获“删除”和“退格”键)退出 => esc空格 => space换行 => tab (特殊,必须配合keydown去使用)上 => up下 => down左 => left右 => right2.Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)3.系统修饰键(用法特殊):ctrl、alt、shift、meta(1).配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发。(2).配合keydown使用:正常触发事件。4.也可以使用keyCode去指定具体的按键(不推荐)5.Vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/vue.min.js"></script></head><body><div id="div001"><input type="text" @keydown.enter="btnClick1" @keyup.enter="btnClick2"  ><br><input type="`text`" @keydown.aa="btnClick3" ></div><script>Vue.config.keyCodes.aa=65;new Vue({el:"#div001",methods:{btnClick1(){console.log("键盘按下")},btnClick2(){console.log("键盘抬起")},btnClick3(key){console.log("键盘按下++"+key.keyCode)},}})</script></body>
</html>

结果:

在这里插入图片描述

Vue下的计算属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>计算属性</title><script src="js/vue.min.js"></script></head><body><div id="div001"><div>firstName:{{firstName}}</div><div>secondName:{{secondName}}</div><div>全名:{{secondName}}-{{firstName}}</div><div>全名:{{fullName}}</div></div><script>var vm = new Vue({el:"#div001",data() {return {firstName:'San',secondName:'Zhang'}},computed:{//函数式写法  在这个函数式的写法中只有get方法 没有set方法/*fullName(){return this.secondName+"-"+this.firstName}*///对象式的写法fullName:{//提供了get的方法get(){return this.secondName+"-"+this.firstName},//比如我们在控制台 写一个 Si-Liset(val){//那么接下来就要分割const array=val.split("-");this.firstName=array[0];this.secondName=array[1];}}}})</script></body>
</html>

结果:

在这里插入图片描述

样式绑定

绑定样式:1. class样式写法      :class="xxx" xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2. style样式:style="{fontSize: xxx}"其中xxx是动态值。:style="[a,b]"其中a、b是样式对象。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/vue.min.js"></script><style type="text/css">.a{width: 200px;height: 200px;border: 1px solid;}.b{color: #33b4da;line-height: 200px;text-align: center;}.c{background-color: pink;font-size: 50px;font-family: 楷体, serif;}</style></head><body><div id="div001"><div :class="class3">测试内容</div><hr><!--style的引用--><div :style="styleArray">第二个测试</div></div><script>new Vue({el:"#div001",data(){return {/*键值式引用*/class1:'a',/*对象式的引用*/class2:{a:true,b:true,c:true},/*数组式的引用*/class3:["a","b","c"],/*style的对象式引用*/styleObj:{fontSize:'100px',color:"blue",fontFamily:'黑体'},styleArray:[{fontSize:'50px',},{fontFamily:'宋体'}]}},})</script></body>
</html>

结果:

在这里插入图片描述

点击事件的表达式问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="js/vue.min.js"></script></head><body><div id="div001"><div>number:{{number}}</div><button @click="number++">点我自增</button></div><script>new Vue({el:"#div001",data(){return{number:0}}})</script></body>
</html>

条件渲染

条件渲染:1.v-if写法:(1).v-if="表达式" (2).v-else-if="表达式"(3).v-else="表达式"适用于:切换频率较低的场景。特点:不展示的DOM元素直接被移除。注意:v-if可以和:v-else-if、v-else一起使用,但要求结构不能被“打断”。2.v-show写法:v-show="表达式"适用于:切换频率较高的场景。特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉3.备注:使用v-if的时,元素可能无法获取到,而使用v-show一定可以获取到。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>条件渲染</title><script src="js/vue.min.js"></script></head><body><div id="div001"><!--条件渲染--><!--v-if="0" 条件不成立 div不会占位置--><div v-if="0"></div><!--v-show="0" 条件不成立 div会占位置,只是不显示--><div v-show="0"></div><div v-if="score<60">不及格</div><div v-else-if="score<85">良好</div><div v-else>优秀</div></div><script>new Vue({el:"#div001",data(){return{score:'90'}}})</script></body>
</html>

列表渲染

v-for指令:1.用于展示列表数据2.语法:v-for="(item, index) in xxx" :key="yyy"3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>列表渲染</title><script src="js/vue.min.js"></script></head><body><div id="div001"><!--对象遍历--><ul><li v-for="(val,key) of car">{{key}}---{{val}}</li></ul><!--数组的遍历--><ul><li v-for="(user,index) of userList" :key="user.id">{{user.id}}----{{user.username}}--{{user.password}}</li></ul><!--遍历字符串--><ul><li v-for="val of str">{{val}}</li></ul></div><script>new Vue({el:"#div001",data(){return{car:{name:'BMW',color:'blue',type:'X5'},userList:[{id:1,username:'ZhangSan',password:'123'},{id:2,username:'LiSi',password:'456'},{id:3,username:'WangWu',password:'789'},{id:3,username:'ZhaoLiu',password:'012'}],str:"my name is ZhangSan"}}})</script></body>
</html>

结果:

在这里插入图片描述

表单数据的收集

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>收集表单数据</title><script src="js/vue.min.js"></script></head><body><div id="div001"><div id="div01"><form>用户名:<input type="text"  v-model="user.username" /><br />密码:<input type="password"  v-model="user.password" /><br />性别:男<input type="radio" name="gender" v-model="user.gender" value="man"/><input type="radio" name="gender" v-model="user.gender" value="woman"/>其他<input type="radio" name="gender" v-model="user.gender" value="other" /><br />爱好 :唱歌<input type="checkbox" name="habbits" v-model="user.habbits" value="唱歌"/>跳舞<input type="checkbox" name="habbits" v-model="user.habbits" value="跳舞"/>rap<input type="checkbox" name="habbits" v-model="user.habbits" value="rap" /><br />籍贯:<select v-model="user.address"><option value="">请选择籍贯</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select> <br />备注:<textarea v-model="user.remark"></textarea><br /><button @click="btnClick">点我提交数据</button></form></div></div><script>const vm = new Vue({el: "#div001",data() {return {user:{username:'',password:'',gender:'man',habbits:[],address:'',remark:''}}},methods:{btnClick(){alert(this.user)}}})</script></body>
</html>

结果:

在这里插入图片描述

过滤器的问题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>过滤器的问题</title><script src="js/vue.min.js"></script><script src="js/dayjs.min.js"></script></head><body><div id="div001">当前的日期是:{{getTime}}<br />当前的日期是:{{currentTime | timeFilter}}<br />当前的日期是:{{currentTime | timeFilter1}}</div><script>//定义全局过滤器Vue.filter("timeFilter",function(val,format="YYYY年MM月DD日 HH:mm:ss"){return dayjs(val).format(format)})new Vue({el:"#div001",data(){return {currentTime: 1621561377603}},computed:{getTime(){return dayjs(this.currentTime).format("YYYY年MM月DD日 HH:mm:ss")}},filters:{timeFilter1(val,format="YYYY年MM月DD日 HH:mm:ss"){return dayjs(val).format(format)}}})</script></body>
</html>

内置指令

v-html指令:1.作用:向指定节点中渲染包含html结构的内容。2.与插值语法的区别:(1).v-html会替换掉节点中所有的内容,{{xx}}则不会。(2).v-html可以识别html结构。3.严重注意:v-html有安全性问题!!!!(1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击。(2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script><script src="js/dayjs.min.js" type="text/javascript" charset="utf-8"></script></head><body><div id="div001"><div v-text="content1"></div><hr /><div v-html="content2"></div></div><!--初始化我们的Vue--><script type="text/javascript">//推荐使用这种 在脚手架里面用的就是这种const vm = new Vue({el: "#div001",data() {return {content1:"<h1>我是内容1的内容</h1>",content2:"<h1>我是内容2的内容</h1>",}}})</script></body></html>

Vue的生命周期问题

vue生命周期可以分为八个阶段,分别是:beforeCreate(创建前)、created(创建后)、
beforeMount(载入前)、mounted(载入后)、
beforeUpdate(更新前)、updated(更新后)、
beforeDestroy(销毁前)、destroyed(销毁后)

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

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

相关文章

3211064 - 错误消息 AA634 出现在 T-cd AW01N 或 T-cd AFAR 中

症状 通过 T-cd AW01N 打开资产或在 T-cd AFAR 中重新计算资产值时&#xff0c;出现以下错误消息&#xff1a; AA634 在范围 01 中普通折旧的更正大于累计折旧 环境 SAP R/3SAP R/3 EnterpriseSAP ERP SAP ERP 中心组件SAP ERP 的 SAP 增强包SAP ERP&#xff08;SAP HANA 版…

VUE笔记(六)vue路由

一、路由的简介 1、实现生活中的路由 路由&#xff1a;路由其实就是一个key-value对应关系 路由器&#xff1a;用于管理多个路由关系的设备被称为路由器 2、前端的路由 目前使用的前端项目都是单页面的应用&#xff08;SPA&#xff09;&#xff0c;一个项目中只有一个html页…

c语言中编译过程与预处理

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、c语言的编译与链接1、编译与链接概述2、编译与链接详解 二、c语言预处理1.c语言中内置的预定义符号2、#define定义标识符3、#define定义宏4、#define 替换规…

CSS scoped 属性的原理

scoped 一、scoped 是什么&#xff1f;二、实现原理 一、scoped 是什么&#xff1f; 在 Vue 组件中&#xff0c;为了使样式私有化&#xff08;模块化&#xff09;&#xff0c;不对全局造成污染&#xff0c;可以在 style 标签上添加 scoped 属性以表示它的只属于当下的模块&am…

12,【设计模式】工厂

设计模式工厂 通过工程来构建任意参数对象&&std::forwardstd::move 在C中&#xff0c;“工厂”&#xff08;Factory&#xff09;是一种设计模式&#xff0c;它提供了一种创建对象的方式&#xff0c;将对象的创建和使用代码分离开来&#xff0c;提高了代码的可扩展性和可…

数组和指针练习解析(6)

题目&#xff1a; int main() { char *c[] {"ENTER","NEW","POINT","FIRST"}; char**cp[] {c3,c2,c1,c}; char***cpp cp; printf("%s\n", **cpp); printf("%s\n", *--*cpp3)&#xff1b; printf("%s\n&…

actions mutations getters的区别,作用,和代码举例

actions mutations getters的区别&#xff0c;作用&#xff0c;和代码举例 在VueX中&#xff0c;actions、mutations和getters是用于管理和操作VueX的状态的不同概念和功能。 mutations&#xff08;变更&#xff09;&#xff1a; 作用&#xff1a;mutations用于修改VueX的状态…

数学建模的三大模型和十大常用算法

一、三大模型 预测模型 神经网络预测、灰色预测、拟合插值预测(线性回归)、时间序列预测、马尔科夫链预测、微分方程预测、Logistic模型等等。 应用领域&#xff1a;人口预测、水资源污染增长预测、病毒蔓延预测、竞赛获胜概率预测、月收入预测、销量预测、经济发展情况预测等在…

数据结构(Java实现)-包装类和泛型

包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了 一个包装类型。 基本数据类型和对应的包装类 装箱和拆箱 装箱操作&#xff0c;新建一个 Integer 类型对象&#xff0c;将 i 的…

kafka原理之springboot 集成批量消费

前言 由于 Kafka 的写性能非常高&#xff0c;因此项目经常会碰到 Kafka 消息队列拥堵的情况。遇到这种情况&#xff0c;我们可以通过并发消费、批量消费的方法进行解决。 一、新建一个maven工程&#xff0c;添加kafka依赖 <dependency><groupId>org.springframe…

【提升接口响应能力的最佳实践】常规操作篇

文章目录 1. 并行处理简要说明CompletableFuture是银弹吗&#xff1f;测试案例测试结论半异步&#xff0c;半同步总结 2. 最小化事务范围简要说明编程式事务模板 3. 缓存简要说明 4. 合理使用线程池简要说明使用场景线程池的创建参数的配置建议 线程池的监控线程池的资源隔离 5…

【jvm】双亲委派机制

目录 一、说明二、工作原理三、优势四、图示 一、说明 1.java虚拟机对class文件采用的是按需加载的方式&#xff0c;当需要使用该类时才会将它的class文件加载到内存生成class对象 2.加载某个类的class文件时&#xff0c;java虚拟机采用双亲委派模式&#xff0c;即把请求交给由…

curl --resolve参数的作用

之所以会有这样的操作&#xff0c;是因为域名一般对应的都是一个反向代理&#xff0c;直接请求域名&#xff0c;反向代理会将流量随机选一台机器打过去&#xff0c;而无法确保所有的机器都可用。所以直接用ip。 在 curl 命令中&#xff0c;--resolve 参数用于指定自定义的主机名…

想解锁禁用的iPhone?除了可以使用电脑之外,这里还有不需要电脑的方法!

多次输入错误的密码后,iPhone将显示“iPhone已禁用”。这种情况看起来很棘手,因为你现在不能用iPhone做任何事情。对于这种情况,我们提供了几种有效的方法来帮助你在最棘手的问题中解锁禁用的iPhone。你可以选择使用或不使用电脑来解锁禁用的iPhone。 一、为什么你的iPhone…

基于FPGA的FIR低通滤波器实现(附工程源码),matlab+vivado19.2+simulation

基于FPGA的FIR低通滤波器实现(附工程源码) 文章目录 基于FPGA的FIR低通滤波器实现(附工程源码)前言一、matlab设计FIR滤波器&#xff0c;生成正弦波1.设计FIR滤波器1.生成正弦波.coe 二、vivado1.fir滤波器IP核2.正弦波生成IP核3.时钟IP核设置4.顶层文件/测试文件代码 三.simul…

【30天熟悉Go语言】11 数组的全方位使用与解析

作者&#xff1a;秃秃爱健身&#xff0c;多平台博客专家&#xff0c;某大厂后端开发&#xff0c;个人IP起于源码分析文章 &#x1f60b;。 源码系列专栏&#xff1a;Spring MVC源码系列、Spring Boot源码系列、SpringCloud源码系列&#xff08;含&#xff1a;Ribbon、Feign&…

OLED透明屏水波纹效果:打造独特的显示体验

OLED透明屏水波纹效果是一种独特的显示技术&#xff0c;通过模拟水波纹的视觉效果&#xff0c;为用户带来更加生动逼真的观感。 根据市场调研报告显示&#xff0c;OLED透明屏水波纹效果已经在广告、游戏和商业领域得到广泛应用&#xff0c;为品牌提供了新的展示方式&#xff0…

根据源码,模拟实现 RabbitMQ - 网络通讯设计,自定义应用层协议,实现 BrokerServer (8)

目录 一、网络通讯协议设计 1.1、交互模型 1.2、自定义应用层协议 1.2.1、请求和响应格式约定 ​编辑 1.2.2、参数说明 1.2.3、具体例子 1.2.4、特殊栗子 1.3、实现 BrokerServer 1.3.1、属性和构造 1.3.2、启动 BrokerServer 1.3.3、停止 BrokerServer 1.3.4、处…

力扣:75. 颜色分类(Python3)

题目&#xff1a; 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&#xff0c;并按照红色、白色、蓝色顺序排列。 我们使用整数 0、 1 和 2 分别表示红色、白色和蓝色。 必须在不使用库内置的 sort …

【数据分析】波士顿矩阵

波士顿矩阵是一种用于分析市场定位和企业发展战略的管理工具。由美国波士顿咨询集团&#xff08;Boston Consulting Group&#xff09;于1970年提出&#xff0c;并以该集团命名。 波士顿矩阵主要基于产品生命周期和市场份额两个维度&#xff0c;将企业的产品或业务分为四个象限…