ErgouTree's Blog

使用组件 组件的创建 当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC) 单文件组件的基本结构如下 123456789101112131415161718192021222324252627282930<template> <div class="hello"> <h1>{{ msg }}</h1> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }, data() { return { count: 0 } }, methods: { increment() { ...

组件注册 一个 Vue 组件在使用前需要先被“注册”，这样 Vue 才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册。 vue 中组件的引用原则：先注册后使用。 image-20251128190935009 全局注册 被全局注册的组件，可以在整个应用的任何组件模板中直接使用，无需再次导入。 通用组件（如按钮、卡片、导航栏等），在多个地方频繁使用等组件一般会使用全局注册的形式，全局注册会增加初始加载体积，所以只在有必要的情况下才使用全局注册 注册方式需要在 Vue 应用实例创建时通过 app.component() 方法注册，示例代码： 1234567891011// main.ts 或 main.jsimport { createApp } from 'vue'import App from './App.vue'import WordCard from './components/WordCard.vue' //...

理解所谓的 组件 这个组件，我们可能会第一时间的想到是前端中的那些，小的那种交互式的组件，是那种 Web Components 但是，Vue 中它不止这样，我们可以把 Vue 中的组件理解为 Java 中的类 在Java中，你不会把所有代码都写在main方法里。你会创建User类、Order类、Product类。每个类都有自己的属性（字段）、行为（方法）和生命周期。 而在前端，写一个巨大的HTML文件是扫码的，要人命的。所以 Vue 建议你把页面拆分成一个个组件（比如NavBar、UserProfile、Footer）。 一个Vue组件（通常是一个.vue文件）把HTML结构（模板）、JavaScript逻辑（数据与行为）、CSS样式（外观）封装在一起。就像Java类把字段和方法封装在一起一样。 所以，Vue 中，组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。组件化开发是 Vue 的核心思想，它允许你将大型应用拆分成小的、独立的、可复用的部分，就像搭积木一样构建应用。 Vue 组件是可复用的...

问题 以最大连续和为例子说明 找出所有长度不超过 k 的连续子数组的最大和 给你一个长度为 n 的整数序列 {A1,A2,⋯,An}，要求从中找出一段连续的长度不超过 m 的子序列，使得这个序列的和最大。 输入格式 第一行为两个整数 n,m ； 第二行为 n 个用空格分开的整数序列，每个数的绝对值都小于 1000。 输出格式 仅一个整数，表示连续长度不超过 m 的最大子序列和。 输入输出样例 输入 #1 126 41 -3 5 1 -2 3 输出 #1 17 这道题是洛谷的 [U162981 最大连续和][https://www.luogu.com.cn/problem/U162981] 问题分析 上次我们说了滑动窗口的最大值最小值问题 那么这个问题就是它的进阶 接触过最大和和最小和的大伙肯定都能有一个直觉，就是能不能使用前缀和 很明显这道题是可以使用前缀和的 所以我们可以结合前缀和和单调队列来解决 计算前缀和数组 preSum，其中 preSum[i] = nums[0] + nums[1] + ... +...

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）修饰符是以半角句号 ....

学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;//...

...

了解前端框架 实际上，我在学习了很长一段时间的后端之后才接触到前端框架，所以说，这是一个比较尴尬的事情 后端的框架我们都比较熟悉，主要内容其实无非就是用于处理处理业务逻辑和数据持久化 后端框架是面向服务设计的，它更关注数据的正确性和安全性，倾向于实际业务的逻辑和数据 而且后端框架一般都会有很多的关于多线程并发处理的内容，因为这会提升性能 而 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{窗口位置} &...

问题 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，基于 Java，本来想用 Dart 来着，寻思了一下还是用更多人擅长的来讲吧 调试是个很牛逼的东西，因为你不能保证你能看懂代码抛出的每一个异常是什么意思，代码的每次编译错误都是什么问题，服务抛出的各种问题你都能找到位置 所以说，调试在越复杂的项目里面越实用。 貌似，jetbrain 家的IDE 都可以沿用类似的这一套调试流程和方法 进行调试之前，我们需要了解什么 还是先说一下 IDEA 中如何进行调试，我确实没特意看过这个内容，全是我自己摸索出来的，也顺便总结一下 首先，调试的情况分为如下类别 本地调试：最常见的调试方式，针对当前开发环境中运行的 Java 程序（如本地启动的 Spring Boot 应用、普通 Javamain 方法等）。代码和程序均在本地机器运行，调试器直接连接本地进程。 远程调试：针对运行在远程服务器（或其他机器）上的 Java 程序进行调试，本地 IDEA 通过网络连接远程进程。代码在本地，程序在远程运行，通过调试端口建立通信。 测试调试：针对...

问题 继续 LCS 的问题考虑（本来是一篇文章，我感觉拆开好点） 问题又出现变化了，现在如果，我们要求求最长公共子串，也就是在 LCS 的基础上，要求连续 最长公共字串（LCStr）就是两个序列中连续且相同的最长子序列（区别于 LCS 的 “不要求连续”） 序列 A："ABCBDAB" 序列 B："BDCAB" 对比维度 最长公共子序列（LCS） 最长公共字串（LCStr） 核心要求 元素相对顺序一致，不要求连续 元素连续且相对顺序一致 示例结果 "BCAB"（长度 4） "AB" 或 "BD"（长度 2） 问题本质 找 “有序不连续” 的最长交集 找 “有序且连续” 的最长交集 那么问题就被定义为，给定两个字符串 S（长度 n）和 T（长度 m），找到它们之间长度最长的公共连续子串，输出其长度（若不存在则输出 0）。 image-20251116195531260 问题分析 根据 LCS 的基础，我们考虑动态规划 首先考虑状态定义 设 S 长度为...

问题 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]...