DLUT-TIC · Emisaber · Sep 16, 2024 · Sep 16, 2024
diff --git a/... 学习笔记/Vue学习笔记（一）：模版语法、条件渲染、列表渲染、key值管理.md → ...ntEnd/Vue学习笔记（一）：模版语法、条件渲染、列表渲染、key值管理.md b/... 学习笔记/Vue学习笔记（一）：模版语法、条件渲染、列表渲染、key值管理.md → ...ntEnd/Vue学习笔记（一）：模版语法、条件渲染、列表渲染、key值管理.md
@@ -76,7 +76,7 @@ Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/688e7b6e19362ec0a89b1e8283fee227.png)
+![135aw](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/135aw.png)
 
 我们可以看到，前者只是做了单纯的文本替换，后者则是将我们想要的链接成功渲染出来（渲染方式为在p标签里嵌套一个a标签）。
 
@@ -102,7 +102,7 @@ Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/058ad1e487ae154b573a3545313fefa0.png)
+![yncut](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/yncut.png)
 
  我们可以看到，在 HTML 中，`class`和`id`都被成功赋值，`title`由于被赋予的值为`null`而被移除。
 
@@ -183,7 +183,7 @@ Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/365223ab25db3d457e0bd3e7438665f7.png)
+![pzan8](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/pzan8.png)
 
 有些同学可能会发现，`v-if`与`v-show`的功能似乎是一样的，那么我们又为什么要引入`v-show`指令呢？或者说两者有什么区别呢？
 
@@ -225,7 +225,7 @@ Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/db52c75254542a9c62c41bd5491bdeed.png)
+![ft6jo](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/ft6jo.png)
 
 `v-for`也支持使用可选的参数`index`，`key`，`value`等（`value`可以替换为`item`）。
 

diff --git a/...Vue学习笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用.md → ...Vue学习笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用.md b/...Vue学习笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用.md → ...Vue学习笔记（三）：计算属性、类与样式绑定、表单输入绑定、侦听器、模版引用.md
diff --git a/...e 学习笔记/Vue学习笔记（二）：事件处理、事件传参、修饰符、数组变化侦测.md → ...ontEnd/Vue学习笔记（二）：事件处理、事件传参、修饰符、数组变化侦测.md b/...e 学习笔记/Vue学习笔记（二）：事件处理、事件传参、修饰符、数组变化侦测.md → ...ontEnd/Vue学习笔记（二）：事件处理、事件传参、修饰符、数组变化侦测.md
@@ -323,7 +323,7 @@ Vue 能够侦听响应式数组的变更方法，并在他们被调用时触发
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/760d538b4d7aee93f7d5e5696e675861.png)
+![4463j](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/4463j.png)
 
 
 可以看到，当我们点击按钮时，`names`数组被添加了一个元素，而 UI 界面也发生了变化，将新加入的元素渲染了出来。
@@ -340,9 +340,9 @@ Vue 能够侦听响应式数组的变更方法，并在他们被调用时触发
         console.log(this.names)
       }
 ```
-![img](https://i-blog.csdnimg.cn/blog_migrate/f31ac612660e5b7ef46af5e6d923eb3c.png)
+![arq6t](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/arq6t.png)
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/c21aa58ead6a113722125e73e2cf132c.png)
+![oei2g](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/oei2g.png)
 
 我们可以看到按下按钮后，我们得到了一个新的数组，而原数组并没有发生变化，UI 也没有更新。
 

diff --git a/...frontEnd/Vue 学习笔记/Vue学习笔记（五）：深入了解组件（下）.md → blogs/frontEnd/Vue学习笔记（五）：深入了解组件（下）.md b/...frontEnd/Vue 学习笔记/Vue学习笔记（五）：深入了解组件（下）.md → blogs/frontEnd/Vue学习笔记（五）：深入了解组件（下）.md
@@ -122,7 +122,7 @@ tags:
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/4947fd680a2e0d35bcc9d2826db448b6.png)
+![hx9qd](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/hx9qd.png)
 
 
 这里我们实现的功能是在 Search 组件中输入数据然后在 Show 组件中将其实时显示出来。下面我们对整个过程详细解释：
@@ -272,7 +272,7 @@ tags:
 
 这里我们将原本的`<Child/>`单标签修改为双标签，在里面写下我们需要传递的 HTML 片段。然后我们就可以在 Child 以`<slot></slot>`的方式使用该片段。这里的`<slot>`元素是一个插槽出口，标示了父元素提供的插槽内容将会在哪里被渲染，我们可以自行为其选定位置，也可以多次使用。下面这张来自官网的图片也能够帮我们更加具体的了解插槽的使用原理：
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/fac938cd2c14e6eb2520f411fdf70f20.png)
+![p5rip](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/p5rip.png)
 
 #### 2.渲染作用域
 

diff --git a/...学习笔记/Vue学习笔记（六）：生命周期钩子、路由、Element Plus.md → ...tEnd/Vue学习笔记（六）：生命周期钩子、路由、Element Plus.md b/...学习笔记/Vue学习笔记（六）：生命周期钩子、路由、Element Plus.md → ...tEnd/Vue学习笔记（六）：生命周期钩子、路由、Element Plus.md
@@ -73,7 +73,7 @@ tags:
 - 适合用于完全清理资源或进行一些统计、日志记录等操作。
 - 下面这张图可以帮助我们更好地了解一个 Vue 组件所经历生命周期：
 
-![img](https://i-blog.csdnimg.cn/direct/a7e6a545f30444ceb99878a962d5c735.png)
+![a9btf](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/a9btf.png)
 
 #### 2.钩子函数
 
@@ -105,7 +105,7 @@ export default {
 </script>
 ```
 
