vue基础3
1.推荐好用的第三方框架
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
1.moment.js
2.dayjs
2.收集表达数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style>
</head>
<!-- 收集表单数据：若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值。若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值若：<input type="checkbox"/>1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)2.配置input的value属性：(1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值）(2)v-model的初始值是数组，那么收集的的就是value组成的数组备注：v-model的三个修饰符：lazy:失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤
--><body><!-- 准备好一个容器 --><div id="root"><form @submit.prevent="demo"><!-- 使用label标签让label里的内容与一个标签作为关联 --><label for="demo"> 账号：</label><!-- 去掉前后空格 --><input type="text" name="" id="demo" v-model.trim="userInfo.account"><br><label for="password">密码：</label><input type="password" name="" id="password" v-model="userInfo.password"><br><label for="age">年龄：</label><!-- 转成 数字类型 --><input type="number" name="" id="age" v-model.number="userInfo.age"><br><label for="sex">性别：</label><!-- 单选框 -->男<input type="radio" value="男" v-model="userInfo.sex">女<input type="radio" value="女" v-model="userInfo.sex"><br>爱好：学习<input type="checkbox" value="study" v-model="userInfo.hobby"><!-- 不写value默认收集的就是checked 布尔值 -->打游戏<input type="checkbox" value="playgame" v-model="userInfo.hobby">吃饭<input type="checkbox" value="eating" v-model="userInfo.hobby"><br>所属校区：<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br>其他信息<!-- 懒加载 当失去焦点的时候才获取值 --><textarea v-model.lazy="userInfo.otherInfo"></textarea><br><input type="checkbox" v-model="userInfo.agree"> 阅读并接受 <a href="http://www.baidu.com">《用户协议》</a><br><button>提交</button></form></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",data: {userInfo: {account: '',password: '',age:19,sex: '2',hobby: [],city: 'beijing',otherInfo: '',agree: false}},methods: {demo() {console.log(JSON.stringify(this._data));}},})</script></body></html>3.过滤器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤器</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script>
</head><!-- 过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：1.注册过滤器：Vue.filter(name,callback)或 new Vue{filters:{}}2.使用过滤器：{{xxx|过滤器名}}或 v-bind：属性="xxx|过滤器名”备注：1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据，是产生新的对应的数据-->
<body><!-- 准备好一个容器 --><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在的时间是:{{date}}</h3><!-- 计算属性实现 --><h3>现在的时间是:{{dateFun()}}</h3><!-- 过滤器实现 --><h3>现在的时间是:{{time | timeFormat('YYYY-MM-DD') | mySlice}}</h3><hr><h3 :x="msg | mySlice">尚硅谷</h3></div><!-- 准备好一个容器 --><div id="root2"><h2>显示格式化后的时间</h2><!-- 过滤器实现 --><h3>现在的时间是:{{time | mySlice}}</h3></div><script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示Vue.filter('mySlice',function(val){return val.toString().slice(0,4);})const vm = new Vue({el:"#root",data: {time:Date.now(),msg:'你好,尚硅谷'},methods: {dateFun(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');}},computed:{date(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');}},// 局部过滤器filters:{timeFormat(val,format){if(format!==null){return dayjs(val).format(format);}else{return dayjs(val).format('YYYY-MM-DD HH:mm:ss');}}}}) const vm2 = new Vue({el:"#root2",data: {time:Date.now()}}) setInterval(()=>{vm.time = Date.now()},1000)</script></body>
</html>4.cookie
勾上后只能被 http携带
5.自定义指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 需求1:定义一个v-big指令,和v-text功能类似，但会把绑定的数值放大10倍，需求2:定义一个v-fbind指令，和 v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。--><!-- 自定义指令总结：一、定义语法：（1）.局部指令：new Vue({ new Vue({directives:{指令名：配置对象} 或 方法 directives:{指令名(){}}}) ([bind:(){},inserted:(){},update(){}]) })（2）.全局指令：Vue.directive(指令名，配置对象）或 Vue.directive(指令名，回调函数）二、配置对象中常用的3个回调：(1）.bind：指令与元素成功绑定时调用。(2）.inserted：指令所在元素被插入页面时调用。(3）.update：指令所在模板结构被重新解析时调用。三、备注：1.指令定义时不加v-，但使用时要加v-；2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。--><!-- 准备好一个容器 --><div id="root">{{name}}<h2>当前的n值是<span v-text="n"></span></h2><h2>放大10倍后的n值是<span v-big="n"></span></h2><button @click="n++">点我n+1</button><button @click="jiejue">点我变化name</button><hr><!-- <input type="text" v-fbind:value="n" autofocus> autofocus 自动获取焦点 不是什么浏览器都好使 --><input type="text" v-fbind:value="n"></div><!-- 准备好一个容器 --><div id="root2">{{name}}<h2>当前的n值是<span v-text="n"></span></h2><h2>放大10倍后的n值是<span v-big="n"></span></h2><button @click="n++">点我n+1</button><button @click="jiejue">点我变化name</button><hr><!-- <input type="text" v-fbind:value="n" autofocus> autofocus 自动获取焦点 不是什么浏览器都好使 --><input type="text" v-fbind1:value="n"></div><script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示Vue.directive('fbind1',{bind(element,binding){console.log('bind全局',this);//指令与元素成功绑定时(一上来)element.value = binding.value;},inserted(element,binding){//指令所在元素被插入页面时element.focus();console.log('inserted全局',this);},//局部指令update(element,binding){//指令所在的模板被重新解析时console.log('update全局',this);//注意此处时windowelement.value = binding.value;}});const vm = new Vue({el:"#root",data: {name:2,n:1},methods: {jiejue(){this.name++;}},// 函数式定义指令directives:{//big函数合适会被调用？1.指令与元素成功绑定时调用（一上来）2.指令所在的模板被重新解析时//名字比较长就用 -隔开 然后在定义指令的时候用原生写法 'big-number':function(e,b){}big(element,binding){// console.dir(element) 详细输出element// console.log(element instanceof HTMLElement); true// console.log(b);console.log('big',this);element.innerText=binding.value*10;},fbind:{bind(element,binding){console.log('bind',this);//指令与元素成功绑定时(一上来)element.value = binding.value;console.log('bind');},inserted(element,binding){//指令所在元素被插入页面时console.log('inserted');element.focus();console.log('inserted',this);},//局部指令update(element,binding){//指令所在的模板被重新解析时console.log('update');console.log('update',this);//注意此处时windowelement.value = binding.value;}}}}) new Vue({el:'#root2',data: {name:2,n:1},methods: {jiejue(){this.name++;}}, // 函数式定义指令directives:{//big函数合适会被调用？1.指令与元素成功绑定时调用（一上来）2.指令所在的模板被重新解析时//名字比较长就用 -隔开 然后在定义指令的时候用原生写法 'big-number':function(e,b){}big(element,binding){// console.dir(element) 详细输出element// console.log(element instanceof HTMLElement); true// console.log(b);console.log('big',this);element.innerText=binding.value*10;},fbind:{bind(element,binding){console.log('bind',this);//指令与元素成功绑定时(一上来)element.value = binding.value;console.log('bind');},inserted(element,binding){//指令所在元素被插入页面时console.log('inserted');element.focus();console.log('inserted',this);},//局部指令update(element,binding){//指令所在的模板被重新解析时console.log('update');console.log('update',this);//注意此处时windowelement.value = binding.value;}}}})</script></body>
</html>6.引出生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><!-- 生命周期：1.又名：生命周期回调函数、生命周期函数、生命周期钩子。2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm 或组件实例对象。--><body><!-- 准备好一个容器 --><div id="root"><!-- opacity透明度 0~1 --><h2 v-if="a">你好啊</h2><h2 :style="h2style">欢迎学习Vue</h2></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",data: {a:false,h2style: {opacity: 0.2,},},methods: {},// Vue完成模板的解析，并把初始的真实的DOM元素放入页面后 (挂载完毕) 调用mountedmounted() {console.log('mounted',this);//vm setInterval(() => {this.h2style.opacity -= 0.01;if (this.h2style.opacity <= 0) {this.h2style.opacity = 1;}}, 16);this.a=true;},})// window.onload=()=>{// // vm.change(); 页面加载完再调用// }//通过外部的定时器实现(不推荐)// setInterval(() => {// vm.h2style.opacity-=0.01;// if(vm.h2style.opacity<=0){// vm.h2style.opacity = 1;// }// }, 16);</script></body></html>
这个事件监听器指的是自定义事件
7.分析生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="add">点我n+1</button><button @click="bye">点我销毁vm</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",//把整个template替换上面root 的div// template: ` // <div>// <h2>当前的n值是{{n}}</h2>// <button @click="add">点我n+1</button>// </div>// `,data: {n: 1},methods: {add() {this.n++;},bye(){console.log('bye');this.$destroy();//销毁vm}},beforeCreate() {console.log('beforeCreate');// console.log(this.n);// debugger;//这是前端的debug },created() {console.log('created');},beforeMount() {console.log('beforeMount');//其实vue已经解析完了，没有往页面放呢// debugger;},mounted() {console.log('mounted ');console.log(this.$el instanceof HTMLElement);//true},beforeUpdate() {console.log('beforeUpdate');console.log(this.n);// debugger;},updated() {console.log('updated'); },beforeDestroy() {console.log('beforeDestroy');}, destroyed() {console.log('destroy');},})</script></body></html>8.总结生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><!-- 常用的生命周期钩子：1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效，但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
--><body><!-- 准备好一个容器 --><div id="root"><!-- opacity透明度 0~1 --><h2 v-if="a">你好啊</h2><h2 :style="h2style">欢迎学习Vue</h2><button @click="h2style.opacity=1">透明度设置为1</button><button @click="stop">点我停止</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",data: {a: false,h2style: {opacity: 0.2,},},methods: {stop() {this.$destroy();}},// Vue完成模板的解析，并把初始的真实的DOM元素放入页面后 (挂载完毕) 调用mountedmounted() {console.log('mounted', this);//vm this.timer = setInterval(() => {//返回的是定时器的id 数字类型 唯一标识console.log("setInterval");this.h2style.opacity -= 0.01;if (this.h2style.opacity <= 0) {this.h2style.opacity = 1;}}, 16);this.a = true;},beforeDestroy() {console.log('清除定时器成功');clearInterval(this.timer)//放入唯一标识清除定时器},})// window.onload=()=>{// // vm.change(); 页面加载完再调用// }//通过外部的定时器实现(不推荐)// setInterval(() => {// vm.h2style.opacity-=0.01;// if(vm.h2style.opacity<=0){// vm.h2style.opacity = 1;// }// }, 16);</script></body></html>相关文章：
vue基础3
1.推荐好用的第三方框架 BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务 1.moment.js 2.dayjs 2.收集表达数据 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Document</title><…...
LINUX -exec函数族
1、功能： *让父子进程来执行不相干的操作 *能够替换进程地址空间的代码.text段 *执行另外的程序，不需要创建额外的的地址空间 *当前程序中调用另外一个应用程序 2、执行目录下的程序： *指定执行目录下的程序 int execl(const char *path,…...
c++ 智能指针shared_ptr与make_shared
shared_ptr是C11引入的一种智能指针，它允许多个shared_ptr实例共享同一个对象，通过引用计数来管理对象的生命周期。当最后一个持有对象的shared_ptr被销毁时，它会自动删除所指向的对象。这种智能指针主要用于解决资源管理问题&…...
2024-HW最新漏洞整理及相应解决方案（二）
目录 前言： 漏洞 1.用友NC系统电采complainjudge接口的sql注入漏洞 2.用友U8 CRM产品存在SQL注入漏洞 3.WordPress LMS 插件任意文件上传漏洞 4.Oracle Fusion Middleware 安全漏洞CVE-2024-21181 5.WordPress plugin LearnPress 安全漏洞CVE-2024-6589 6.W…...
spring boot整合JPA兼容MySQL8和达梦数据库8
前言 Spring Boot是一个基于Spring框架的快速开发框架，它可以简化Spring应用的配置和部署过程。JPA（Java Persistence API）是Java持久化规范的一种实现，它提供了一种统一的方式来访问和管理数据库。MySQL和达梦数据库都是常用的关…...
规划决策算法（四）---Frenet坐标系
知乎：坐标系转换 1.Frenet 坐标系 什么是 Frenet 坐标系： 为什么使用 Frenet 坐标系： 通常情况，我们只会关注车辆当前距离左右车道线的距离，来判断是否偏离车道，是否需要打方向盘进行方向微调。而不是基于…...
大数据处理：大数据处理框架Hadoop、Spark
大数据处理是当代信息技术领域的一个重要分支，它涉及到海量数据的存储、管理和分析。为了高效地应对大数据处理的挑战，多种框架被开发出来，其中Hadoop和Spark是最为知名和广泛应用的两种。以下将详细介绍这两种框架以及它们在大数据处理中的应…...
网传的高频流量费会影响到个人用户的算法和策略T0吗？
先解答这个问题：高频的流量费这个确实是会影响你自己算法的交易的！但是，强调一个但是：有的券商是没有流量费的！小编今天就来带大家了解一下！第一：算法交易的应用场景！ 算法交易的主…...
阿里云服务器 Ubuntu18.04 安装 mysql8.0并允许外部连接
参考教程： 官网教程 参考教程一 首先彻底删除mysql5.7 dpkg --list|grep mysql #查看 sudo apt-get remove mysql-common #卸载 sudo apt-get autoremove --purge mysql-server-5.7 #版本自己修改 dpkg -l|grep ^rc|awk {print$2}|sudo xargs dpkg -P #清除残留数…...
(Arxiv-2023)MobileDiffusion：移动设备上即时文本到图像生成
MobileDiffusion：移动设备上即时文本到图像生成 Paper Title：MobileDiffusion: Instant Text-to-Image Generation on Mobile Devices Paper是谷歌出品 Paper地址 图 1：MobileDiffusion 用于 (a) 文本到图像的生成。(b) Canny 边缘到图像、风…...
【七】Hadoop3.3.4基于ubuntu24的分布式集群安装
文章目录 1. 下载和准备工作1.1 安装包下载1.2 前提条件 2. 安装过程STEP 1: 解压并配置Hadoop选择环境变量添加位置的原则检查环境变量是否生效 STEP 2: 配置Hadoop2.1. 修改core-site.xml2.2. 修改hdfs-site.xml2.3. 修改mapred-site.xml2.4. 修改yarn-site.xml2.5. 修改hado…...
【Rust光年纪】深入了解Rust语言的关键库：功能特点与使用场景分析
探索Rust语言下的重要库：硬件接口控制和数据库操作全解析 前言 随着Rust语言在嵌入式开发和数据库操作领域的不断发展，越来越多的优秀库和工具涌现出来。本文将介绍一些用于Rust语言的重要库，包括硬件接口库、嵌入式硬件抽象层、ORM和查询构…...
矩估计与最大似然估计的通俗理解
点估计与区间估计 矩估计与最大似然估计都属于点估计，也就是估计出来的结果是一个具体的值。对比区间估计，通过样本得出的估计值是一个范围区间。例如估计馒头店每天卖出的馒头个数，点估计就是最终直接估计每天卖出10个，而区间估…...
性能调优本质：如何精准定位瓶颈并实现系统极致优化
目录 先入为主的反例 性能调优的本质 性能调优实操案例 性能调优相关文章 先入为主的反例 在典型的 ETL 场景中，我们经常需要对数据进行各式各样的转换，有的时候，因为业务需求太复杂，我们往往还需要自定义 UDF（User Defined Functions）来实现特定的转换逻辑。 但是…...
Git的命令
git add . 添加到暂存区 git commit -m 备注 提交 git branch 查看所有分支 git branch -d 分支名 删除分支 git push origin --delete 分支名 远程分支删除 git branch -a 查看删除后的分支 git clone 地址 例如https://gitee.com/whale456/demo.git git push origin m…...
WPF中使用定时器更新元素-DispatcherTimer
在WPF中使用定时器来更新UI元素是一种常见且有用的做法，特别是当你需要基于时间间隔来刷新数据或执行某些操作时。DispatcherTimer是WPF中用于在UI线程上执行周期性任务的理想选择，因为它确保了对UI元素的更新是线程安全的 例子程序 每隔0.5s 界面中的…...
计算机网络 - 理解HTTP与HTTPS协议的关键区别与安全性
作者：逍遥Sean 简介：一个主修Java的Web网站\游戏服务器后端开发者 主页：https://blog.csdn.net/Ureliable 觉得博主文章不错的话，可以三连支持一下~ 如有疑问和建议，请私信或评论留言！ 前言 在今天的互联网…...
【Spring Framework】使用XML配置文件配置Bean的实例化方式
在 Spring Framework 中，实例化 bean 的方式非常灵活，允许开发人员根据需求选择不同的方法。以下是几种常见的实例化 bean 的方式及其示例： 1. 通过无参构造函数实例化 这是最常见的方式，Spring 会使用 bean 的默认无参构造函数…...
模拟电子技术-实验四 二极管电路仿真
实验四 二极管电路仿真 一．实验类型 验证性实验 二．实验目的 1、验证二极管的单向导电性 2、验证二极管的稳压特性。 三．实验原理 二极管的单向导电性： 四、实验内容 1、二极管参数测试仿真实验 1）仪表仿真…...
Git 子仓（Git Submodule）学习
Git 子仓学习 Git 子仓（Submodule）是 Git 提供的一种功能，用于在一个 Git 仓库（称为主仓库或 superproject）中嵌入另一个 Git 仓库（称为子仓或 submodule）。这种功能在管理大型项目或依赖关系较…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...
Spark 之 入门讲解详细版（1）
1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室（Algorithms, Machines, and People Lab）开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目，8个月后成为Apache顶级项目，速度之快足见过人之处&…...
Zustand 状态管理库：极简而强大的解决方案
Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注：文档 https://developers.weixin.qq…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测；从基础到高级，涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等
🔍 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术，可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势，还能有效评价重大生态工程…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
AI书签管理工具开发全记录（十九）：嵌入资源处理
1.前言 📝 在上一篇文章中，我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源，方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包，彻底改变了静态资源管理的…...
Bean 作用域有哪些？如何答出技术深度？
导语： Spring 面试绕不开 Bean 的作用域问题，这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开，结合典型面试题及实战场景，帮你厘清重点，打破模板式回答，…...