✨ vue2中数据绑定和 模板语法

Vim/Vim相关命令.md

@@ -0,0 +1,173 @@
+# Vim相关命令
+
+## 基本移动命令
+
+| 命令     | 描述                             |
+| -------- | -------------------------------- |
+| `h`      | 向左移动                         |
+| `j`      | 向下移动                         |
+| `k`      | 向上移动                         |
+| `l`      | 向右移动                         |
+| `w`      | 移动到下一个单词开头             |
+| `W`      | 移动到下一个单词开头（忽略符号） |
+| `b`      | 移动到上一个单词开头             |
+| `B`      | 移动到上一个单词开头（忽略符号） |
+| `e`      | 移动到当前单词末尾               |
+| `E`      | 移动到当前单词末尾（忽略符号）   |
+| `0`      | 移动到行首                       |
+| `^`      | 移动到行首第一个非空白字符       |
+| `$`      | 移动到行尾                       |
+| `gg`     | 移动到文件开头                   |
+| `G`      | 移动到文件末尾                   |
+| `:[n]`   | 移动到第 n 行                    |
+| `Ctrl+f` | 向下翻页                         |
+| `Ctrl+b` | 向上翻页                         |
+| `H`      | 移动到屏幕顶部                   |
+| `M`      | 移动到屏幕中间                   |
+| `L`      | 移动到屏幕底部                   |
+
+---
+
+## 插入模式
+
+| 命令     | 描述                       |
+| -------- | -------------------------- |
+| `i`      | 在光标前插入               |
+| `a`      | 在光标后插入               |
+| `I`      | 在行首插入                 |
+| `A`      | 在行尾插入                 |
+| `o`      | 在当前行下方新建一行并插入 |
+| `O`      | 在当前行上方新建一行并插入 |
+| `R`      | 进入替换模式（覆盖字符）   |
+| `Ctrl+h` | 删除前一个字符（退格键）   |
+| `Ctrl+w` | 删除前一个单词             |
+| `Ctrl+u` | 删除到行首                 |
+
+---
+
+## 编辑命令
+
+| 命令     | 描述                 |
+| -------- | -------------------- |
+| `x`      | 删除当前字符         |
+| `X`      | 删除前一个字符       |
+| `dd`     | 删除当前行           |
+| `dw`     | 删除到下一个单词开头 |
+| `db`     | 删除到上一个单词开头 |
+| `d$`     | 删除到行尾           |
+| `d^`     | 删除到行首           |
+| `dG`     | 删除到文件末尾       |
+| `dgg`    | 删除到文件开头       |
+| `yy`     | 复制当前行           |
+| `yw`     | 复制到下一个单词开头 |
+| `y$`     | 复制到行尾           |
+| `p`      | 粘贴到光标后         |
+| `P`      | 粘贴到光标前         |
+| `u`      | 撤销                 |
+| `Ctrl+r` | 重做                 |
+| `.`      | 重复上一次修改       |
+| `J`      | 合并下一行到当前行   |
+| `>>`     | 向右缩进             |
+| `<<`     | 向左缩进             |
+| `==`     | 自动缩进当前行       |
+
+---
+
+## 搜索与替换
+
+| 命令             | 描述                     |
+| ---------------- | ------------------------ |
+| `/pattern`       | 向前搜索 pattern         |
+| `?pattern`       | 向后搜索 pattern         |
+| `n`              | 下一个匹配项             |
+| `N`              | 上一个匹配项             |
+| `:%s/old/new/g`  | 全局替换 old 为 new      |
+| `:%s/old/new/gc` | 全局替换，每次确认       |
+| `:s/old/new/g`   | 当前行替换               |
+| `*`              | 向前搜索当前光标下的单词 |
+| `#`              | 向后搜索当前光标下的单词 |
+| `:noh`           | 临时取消搜索高亮         |
+
+---
+
+## 可视模式（选择文本）
+
+| 命令             | 描述                           |
+| ---------------- | ------------------------------ |
+| `v`              | 进入字符可视模式（按字符选择） |
+| `V`              | 进入行可视模式（按行选择）     |
+| `Ctrl+v`         | 进入块可视模式（矩形选择）     |
+| `ggVG` 或 `ggvG` | **全选**整个文件               |
+| `o`              | 切换选择的光标端               |
+| `y`              | 复制选中内容                   |
+| `d`              | 删除（剪切）选中内容           |
+| `c`              | 修改（删除并进入插入模式）     |
+| `~`              | 切换选中内容的大小写           |
+
+---
+
+## 窗口管理
+
+| 命令          | 描述           |
+| ------------- | -------------- |
+| `:sp [file]`  | 水平分割窗口   |
+| `:vsp [file]` | 垂直分割窗口   |
+| `Ctrl+w h`    | 移动到左侧窗口 |
+| `Ctrl+w j`    | 移动到下方窗口 |
+| `Ctrl+w k`    | 移动到上方窗口 |
+| `Ctrl+w l`    | 移动到右侧窗口 |
+| `Ctrl+w w`    | 循环切换窗口   |
+| `Ctrl+w c`    | 关闭当前窗口   |
+| `Ctrl+w o`    | 只保留当前窗口 |
+| `Ctrl+w +`    | 增加窗口高度   |
+| `Ctrl+w -`    | 减少窗口高度   |
+| `Ctrl+w >`    | 增加窗口宽度   |
+| `Ctrl+w <`    | 减少窗口宽度   |
+| `Ctrl+w =`    | 均衡窗口尺寸   |
+
+---
+
+## 标签页
+
+| 命令             | 描述                  |
+| ---------------- | --------------------- |
+| `:tabnew [file]` | 新建标签页            |
+| `gt`             | 下一个标签页          |
+| `gT`             | 上一个标签页          |
+| `:tabclose`      | 关闭当前标签页        |
+| `:tabonly`       | 关闭其他标签页        |
+| `:tabmove [n]`   | 移动标签页到第 n 位置 |
+
+---
+
+## 文件操作
+
+| 命令           | 描述                       |
+| -------------- | -------------------------- |
+| `:e file`      | 打开文件                   |
+| `:w`           | 保存文件                   |
+| `:w file`      | 另存为 file                |
+| `:q`           | 退出                       |
+| `:q!`          | 强制退出不保存             |
+| `:wq`          | 保存并退出                 |
+| `:x`           | 保存并退出（仅当有修改时） |
+| `:saveas file` | 另存为 file                |
+| `:r file`      | 插入文件内容到当前位置     |
+| `:r !command`  | 插入命令输出到当前位置     |
+
+---
+
+## 其他实用命令
+
+| 命令              | 描述                                    |
+| ----------------- | --------------------------------------- |
+| `:set nu`         | 显示行号                                |
+| `:set nonu`       | 隐藏行号                                |
+| `:set hlsearch`   | 高亮搜索结果                            |
+| `:set nohlsearch` | 取消高亮搜索结果                        |
+| `:set paste`      | 进入粘贴模式（防止自动缩进）            |
+| `:set nopaste`    | 退出粘贴模式                            |
+| `:!command`       | 执行外部命令                            |
+| `:help`           | 打开帮助文档                            |
+| `Ctrl+g`          | 显示当前文件信息                        |
+| `:%!command`      | 用命令处理整个文件（如 `:%!sort` 排序） |

