Vue3_part3—Vue指令和声明式渲染
Vue3 指令
什么是指令
Vue 指令（Directives）是 Vue.js 的一项核心功能，它们可以在 HTML
模板中以 v- 开头的特殊属性形式使用，用于将响应式数据绑定到 DOM
元素上或在 DOM 元素上进行一些操作。
Vue 指令是带有前缀 v- 的特殊 HTML 属性，它赋予 HTML
标签额外的功能。
指令本质上是对 DOM 操作的封装，让你可以通过声明式的方式控制 DOM。
指令的基本语法
1<element v-directive:argument.modifier="expression"></element>
指令名称：v-directive（如
v-if、v-for）
参数：argument（可选，如
v-bind:href 中的
href）参数在指令后以冒号指明。
修饰符：modifier（可选，如
v-on:click.stop 中的 stop）修饰符是以半角句号
....
Vue3 part2—Vue基础知识与组合式API
学Vue前的基础语法
插值表达式
插值表达式（Template Literal Interpolation）是 ES6
(ECMAScript 2015)
引入的特性，它允许你在字符串中直接嵌入变量、表达式或函数调用结果。
插值表达式有很多插值方法
传统的方法就是字符串拼接，使用 +
运算符将变量或表达式与字符串连接起来。
123const name = "Alice";const greeting = "Hello, " + name + "!";console.log(greeting); // 输出: Hello, Alice!
它兼容性极佳，适用于所有 JavaScript 环境，而且性能相对较好
模板字符串是 JavaScript ES6
引入的一种新特性，使用反引号（`）包裹字符串，并在
${}中放置要插入的内容。
1234567891011// 基本变量插值const name = "张三";const age = 25;//...
隙间画谈—清河门火车站
...
Vue3 part1—了解前端框架Vue及其构建工具Vite
了解前端框架
实际上，我在学习了很长一段时间的后端之后才接触到前端框架，所以说，这是一个比较尴尬的事情
后端的框架我们都比较熟悉，主要内容其实无非就是用于处理处理业务逻辑和数据持久化
后端框架是面向服务设计的，它更关注数据的正确性和安全性，倾向于实际业务的逻辑和数据
而且后端框架一般都会有很多的关于多线程并发处理的内容，因为这会提升性能
而 Vue
这种前端框架，它是处理用户交互和数据展示的，主要是用户与业务的交互
Vue
是面向组件设计的，这是前端框架设计模式的一种，而且它着重关注用户体验和界面流畅性
一般情况下，Vue 是单线程，异步处理的，因为 JavaScript
语言本身就是单线程的。这主要源于浏览器的设计
你想想，操作...
单调队列之滑动窗口最值
问题
单调队列是一种很典型的问题，它能用来高效地解决 “滑动窗口最大值”
问题的数据结构
给定一个长度为 n 的数组 nums 和一个大小为 k
的滑动窗口，窗口从数组左端向右滑动，每次滑动一格，求每个窗口内的最大（小）值。
那么这种问题大概率其实下意识会想到用堆
如果是求最大值，但是如果使用大根堆，每次插入 O
(logk)，但删除窗口左侧元素，也就是删除不在窗口内的堆顶的时候，需要 O
(n)，整体 O (nlogk)，仍不够高效。
P1886 滑动窗口
/【模板】单调队列 - 洛谷
P1886 滑动窗口
/【模板】单调队列
题目描述
有一个长为 n 的序列 a，以及一个大小为 k
的窗口。现在这个窗口从左边开始向右滑动，每次滑动一个单位，求出每次滑动后窗口中的最小值和最大值。
例如，对于序列 [1, 3, −1, −3, 5, 3, 6, 7] 以及 k = 3，有如下过程：
$$\def\arraystretch{1.2}
\begin{array}{|c|c|c|}\hline
\textsf{窗口位置} &...
动态规划—线性dp之编辑距离
问题
Levenshtein Distance，一般称为编辑距离（Edit Distance，Levenshtein
Distance只是编辑距离的其中一种）或者莱文斯坦距离，算法概念是俄罗斯科学家弗拉基米尔·莱文斯坦（Levenshtein
· Vladimir I）在1965年提出。此算法的概念很简单：Levenshtein
Distance指两个字串之间，由一个转换成另一个所需的最少编辑操作次数，允许的编辑操作包括：
将其中一个字符替换成另一个字符（Substitutions）。、
插入一个字符（Insertions）。
删除一个字符（Deletions）。
image-20251117195049889
问题分析
看上去就像是动态规划
那么考虑子问题，从 a[1...i] 到
b[1.....j]的编辑距离
那么我们就可以考虑这样一个状态变量
设 dp[i][j] 表示将字符串 a 的前
i 个字符（a[0..i-1]）转换为字符串
b 的前...
在IDEA中如何进行各种调试及相关调试的技巧
前言
本文如题目，基于 IDEA，基于 Java，本来想用 Dart
来着，寻思了一下还是用更多人擅长的来讲吧
调试是个很牛逼的东西，因为你不能保证你能看懂代码抛出的每一个异常是什么意思，代码的每次编译错误都是什么问题，服务抛出的各种问题你都能找到位置
所以说，调试在越复杂的项目里面越实用。
貌似，jetbrain 家的IDE 都可以沿用类似的这一套调试流程和方法
进行调试之前，我们需要了解什么
还是先说一下 IDEA
中如何进行调试，我确实没特意看过这个内容，全是我自己摸索出来的，也顺便总结一下
首先，调试的情况分为如下类别
本地调试：最常见的调试方式，针对当前开发环境中运行的 Java
程序（如本地启动的 Spring Boot 应用、普通 Javamain
方法等）。代码和程序均在本地机器运行，调试器直接连接本地进程。
远程调试：针对运行在远程服务器（或其他机器）上的 Java
程序进行调试，本地 IDEA
通过网络连接远程进程。代码在本地，程序在远程运行，通过调试端口建立通信。
测试调试：针对...
动态规划—线性dp之最长公共子串
问题
继续 LCS 的问题考虑（本来是一篇文章，我感觉拆开好点）
问题又出现变化了，现在如果，我们要求求最长公共子串，也就是在 LCS
的基础上，要求连续
最长公共字串（LCStr）就是两个序列中连续且相同的最长子序列（区别于
LCS 的 “不要求连续”）
序列 A："ABCBDAB"
序列 B："BDCAB"
对比维度
最长公共子序列（LCS）
最长公共字串（LCStr）
核心要求
元素相对顺序一致，不要求连续
元素连续且相对顺序一致
示例结果
"BCAB"（长度 4）
"AB" 或 "BD"（长度 2）
问题本质
找 “有序不连续” 的最长交集
找 “有序且连续” 的最长交集
那么问题就被定义为，给定两个字符串 S（长度 n）和 T（长度
m），找到它们之间长度最长的公共连续子串，输出其长度（若不存在则输出
0）。
image-20251116195531260
问题分析
根据 LCS 的基础，我们考虑动态规划
首先考虑状态定义
设 S 长度为...
动态规划之线性dp之最长公共子序列
问题
image-20251116192953141
问题分析
子序列是指从一个序列中删除部分元素（可以不删）后，剩余元素保持原有相对顺序形成的新序列（不要求连续）。
最长公共子序列，英文缩写为LCS（Longest Common
Subsequence）。其定义是，一个序列 S
，如果分别是两个或多个已知序列的子序列，且是所有符合此条件序列中最长的，则
S 称为已知序列的最长公共子序列。
LCS
问题是：给定两个序列（如字符串、数组），找出它们之间长度最长的公共子序列。
例如：
序列 a = "ABCBDAB"，序列 b = "BDCAB"
它们的 LCS 是 "BCAB" 或 "BDAB"，长度为
4。
LCS 的标准解法可以通过动态规划在相对高效的时间内解决
考虑这样的一个状态：
用 二维数组
f[i][j]，表示，序列a的前i个元素与序列b的前j个元素的最长公共子序列长度。
那么现在问题就变成了考察末尾元素 a[i]，b[j] 是否在公共的子序列中
根据 a[i] 和 b[j]...
JavaScript_part6—JQuery.md
什么是jQurey
简介
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的”写的少，做的多”的 JavaScript 库。
jQuery 库包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
使用 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery
函数。
可以通过下面的标记把 jQuery 添加到网页中：
123<head> <script type="text/javascript" src="jquery.js"></script></head>
共有两个版本的 jQuery
可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。
这两个版本都可从 jQuery.com
下载。
Google 和...
JavaScript part5—BOM常见对象及其属性和JS操作BOM
BOM常见对象及其使用JS操作
BOM（Browser Object Model，浏览器对象模型）是 JavaScript
操作浏览器功能的接口，它以 window 为核心
window是整个BOM树食物链的顶端，因此每一个新打开的窗口，都被认为是一个window对象。
image-20251116152026607
window 是 BOM 的顶层对象，代表整个浏览器窗口，所有 BOM
对象都是 window 的属性。
全局变量和全局函数会自动成为 window 的属性（例如
window.alert() 可简写为 alert()）。
window 可省略（如 window.location 可简写为
location）。
window.location：控制地址栏与页面跳转
location 对象管理当前页面的 URL 信息，可用于获取 URL
细节或跳转页面。
属性 / 方法
说明
href
获取或设置完整...
JavaScript part4—JS操作DOM及其DOM事件
什么是DOM和BOM
JavaScript的三大组成部分
image-20251116144529390
上面这张图，我们可以看到有四个元素：JavaScript，ECMAScript，DOM和BOM，那么它们四个之间有什么联系呢？
1JavaScript = ECMAscript + BOM + DOM
ECMAScript 是一种由 ECMA国际（前身为欧洲计算机制造商协会）通过
ECMA-262
标准化的脚本程序设计语言，它是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。
ECMAscript更像一个规定，规定了各个浏览器怎么样去执行JavaScript的语法，因为我们知道JavaScript是运行在浏览器上的脚本语言！有了规定，但是我们还缺少与页面中各个元素交互的方式，此时下面的DOM诞生了！
DOM
Document Object Model，文档对象模型
简单说，DOM 是浏览器将 HTML
文档解析后生成的树状结构对象，它将 HTML
中的每个标签、文本、属性等都转换成可被 JS 操作的 “对象”，让...
动态规划之线性dp之最长上升子序列
问题
这是经典的 LIS 问题
image-20251115195703334
最长上升子序列是指，从原序列中按顺序取出一些数字排在一起，这些数字是逐渐增大的。
分析
那么考虑动态规划，我们设计一个 dp[i]
数组，表示以数组第i个元素（a[i]）为结尾的最长上升子序列的长度。
为什么要 “以a[i]结尾”？因为 LIS
是严格递增的，后续元素要接在a[i]后面，必须满足比a[i]大，这样才能通过dp[i]推导后续状态。
从第一个数字开始推，所以说，dp[i] = 1
是关键初始化，因为每个元素本身可以单独构成一个长度为 1
的上升子序列，所以所有dp[i]的初始值都是 1。
那么我们需要遍历 i 之前的所有元素 j (从 0
到
i-1)，对于每个i，遍历它前面所有的元素j：
如果a[i] > a[j]（满足 “上升”
条件），说明a[i]可以接在以a[j]结尾的 LIS
后面，此时dp[i]可以更新为dp[j] + 1。
取所有满足条件的dp[j] + 1的最大值，就是dp[i]的最终值（即dp[i] =...
