更新时间

2025-01-20 10:15:03 +08:00
1 parent bc3addcd63
commit 79f7eec41d
@@ -1,4 +1,4 @@
---
+---
 layout: doc
 title: 如何在Vue3的Store中使用i18n
 date: 2022-06-27
@@ -6,6 +6,10 @@ tags:
  - 编程
  - 工作
  - 学习
+  - vue
+  - JavaScript
+  - i18n
+  - BUG
 head:
  - - meta
    - name: description
@@ -14,7 +18,7 @@ head:
    - name: keywords
      content: vue vue3 i18n js javascript
 editLink: false
-lastUpdated: true
+lastUpdated: 2025-01-20T10:08:00
 ---

 > 文章摘要
@@ -39,7 +43,7 @@ i18n 方法，而不是依赖 useI18n()。

 几乎都最新版本了

-![在这里插入图片描述](/posts/2022/06/img-1.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-1.png)

 ## 问题复现

@@ -60,31 +64,31 @@ const { t, d, n, locale } = useI18n()

 当在创建对应的i18n时，会先将对应的内容进行创建和导出：

-![在这里插入图片描述](/posts/2022/06/img-2.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-2.png)

 在这个文件中创建了i18n，并且对特定的配置项进行了指定，但是导出的这个i18n中有什么？

-![在这里插入图片描述](/posts/2022/06/img-3.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-3.png)

 在配置的文件中已经存在了要使用的方法，也就是导出的：`t`,`d`,`n`等，要使用的方法也在这里面

-![在这里插入图片描述](/posts/2022/06/img-4.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-4.png)

 在这个`global`中存在了对应的全局的方法，不需要通过i18n指定的方法进行引入执行，可以直接使用，所以这个就是要手动引入的内容

 ## 解决

-![在这里插入图片描述](/posts/2022/06/img-5.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-5.png)

 使用这种方法问题得到解决，不过在尝试过程中，这种两种方式使用的i18n也是有区别的

 在引入的过程中，因为方式不同，所以引入的方法其实也不是同一个

-![在这里插入图片描述](/posts/2022/06/img-6.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-6.png)

 不过在对应的注释中也能略微看出二者的区别

-![在这里插入图片描述](/posts/2022/06/img-7.png)
+![在这里插入图片描述](../../../public/posts/2022/06/img-7.png)

 使用方法引入的‘t’应当也有特有的内容，这里只进行列举，不继续深入探讨。

@@ -1,10 +1,13 @@
---
+---
 layout: doc
 title: JavaScript和Vue中实现表格(table)固定表头和首列
 date: 2022-08-26
 tags:
  - 编程
  - 学习
+  - Html
+  - JavaScript
+  - vue
 head:
  - - meta
    - name: description
@@ -13,8 +16,7 @@ head:
    - name: keywords
      content: vue vue3 js javascript
 editLink: false
-lastUpdated: true
-
+lastUpdated: 2025-01-20T10:09:00
 ---

 > 文章摘要
@@ -30,7 +32,7 @@ JavaScript、Vue、React、小程序等）。文章详细展示了实现这一

 实际效果展示：

-![在这里插入图片描述](/posts/2022/08/img-1.gif)
+![在这里插入图片描述](../../../public/posts/2022/08/img-1.gif)

 ## 思路概述

@@ -1,10 +1,11 @@
---
+---
 layout: doc
 title: Vue3中的ref为何要用.value进行值的调用？
 date: 2022-08-25
 tags:
  - 编程
  - 学习
+  - vue
 head:
  - - meta
    - name: description
@@ -13,8 +14,7 @@ head:
    - name: keywords
      content: vue vue3 js javascript
 editLink: false
-lastUpdated: true
-
+lastUpdated: 2025-01-20T10:09:00
 ---

 > 文章摘要
@@ -1,10 +1,11 @@
---
+---
 layout: doc
 title: Vue3新属性 — css中使用v-bind（v-bind in css）
 date: 2022-08-11
 tags:
  - 编程
  - 学习
+  - vue
 head:
  - - meta
    - name: description
@@ -13,8 +14,7 @@ head:
    - name: keywords
      content: vue vue3 js javascript v-bind
 editLink: false
-lastUpdated: true
-
+lastUpdated: 2025-01-20T10:09:00
 ---

 > 文章摘要
@@ -216,19 +216,19 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中

  首先是第一种，如果使用的话会直接报错，报错内容为：

- ![在这里插入图片描述](/posts/2022/08/img-1.png)
+ ![在这里插入图片描述](../../../public/posts/2022/08/img-1.png)

  因为`less`的直接报错，导致定义的变量压根就没有被编译出来，从而报错

  第二种和第三种错误一样：

-![在这里插入图片描述](/posts/2022/08/img-2.png)
+![在这里插入图片描述](../../../public/posts/2022/08/img-2.png)



  在这种使用方式中，变量可以正确承接，但是不能完成拼接的操作，导致只有变量而没有单位，并且可以看出最终都被翻译为`var(--变量名)`来执行，所以顺便也对`var()`进行了拼接测试

-![在这里插入图片描述](/posts/2022/08/img-3.png)
+![在这里插入图片描述](../../../public/posts/2022/08/img-3.png)



@@ -268,18 +268,18 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中

  结果也非常让不出意外的都不行，并且在第二种方式也是直接报错的，在寻找问题的过程中，发现了更加`amazing`的事情：

-![在这里插入图片描述](/posts/2022/08/img-4.png)
+![在这里插入图片描述](../../../public/posts/2022/08/img-4.png)


  这个变量压根就没定义，或者说没被识别到，所以重新模仿`Vue`直接定义行内样式，并且使用拼接尝试：

-![在这里插入图片描述](/posts/2022/08/img-5.png)
+![在这里插入图片描述](../../../public/posts/2022/08/img-5.png)



  这种直接的拼接方式直接将所有内容都进行了拼接，再换一种思路：使用`V-bind`这个V-bind指的是数据的而不是样式：

-![在这里插入图片描述](/posts/2022/08/img-6.png)
+![在这里插入图片描述](../../../public/posts/2022/08/img-6.png)



@@ -390,14 +390,14 @@ LESS：与 CSS 类似，使用变量和 v-bind() 绑定数据，但在 LESS 中

  `v-bind() in css`并没有进行劫持或者其他操作，他主要完成的任务是将`v-bind()`中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到

-  ![在这里插入图片描述](/posts/2022/08/img-7.png)
+  ![在这里插入图片描述](../../../public/posts/2022/08/img-7.png)


  所有的数据直接在自定义属性中进行，并且直接对应引用，自定义属性的内容的改变影响视图的效果，从而达到数据影响视图的效果，这个在使用中`less`,`css`中完全没有问题

  但是，在`scss`中，因为编译之后`名字无法进行匹配`从而造成样式的丢失

-  ![在这里插入图片描述](/posts/2022/08/img-8.png)
+  ![在这里插入图片描述](../../../public/posts/2022/08/img-8.png)


  可以看到，使用的名字和编译的名字并不匹配，从而出错，这个使用时需要注意
@@ -1,17 +1,17 @@
---
+---
 layout: doc
 title: 在JavaScript获取Promise的状态
 date: 2022-08-09
 tags:
  - 编程
  - 学习
+  - JavaScript
 head:
  - - meta
    - name: keywords
      content: js javascript
 editLink: false
-lastUpdated: true
-
+lastUpdated: 2025-01-20T10:08:00
 ---