Vim/vim1.md

@@ -1,60 +0,0 @@
-## **1. 基础移动（Navigation）**
-- **字符移动**：
-  - `h` ← / `j` ↓ / `k` ↑ / `l` →  
-  - 方向键也能用，但 Vim 提倡用 `hjkl` 保持手不离键盘。
-- **单词移动**：
-  - `w` → 跳到下一个单词开头  
-  - `b` ← 跳到上一个单词开头  
-  - `e` → 跳到当前单词末尾
-- **行内跳转**：
-  - `0` 跳到行首，`^` 跳到第一个非空字符  
-  - `$` 跳到行尾  
-  - `f<char>` 向后搜索字符（如 `fa` 跳到下一个 `a`）
-- **屏幕移动**：
-  - `Ctrl + u` 上翻半屏，`Ctrl + d` 下翻半屏  
-  - `gg` 跳到文件开头，`G` 跳到文件末尾  
-  - `:<行号>` 跳转到指定行（如 `:42` 跳到第 42 行）
-
----
-
-## **2. 编辑文本（Editing）**
-- **插入模式**：
-  - `i` 在光标前插入  
-  - `a` 在光标后插入  
-  - `I` 在行首插入，`A` 在行尾插入  
-  - `o` 在下一行插入，`O` 在上一行插入
-- **删除**：
-  - `x` 删除当前字符  
-  - `dw` 删除一个单词  
-  - `dd` 删除整行  
-  - `D` 删除从光标到行尾
-- **复制/粘贴**：
-  - `yy` 复制当前行  
-  - `p` 粘贴到光标后，`P` 粘贴到光标前  
-  - `yiw` 复制当前单词
-- **撤销/重做**：
-  - `u` 撤销  
-  - `Ctrl + r` 重做
-
----
-
-## **3. 选择与可视化模式（Visual Mode）**
-- `v` 进入字符选择模式  
-- `V` 进入行选择模式  
-- `Ctrl + v` 进入块选择模式（适合多行编辑）  
-- 选中后可以用 `d`（删除）、`y`（复制）、`>`（缩进）等操作
-
----
-
-## **4. 搜索与替换（Search & Replace）**
-- `/` + 关键词 → 搜索（`n` 下一个，`N` 上一个）  
-- `:%s/old/new/g` → 全局替换（`g` 表示所有匹配）  
-- `*` 快速搜索当前光标下的单词
-
----
-
-## **5. 组合命令（Power Moves）**
-- `di"` → 删除引号内的内容  
-- `ciw` → 修改当前单词  
-- `dt<char>` → 删除直到某个字符（如 `dt)` 删除到 `)`）  
-- `.` → 重复上一次操作