-![img](https://i-blog.csdnimg.cn/direct/be7aa0330afa4b718ce3c3e812164dca.png)
+![pk1ue](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/pk1ue.png)
 
 
 可以看到网页的标题成功修改，同时控制台也打印了相关信息。
@@ -252,11 +252,11 @@ mounted() {
 
 ##### （7）实现效果
 
-![img](https://i-blog.csdnimg.cn/direct/2d34a55ffdee402fa392476f0553a486.png)
+![qve3t](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/qve3t.png)
 
-![img](https://i-blog.csdnimg.cn/direct/396a734353cc4f29a1dbdf1be8cf6d25.png)
+![766ah](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/766ah.png)
 
-![img](https://i-blog.csdnimg.cn/direct/8b81b6ed2f32436192879faa85fe01cb.png)
+![gow9b](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/gow9b.png)
 
 可以看到，当我们点击不同的链接时，会改变 URL 的 hash 部分，从而触发 Vue.js 应用中对应的组件显示。
 

diff --git a/...frontEnd/Vue 学习笔记/Vue学习笔记（四）：深入了解组件（上）.md → blogs/frontEnd/Vue学习笔记（四）：深入了解组件（上）.md b/...frontEnd/Vue 学习笔记/Vue学习笔记（四）：深入了解组件（上）.md → blogs/frontEnd/Vue学习笔记（四）：深入了解组件（上）.md
@@ -81,7 +81,7 @@ tags:
 
 在实际应用中，组件常常被我们组织成层层嵌套的树状结构：
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/f834aed42551ad7c2ca062e7d43dfe0b.png)
+![amcsz](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/amcsz.png)
 
 上方这张图来自于官方文档，就让我们以这张图所提供的嵌套方式为例，进行页面创建：
 
@@ -218,7 +218,7 @@ tags:
 
 这里我们单独建立了一个 pages 网页用于存储各个组件，读者可根据实际情况自行调整文件路径。最后我们就能得到如下的网页了，怎么样，是不是和官方文档的图片很像呢？记得要仔细观察各个组件之间的嵌套逻辑以及嵌套实现方式哦！
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/e9c21049f7f53ce7f710bfaef6ace455.png)
+![68tuu](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/68tuu.png)
 
 ### 三、组件注册方式
 
@@ -403,7 +403,7 @@ Vue 组件可以更加细致地声明对传入的`props`的校验要求：
 
  上面这段代码的含义就是要求接受到的`test`的数据类型为`Number`（注意此处的 N 要大写，否则会显示`number`未定义），如果不是`Number`类型，控制台就会出现警告。 
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/b15105112fc24871fe0c6ddadf6d4254.png)
+![4oqku](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/4oqku.png)
 
  同样的`Prop`还能校验`String`，`Array`，`Object`等数据类型，此外还能兼容多个数据类型，例如：
 
@@ -460,4 +460,4 @@ default() {
     }
 ```
 
-![img](https://i-blog.csdnimg.cn/blog_migrate/cc9c3b3227cc1ed676e373d7666db17e.png)
+![xyz5o](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/xyz5o.png)
diff --git a/blogs/frontEnd/Vue 学习笔记/Vue环境配置（Windows）.md → blogs/frontEnd/Vue环境配置（Windows）.md b/blogs/frontEnd/Vue 学习笔记/Vue环境配置（Windows）.md → blogs/frontEnd/Vue环境配置（Windows）.md
@@ -17,33 +17,33 @@ tags:
 
  我们可以在终端（win+r，然后输入cmd打开终端）中输入`node -v`来查询电脑上是否已经安装node.js以及版本号。如下图显示，我的电脑上目前已经安装了node.js，且版本号为20.12.0。
 
-![img](https://i-blog.csdnimg.cn/direct/bb205df1f7b446c6beeef04150da09cc.png)
+![930ke](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/930ke.png)
 
 node.js的下载地址为：[Node.js — 在任何地方运行 JavaScript](https://nodejs.org/zh-cn)
 
 下载完成后打开刚刚下载的文件：
 
-![img](https://i-blog.csdnimg.cn/direct/3a2dc700e6c644ec99cf89459334c941.png)
+![v2ni9](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/v2ni9.png)
 
 选择安装路径：
 
-![img](https://i-blog.csdnimg.cn/direct/d895540949194c2baf2a6cdf9015b8d8.png)
+![7r85x](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/7r85x.png)
 
 选择我们需要的安装模式（注意此处要手动修改）：
 
-![img](https://i-blog.csdnimg.cn/direct/be968c5817f34a59a0e11e6ca046f775.png)
+![j2yc2](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/j2yc2.png)
 
 手动勾选此处的自动安装必要工具项（用于安装一些额外的开发工具和依赖）：
 
-![img](https://i-blog.csdnimg.cn/direct/1c78ca5ed4a44cb2b65e2d94201742c8.png)
+![qd9nz](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/qd9nz.png)
 
 选择安装：
 
-![img](https://i-blog.csdnimg.cn/direct/b93c4b74632e4d27947c8eea7226bd2b.png)
+![bl154](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/bl154.png)
 
 安装完成：
 
-![img](https://i-blog.csdnimg.cn/direct/f9921be5422947f0abc800a2d95b79e4.png)
+![cmy1z](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/cmy1z.png)
 
  然后我们可以使用前面提到的的方式，在终端中输入`node -v`来检查node.js是否成功安装。
 
@@ -55,13 +55,13 @@ node.js的下载地址为：[Node.js — 在任何地方运行 JavaScript](https
 
 打开电脑终端，输入指令`npm install -g cnpm --registry=https://registry.npmmirror.com`。下载完成后输入`cnpm -v`进行检查。
 
-![img](https://i-blog.csdnimg.cn/direct/5b38535fbd3f4e19b7d7c8ed66c22fc4.png)
+![e04cr](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/e04cr.png)
 
 注：cnpm是由淘宝NPM镜像提供的一个npm的镜像服务客户端，用于在中国大陆地区加速npm包的安装，因为直接使用npm在国内有时候会比较慢。cnpm和npm命令的用法几乎完全相同，所以我们可以无缝切换使用。
 
 然后我们就可以输入`cnpm init vue@latest`来创建一个vue项目。它使用了Vue团队推荐的最新项目模板，提供了一种无需全局安装Vue CLI的方式来创建Vue项目，更加简单快捷。当然，你可以先选择好该项目的路径。
 
-![img](https://i-blog.csdnimg.cn/direct/f5f8a203313c46bb9f4f93ed0ddf146f.png)
+![dg5he](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/dg5he.png)
 
 初次创建时，会询问我们是否下载对应的依赖项，我们输入y后回车即可。
 
@@ -75,10 +75,10 @@ node.js的下载地址为：[Node.js — 在任何地方运行 JavaScript](https
 
 `npm run dev`      启动项目的开发服务器
 
-![img](https://i-blog.csdnimg.cn/direct/d12e0cd7d8d543308417a47a0a440756.png)
+![mi79q](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/mi79q.png)
 
 上图显示项目启动成功，运行在`http:// localhost:5173`。我们将网址复制，在浏览器中打开。
 
-![img](https://i-blog.csdnimg.cn/direct/d157c84552fe44038a18b9c3fba76a63.png)
+![lh6pn](https://raw.githubusercontent.com/Emisaber/pic_obsidian/main/lh6pn.png)
 
 现在，你就成功创建了一个你自己的Vue项目模板， 你可以按照自己的想法对各个模块进行修改。