【Vue框架】基础语法练习（1）
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习
https://cn.vuejs.org/
说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API，而Vue2是选项式API。还有就是目前并没有使用npm、pnpm、yarn等构建工具创建Vue，而是使用全局构建版的 Vue
<script src="https://unpkg.com/vue@3"></script>目录
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习
1、基本用法
2、内容渲染
2.1 组合式
2.2 选项式
3、响应式
3.1 组合式
3.2 选项式
4、计算属性
5、属性绑定
6、JS表达式
7、条件渲染
8、事件绑定
9、列表渲染
10、双向绑定
11、双向绑定案例
1、基本用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app">{{msg}}<h1>{{web.title}}</h1><h1>{{web.url}}</h1></div>
</body>
<script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const web=Vue.reactive({ //创建一个响应式的数据对象web，里面包含title和url两个属性title:"HNUCM",url:"www.hnucm.edu.cn"})//返回数据return{msg:"success",web}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script><script>//什么是解构：从一个数组或者对戏那个中把值提取出来赋给新的变量//数组解构const number=[1,2,3]const [one,two,three]=numberconsole.log(one,two,three)//对象解构const person={name:"fanhuling",age:20}const {name,age}=personconsole.log(name,age)//函数参数解构function introduce({name,age}){console.log(`My name is ${name},I am ${age} years old`)}introduce(person)</script></html>
2、内容渲染
2.1 组合式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 ：显示HTML内容 --><p v-html="desc"></p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive}=Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const username="fanhuiling"const age=20const desc='<a href ="www.baidu.com">百度一下</a>'//返回数据return{username,age,desc}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>2.2 选项式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><!-- 文本插值表达式 --><p>{{username}}</p><p>{{age}}</p><p>{{desc}}</p><!-- v-html指令 ：显示HTML内容 --><p v-html="desc"></p></div>
</body>
<script>const vm={data:function(){return{username:"fanhuiling",age:20,desc:'<a href="www.baidu.com">百度一下</a>'}}}const app=Vue.createApp(vm)app.mount('#app')
</script></html>
3、响应式
3.1 组合式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button @click="incretement">增加</button><p>{{count}}</p><p>{{state.counter}}</p></div>
</body>
<script>const {createApp,reactive,ref}=Vue//ref 适用于基本类型（字符串、数字、布尔值）//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const count=ref(0)const state=ref({counter:0})//将ref 改为reactive后，counter会和count一起增加//箭头函数const incretement = ()=>{count.value++;state.counter++;}return{count,incretement,state}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>
3.2 选项式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><button onclick="incretement">增加</button><p>{{count}}</p></div>
</body>
<script>const vm={data:function(){//const count=Vue.ref(0)return{count:1} },methods: {incretement(){this.count++;} }}const app=Vue.createApp(vm)app.mount('#app')
</script></html>
4、计算属性
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body><div id="app"><h1>{{add()}}</h1><h1>{{add()}}</h1><h1>{{sum}}</h1><h1>{{sum}}</h1></div>
</body>
<script>const {createApp,reactive,ref,computed}=Vue//ref 适用于基本类型（字符串、数字、布尔值）//reactive 适用于对象、数组等复合类型createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const data = reactive({x:10,y:20})//无缓存的方法const add=()=>{console.log("add")return data.x+data.y;}//有缓存的方法//计算属性：根据依赖响应式数据变化来决定是否重新计算const sum=computed(()=>{console.log("sum")return data.x+data.y})return {data,add,sum}}}).mount('#app')//将Vue 应用程序挂载到app元素上</script></html>
5、属性绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><div :style="{width:h,height:h,backgroundColor:bgc}"></div></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const w=ref('500px');const h=ref('500px');const bgc=ref('red');// 返回数据return {w,h,bgc}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html> 
6、JS表达式
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>{{number+1}}</p><p>{{ok ?'True':'False'}}</p><!-- 翻转字符串：先以，分割为数组，数组翻转，然后在结合 --><p>{{msg.split('').reverse().join('')}}</p> <p :id="'list-'+id"></p><p>{{user.name}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const number=0;const ok=ref(true);const msg="ABC"const id=3const user={name:"fanhuiling"}return {number,ok,msg,id,user}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
7、条件渲染
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><button @click="flag=!flag">开关</button><!-- v-if 当为false时，会从真实dom删除 --><p v-if="flag">请求成功，被v-if控制</p> <p v-show="flag">请求成功，被v-show控制</p><p v-if= "type === A">类型A</p><p v-else-if="type === B">类型B</p><p v-else>不是A和B</p></div>
</body><script>//将Vue 对象中的createAPP reactive 属性赋值给createApp reactiveconst {createApp,reactive,ref}=Vue //解构语法//创建一个Vue应用程序createApp({// 组合式API的setup 用于设置响应式数据和方法setup() {const flag=ref(true)const type=ref("C")return{flag,type}}}).mount('#app')//将Vue 应用程序挂载到app元素上
</script></html>
8、事件绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><p>count的值为：{{count}}</p><button v-on:click="addCount">+1</button><button @click="addCount">+1</button></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const count=ref(0)const addCount=()=>{count.value++;}// 返回数据return {count,addCount}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
9、列表渲染
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><!-- 添加数据 --><input type="text" v-model="name"/><button @click="addUser"> 添加</button><ul><li v-for="user in userlist">姓名：{{user.name}}</li><li v-for="user,index in userlist" :key="user.id"><input type="checkbox"/>索引：{{index}}姓名：{{user.name}}</li></ul></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const userlist=reactive([{id:1,name:"Tom"},{id:2,name:"Jerry"},{id:3,name:"mary"}])const nextId=ref(4)const name=ref('')const addUser=()=>{userlist.unshift({id:nextId.value,name:name.value})name.value="";nextId.value++;}// 返回数据return {userlist,nextId,name,addUser}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
10、双向绑定
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><input v-model="msg" placeholder="输入文本"/><p>{{msg}}</p></div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const msg=ref(测试)// 返回数据return {msg}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html> 
11、双向绑定案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 导入vue.js的脚本文件 --><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="app"><h3>文本框：{{data.text}}</h3><h3>单选框：{{data.radio}}</h3><h3>复选框：{{data.checkbox}}</h3><h3>下拉框：{{data.select}}</h3><h3>记住密码：{{data.remember}}</h3><!-- 单向数据绑定时，数据发生变化视图会自动更新，但是手动修改input的值，数据不会自动更新 -->单向数据绑定：<input type="text" :value="data.text"/><br><!-- 双向数据绑定，当数据发生变化时，视图会自动更新，手动修改input的值，数据也会自更新 -->双向数据绑定：<input type="text" v-model="data.text"/><br><br><br><input type="radio" v-model="data.radio" value="1">听音乐<input type="radio" v-model="data.radio" value="2">写代码<br><br><input type="checkbox" v-model="data.checkbox" value="a">听音乐<input type="checkbox" v-model="data.checkbox" value="b">写代码<input type="checkbox" v-model="data.checkbox" value="c">刷B站<br><br><select v-model="select"><option value="" >请选择</option><option value="A" >听音乐</option><option value="B" >写代码</option><option value="C" >刷B站</option></select><br><br><input type="checkbox" v-model="data.remember">记住密码</div>
</body>
<script>// 将 Vue 对象中的createApp reactive 属性赋值给createApp reactiveconst { createApp, reactive, ref } = Vue; // 解构赋值语法// 创建一个 Vue 的应用程序createApp({// 组合式API 的 setup 用于设置响应式数据和方法setup() {const data=reactive({text:'fanhuiling' ,//文本框radio:"",checkbox:[],select:"",remember:false //单个复选框--功能是记住密码})// 返回数据return {data}}}).mount('#app') // 将 Vue 应用程序挂载到app元素上
</script></html>
相关文章：
【Vue框架】基础语法练习（1）
其实更多知识点已经在Vue.js官网十分清楚了，大家也可以去官网进行更细节的学习 https://cn.vuejs.org/ 说明：目前最新是Vue3版本的，但是Vue2已经深得人心，所以就是可以支持二者合用。它们最大的区别就是Vue3是组合式API…...
开源一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码
大家好，我是一颗甜苞谷，今天分享一款基于 JAVA 的仓库管理系统,支持三方物流和厂内物流,包含 PDA 和 WEB 端的源码。 前言 在当前的物流仓储行业，企业面临着信息化升级的迫切需求，但往往受限于高昂的软件采购和维护成本。现有的…...
开源一套基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单的源码
大家好，我是一颗甜苞谷，今天分享一款基于若依的wms仓库管理系统，支持lodop和网页打印入库单、出库单的源码。 前言 在当今快速发展的商业环境中，库存管理对于企业来说至关重要。然而，许多企业仍然依赖于传统的、手动…...
HTML+JavaScript案例分享： 打造经典俄罗斯方块，详解实现全过程
在本文中，我们将深入探讨如何使用 JavaScript 实现经典的俄罗斯方块游戏。俄罗斯方块是一款广为人知的益智游戏，通过操纵各种形状的方块，使其在游戏区域内排列整齐，以消除完整的行来获得分数。 效果图如下： 一、游戏界面与布局 我们首先使用 HTML 和 CSS 来创建游戏的界面…...
【网页布局技术】项目五 使用CSS设置导航栏
《CSSDIV网页样式与布局案例教程》 徐琴 目录 任务一 制作简单纵向导航栏支撑知识点1．合理利用display:block属性2．利用margin-bottom设置间隔效果3．利用border设置特殊边框 任务二 制作简单横向导航栏任务三 制作带图片效果的横向导航栏任务…...
自学网络安全，网络安全入门学习路线，收藏这篇就够了
在当今高度数字化的时代，网络安全已经成为了一个至关重要的领域。随着网络威胁的不断演变和增长，对于专业网络安全人才的需求也在急剧上升。对于那些对网络安全充满热情并且渴望自学成才的人来说，制定一个系统、全面且高效的学习路线和规划是…...
React Query已过时？新一代请求工具横空出世
大家好！今天我想和你们聊聊一个让我兴奋不已的话题 —— 分页列表请求策略。你们知道吗？这个策略真的帮了我大忙！它不仅让我的代码更简洁，还大大提升了用户体验。说实话，每次用到这个功能，我都忍不住赞叹。…...
视频怎么进行格式转换？6款视频转换MP4格式的免费软件！
在数字时代，视频格式的多样性为我们提供了丰富的观看和编辑选择，但同时也带来了格式不兼容的困扰：MOV、AVI、WMV、MKV……这些格式多多少少都会遇到因不兼容而无法播放或下载分享的场景。当你想要将视频文件从一种格式转换为另一种格式&#…...
智能文档处理平台：免费体验智能化医疗信息提取
前提：医疗行业信息碎片化问题普遍，手工数据录入效率低且易错，导致数据管理难度大。本系统可帮助医疗机构在信息管理上迈向智能化，优化流程并提升效率。 系统概述： 思通数科推出的智能文档处理系统，专为解…...
Java 中 InputStream 的使用：try-with-resources 与传统方式的比较
在 Java 中，处理输入输出流时，确保资源的正确管理至关重要。特别是 InputStream 这样的流，一旦使用完成，必须正确关闭以释放资源。本文将对两种常见的资源管理方式进行比较：try-with-resources 语句和传统的 try-catch…...
【MATLAB源码-第271期】基于matlab的雷达发射回波模拟，包括匹配滤波，加窗旁瓣控制，以及MTD处理。
操作环境： MATLAB 2022a 1、算法描述 雷达系统是一种广泛应用于目标探测和跟踪的技术，其核心在于发射电磁波并分析返回信号。本文将探讨雷达发射波形、回波信号的模拟、匹配滤波的过程、加窗控制旁瓣的策略以及慢时间MTD处理的整体系统框架。 一、雷…...
Linux系统编程——信号量
一、信号量的定义和原理 1、概念 原子操作：不可中断的一个或者一系列的操作，即一件事要么做要么不做。临界资源：不同进程能够看到的一份公共资源，一次只能被一个进程使用。PV操作：由于信号量只能进行两种操作等待和发…...
Oracle索引问题汇总
一、oracle 数据库TIMESTAMP 时间字段，设置索引后，通过该字段进行排序，索引排序不生效问题 1. 记录下在工作中遇到的一次索引问题 问题描述： 数据库：oracle； 日志记录表中的一个创建时间（create…...
基于QT用工厂模式实现串口通信与网络通信激光器的控制
配置文件网络配置：ＩＰ＋Ｐｏｒｔ 串口配置：端口号＋波特率 首先，我们需要创建一个配置文件 config.ini，内容如下： [SerialLaser] portName = COM1 baudRate = 9600[NetworkLaser] ipAddress = 192.168.1.1 port = 1234两类激光器的实现： #include <QCoreApplicat…...
【代码随想录Day58】图论Part09
dijkstra（堆优化版）精讲 题目链接/文章讲解：代码随想录 import java.util.*;class Edge {int to; // 邻接顶点int val; // 边的权重Edge(int to, int val) {this.to to;this.val val;} }class Pair<U, V> {public final U first; …...
_或者%关键字模糊匹配查出所有数据
1、问题 sql模糊匹配，如果页面输入_或者%，可以查出所有数据。 (1) SELECT * FROM test WHERE sfsc N and zdzwm like %%% (2) SELECT * FROM test WHERE sfsc N and zdzwm like %_% 2、解决方案 （1）mysql数据库 加转义字…...
【Python】转换得到图片的rgb565格式数据
使用方法：首先在代码同级目录创建input_images文件夹，然后将需要转换的图片放进去。 然后根据你的需要，修改代码最下面的crop_size、resize以及file_name。 最后点击运行，即可得到图片的rgb565格式数据 from PIL import Image, I…...
隨筆 20241024 Kafka中的ISR列表：分区副本的族谱
在分布式系统中，数据的一致性和可靠性至关重要。Apache Kafka作为一个强大的流处理平台，利用其分区和副本机制来确保这些特性。在Kafka中，ISR（In-Sync Replicas）列表是一个关键概念，它用来追踪与领导者副本…...
【python】爬虫
下载与批量下载 import requests #第三方库，没有下载的下载一下 pip install requests#爬虫下载图片 resrequests.get("url") print(res.content)#二进制字节流#写文件 with open("beauty.jpg","wb")as f:f.write(res.content)#批量…...
大语言模型数据类型与环境安装(llama3模型)
文章目录 前言一、代码获取一、环境安装二、大语言模型数据类型1、基本文本指令数据类型2、数学指令数据类型3、几何图形指令数据类型4、多模态指令数据类型5、翻译指令数据类型三、vscode配置四、相关知识内容1、理解softmax内容2、torch相关函数nn.Embedding函数torch.nn.fun…...
网络编程（Modbus进阶）
思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
C++ 求圆面积的程序（Program to find area of a circle）
给定半径r，求圆的面积。圆的面积应精确到小数点后5位。 例子： 输入：r 5 输出：78.53982 解释：由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982，因为我们只保留小数点后 5 位数字。 输…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
云原生玩法三问：构建自定义开发环境
云原生玩法三问：构建自定义开发环境 引言 临时运维一个古董项目，无文档，无环境，无交接人，俗称三无。 运行设备的环境老，本地环境版本高，ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
九天毕昇深度学习平台 | 如何安装库？
pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...
比较数据迁移后MySQL数据库和OceanBase数据仓库中的表
设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程，两张表是相同的结构，都有整型主键id字段，需要每次从数据库分批取得2000条数据，用于比较，比较操作的同时可以再取2000条数据，等上一次比较完成之后，开始比较，直到比较完所有的数据。比较操作需要比较…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能
1. 开发环境准备 安装DevEco Studio 3.1： 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK 项目配置： // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...
:LeetCode 142. 环形链表 II（Linked List Cycle II）详解)
Java详解LeetCode 热题 100(26):LeetCode 142. 环形链表 II（Linked List Cycle II）详解
文章目录 1. 题目描述1.1 链表节点定义 2. 理解题目2.1 问题可视化2.2 核心挑战 3. 解法一：HashSet 标记访问法3.1 算法思路3.2 Java代码实现3.3 详细执行过程演示3.4 执行结果示例3.5 复杂度分析3.6 优缺点分析 4. 解法二：Floyd 快慢指针法（…...