Vim/vim2.md

@@ -1,109 +0,0 @@
-## 基本移动命令
-
-| 命令   | 描述                       |
-| ------ | -------------------------- |
-| `h`    | 向左移动                   |
-| `j`    | 向下移动                   |
-| `k`    | 向上移动                   |
-| `l`    | 向右移动                   |
-| `w`    | 移动到下一个单词开头       |
-| `b`    | 移动到上一个单词开头       |
-| `e`    | 移动到当前单词末尾         |
-| `0`    | 移动到行首                 |
-| `^`    | 移动到行首第一个非空白字符 |
-| `$`    | 移动到行尾                 |
-| `gg`   | 移动到文件开头             |
-| `G`    | 移动到文件末尾             |
-| `:[n]` | 移动到第 n 行              |
-
-## 插入模式
-
-| 命令 | 描述                       |
-| ---- | -------------------------- |
-| `i`  | 在光标前插入               |
-| `a`  | 在光标后插入               |
-| `I`  | 在行首插入                 |
-| `A`  | 在行尾插入                 |
-| `o`  | 在当前行下方新建一行并插入 |
-| `O`  | 在当前行上方新建一行并插入 |
-
-## 编辑命令
-
-| 命令     | 描述                 |
-| -------- | -------------------- |
-| `x`      | 删除当前字符         |
-| `dd`     | 删除当前行           |
-| `dw`     | 删除到下一个单词开头 |
-| `d$`     | 删除到行尾           |
-| `d^`     | 删除到行首           |
-| `yy`     | 复制当前行           |
-| `p`      | 粘贴                 |
-| `u`      | 撤销                 |
-| `Ctrl+r` | 重做                 |
-| `.`      | 重复上一次修改       |
-
-## 搜索与替换
-
-| 命令             | 描述                |
-| ---------------- | ------------------- |
-| `/pattern`       | 向前搜索 pattern    |
-| `?pattern`       | 向后搜索 pattern    |
-| `n`              | 下一个匹配项        |
-| `N`              | 上一个匹配项        |
-| `:%s/old/new/g`  | 全局替换 old 为 new |
-| `:%s/old/new/gc` | 全局替换，每次确认  |
-
-## 可视模式
-
-| 命令     | 描述             |
-| -------- | ---------------- |
-| `v`      | 进入字符可视模式 |
-| `V`      | 进入行可视模式   |
-| `Ctrl+v` | 进入块可视模式   |
-
-## 窗口管理
-
-| 命令          | 描述           |
-| ------------- | -------------- |
-| `:sp [file]`  | 水平分割窗口   |
-| `:vsp [file]` | 垂直分割窗口   |
-| `Ctrl+w h`    | 移动到左侧窗口 |
-| `Ctrl+w j`    | 移动到下方窗口 |
-| `Ctrl+w k`    | 移动到上方窗口 |
-| `Ctrl+w l`    | 移动到右侧窗口 |
-| `Ctrl+w c`    | 关闭当前窗口   |
-| `Ctrl+w o`    | 只保留当前窗口 |
-
-## 标签页
-
-| 命令             | 描述           |
-| ---------------- | -------------- |
-| `:tabnew [file]` | 新建标签页     |
-| `gt`             | 下一个标签页   |
-| `gT`             | 上一个标签页   |
-| `:tabclose`      | 关闭当前标签页 |
-
-## 文件操作
-
-| 命令      | 描述           |
-| --------- | -------------- |
-| `:e file` | 打开文件       |
-| `:w`      | 保存文件       |
-| `:w file` | 另存为 file    |
-| `:q`      | 退出           |
-| `:q!`     | 强制退出不保存 |
-| `:wq`     | 保存并退出     |
-| `:x`      | 保存并退出     |
-
-## 其他实用命令
-
-| 命令              | 描述                              |
-| ----------------- | --------------------------------- |
-| `*`               | 搜索当前光标下的单词              |
-| `#`               | 反向搜索当前光标下的单词          |
-| `:%!command`      | 将当前缓冲区内容通过 command 过滤 |
-| `:r!command`      | 将 command 的输出插入到当前位置   |
-| `:set nu`         | 显示行号                          |
-| `:set nonu`       | 隐藏行号                          |
-| `:set hlsearch`   | 高亮搜索结果                      |
-| `:set nohlsearch` | 取消高亮搜索结果                  |

cloud-demo/gateway/pom.xml

@@ -69,6 +69,5 @@
             <groupId>org.springframework.cloud</groupId>
             <artifactId>spring-cloud-starter-loadbalancer</artifactId>
         </dependency>
-
     </dependencies>
 </project>

cloud-demo/gateway/src/main/resources/application-route.yaml

@@ -49,4 +49,4 @@ spring:
                 param: user
                 value: bunny
           # filters:
-          # - RedirectTo=/api/order/?(?<segment>.*), /$\{segment}
+          # - RedirectTo=/api/order/?(?<segment>.*), /$\{segment}

cloud-demo/services/service-order/src/main/java/cn/bunny/service/feign/ProductFeignClient.java

@@ -7,7 +7,6 @@ import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 
 // Feign 客户端
-// @FeignClient(value = "service-product", path = "/api/product", fallback = ProductFeignClientFallback.class)
 @FeignClient(value = "gateway", path = "/api/product", fallback = ProductFeignClientFallback.class)
 public interface ProductFeignClient {
 

mq-demo/pom.xml

@@ -13,20 +13,7 @@
     <version>0.0.1-SNAPSHOT</version>
     <name>mq-demo</name>
     <description>mq-demo</description>
-    <url/>
+
-    <licenses>
-        <license/>
-    </licenses>
-    <developers>
-        <developer/>
-    </developers>
-    <scm>
-        <connection/>
-        <developerConnection/>
-        <tag/>
-        <url/>
-    </scm>
-    
     <properties>
         <java.version>17</java.version>
         <spring-modulith.version>1.3.5</spring-modulith.version>

mq-demo/src/main/java/cn/bunny/mq/mqdemo/mq/listener/MessageListenerOrder.java

@@ -3,26 +3,28 @@ package cn.bunny.mq.mqdemo.mq.listener;
 import com.rabbitmq.client.Channel;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.amqp.core.Message;
-import org.springframework.amqp.rabbit.annotation.RabbitListener;
+import org.springframework.amqp.rabbit.annotation.*;
 import org.springframework.stereotype.Component;
 
 import java.io.IOException;
 
+import static cn.bunny.mq.mqdemo.domain.RabbitMQMessageListenerConstants.*;
+
 @Component
 @Slf4j
 public class MessageListenerOrder {
 
-    // /* 测试这个，需要注释下main那个 */
+    /* 测试这个，需要注释下main那个 */
-    // @RabbitListener(bindings = @QueueBinding(
+    @RabbitListener(bindings = @QueueBinding(
-    //         exchange = @Exchange(value = EXCHANGE_DIRECT),
+            exchange = @Exchange(value = EXCHANGE_DIRECT),
-    //         value = @Queue(value = QUEUE_NAME, durable = "true"),
+            value = @Queue(value = QUEUE_NAME, durable = "true"),
-    //         key = ROUTING_KEY_DIRECT,
+            key = ROUTING_KEY_DIRECT,
-    //         arguments = @Argument(name = "alternate-exchange", value = ALTERNATE_EXCHANGE_BACKUP)
+            arguments = @Argument(name = "alternate-exchange", value = ALTERNATE_EXCHANGE_BACKUP)
-    // )
+    )
-    // )
+    )
-    // public void processMessage(String dataString, Message message, Channel channel) {
+    public void processMessage(String dataString, Message message, Channel channel) {
-    //     System.out.println("消费端接受消息：" + dataString);
+        System.out.println("消费端接受消息：" + dataString);
-    // }
+    }
 
     // /* 如果测试这个需要注释上面那个 */
     // @RabbitListener(queues = {QUEUE_NAME})

vue2-tutorials/import-script/1-模板语法.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="js/vue@2.7.16.js"></script>
+    <title>模板语法</title>
+</head>
+
+<body>
+    <div id="app">
+        <h1>插值语法</h1>
+        <h3>你好：{{name}}</h3>
+        <br />
+
+        <h1>指令语法</h1>
+        <a :href="url" target="_blank">v2.cn.vuejs.org</a>
+
+        <!-- v-bind 可以省略 -->
+        <a v-bind:href="url" target="_blank">v2.cn.vuejs.org</a>
+    </div>
+</body>
+<script>
+    new Vue({
+        el: "#app",
+        data: {
+            name: "Bunny",
+            url: "https://v2.cn.vuejs.org/"
+        }
+    })
+</script>
+
+</html>

vue2-tutorials/import-script/2-数据绑定.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="js/vue@2.7.16.js"></script>
+    <title>数据绑定</title>
+</head>
+
+<body>
+    <div id="app">
+        单项数据绑定：<input type="text" v-bind:value="name">
+        双向数据绑定：<input type="text" v-model="name">
+    </div>
+
+    <div id="root">
+        2秒后绑定到这个上
+        单项数据绑定：<input type="text" v-bind:value="name">
+        双向数据绑定：<input type="text" v-model="name">
+    </div>
+</body>
+<script>
+    // 只要vm有的内容都可以用
+    const v = new Vue({
+        // el: "#app",
+        // data: {
+        //     name: "数据绑定"
+        // },
+
+        // 不能用箭头函数
+        // data: function () {
+        //     return {
+        //         name: "数据绑定"
+        //     }
+        // }
+        data() {
+            return {
+                name: "数据绑定"
+            }
+        }
+    });
+
+    // 下面内容可以简写成 v-if形式
+    setTimeout(() => {
+        v.$mount("#app");
+        console.log("app");
+    }, 1000);
+
+    setTimeout(() => {
+        // 正确做法：销毁旧实例，创建新实例
+        v.$destroy();
+
+        const v2 = new Vue({
+            data: {
+                name: "新数据绑定"
+            }
+        });
+        v2.$mount("#root");
+        console.log("root");
+    }, 2000);
+</script>
+
+</html>