From 84089d68d86e083c8e576f01d90580eabe82266e Mon Sep 17 00:00:00 2001
From: juwenzhang <3137536916@qq.com>
Date: Tue, 31 Dec 2024 23:18:04 +0800
Subject: [PATCH] feat: add new file

---
 seniorSyntax/README.md                   | 82 ++++++++++++++++++++++++
 src/directives/index.js                  |  9 +++
 src/directives/modules/focus.js          |  7 ++
 src/directives/modules/formatTime.js     | 19 ++++++
 src/directives/modules/unit.js           | 10 +++
 src/main.js                              |  3 +
 src/views/Home/Home.vue                  | 27 ++++++++
 src/views/Home/components/HomeNavBar.vue |  2 +-
 8 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 seniorSyntax/README.md
 create mode 100644 src/directives/index.js
 create mode 100644 src/directives/modules/focus.js
 create mode 100644 src/directives/modules/formatTime.js
 create mode 100644 src/directives/modules/unit.js

diff --git a/seniorSyntax/README.md b/seniorSyntax/README.md
new file mode 100644
index 0000000..ef4cacd
--- /dev/null
+++ b/seniorSyntax/README.md
@@ -0,0 +1,82 @@
+# vue 高阶语法
+
+## vue 自定义指令
+* 在我们的学习 vue 之前，接触到了很多的关于内置的一些指令，比如说含有:
+  * v-show | v-if | v-for | v-bind | v-on 等等类似的指令
+  * 但是实际上的话我们的 vue 中我们是可以实现的是自定义一些指令的
+  * 通过我们的自定义指令实现我们的操作原生的 DOM ，实现底层开发
+* 自定义指令的类型含有
+  * **自定义局部指令**
+    * 就是在我们的组件中通过 directives 选项来实现的，
+    * 这个时候我们的自定义指令只能在该组件中进行局部使用
+  * **自定义全局指令**
+    * 就是在我们的 app 中通过 directive 方法来定义的指令
+    * 这个时候我们的该指令可以实现的是我们的在任意的组件中可以被使用
+* 开始实现自定义我们的 **v-focus** 自动获取焦点指令
+
+```javascript
+<!-- 开始实现局部的自定义指令 -->
+// option api 的书写
+export default {
+    directives: {
+      focus: {
+        // 生命周期函数
+        mounted(el) {  // 表示的是我们的自定义指令运用的元素被挂载后的生命周期函数
+          el?.focus()
+        }
+      }
+    },
+  
+    setup(props, { emit }) {
+      // 在组合式 api 中的自定义指令的话需要进行的是直接命名我们的指令即可
+      // 指令命名格式 vFocus v后面的字母必须大写
+      const vFocus = {
+        mounted(el) {
+          el?.focus()
+        }
+      }
+      return {
+        vFocus
+      }
+    }
+}
+```
+```javascript
+// 开始实现全局的自定义我们的指令，还是在我们的 app.vue 中进行的操作
+// 内部传入的是我们的对象，所以说在开发中我们是可以实现的是在目录结构中单独的分出来一个目录 directive 存放一些指令的
+app.directive("focus", {
+  mounted(el) {
+    el?.focus()
+  }
+})
+```
+
+```javascript
+export default function directiveFocus(app) {
+    app.directive("focus", {
+        mounted(el) {
+            el?.focus()
+        }
+    })
+}
+```
+
+### 自定义指令的生命周期函数
+* **created** 自定义指令绑定使用的元素被创建后执行的代码逻辑
+* **beforeMount** 就是表示的是即将进行挂载我们的元素后的操作
+* **mounted** 绑定的元素被挂载后的触发的代码逻辑
+* **beforeUpdate** 
+* **updated**
+* **beforeUnMounted**
+* **unmounted**
+
+### 指令的参数和修饰符
+* **v-model:title.lazy="message"**
+  * title 就是参数
+  * .lazy 就是修饰符
+  * message 就是表示的是值
+  * 这些也是可以直接进行自定义的呐
+* 我们的自定义指令的时候，使用的生命周期函数
+  * 含有两个参数的 
+    * 第一个参数就是表示的是**绑定自定义指令的元素**
+    * 第二个参数就是**自定义指令后面参数或者修饰符**
\ No newline at end of file
diff --git a/src/directives/index.js b/src/directives/index.js
new file mode 100644
index 0000000..5fb21d7
--- /dev/null
+++ b/src/directives/index.js
@@ -0,0 +1,9 @@
+import directiveFocus from "./modules/focus.js"
+import directiveUnit from "./modules/unit.js"
+import directiveFormatTime from "./modules/formatTime.js"
+
+export default function useDirective(app) {
+    directiveFocus(app)
+    directiveUnit(app)
+    directiveFormatTime(app)
+}
\ No newline at end of file
diff --git a/src/directives/modules/focus.js b/src/directives/modules/focus.js
new file mode 100644
index 0000000..6e8c9ee
--- /dev/null
+++ b/src/directives/modules/focus.js
@@ -0,0 +1,7 @@
+export default function directiveFocus(app) {
+    app.directive("focus", {
+        mounted(el) {
+            el?.focus()
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/directives/modules/formatTime.js b/src/directives/modules/formatTime.js
new file mode 100644
index 0000000..6699d20
--- /dev/null
+++ b/src/directives/modules/formatTime.js
@@ -0,0 +1,19 @@
+import dayjs from "dayjs";
+
+export default function directiveFormatTime(app) {
+    app.directive("format-time", {
+        mounted(el, binding) {
+            let timeContent = el.textContent
+            if (timeContent.length === 10) timeContent = timeContent * 1000
+
+            // 开始实现获取我们的 value
+            let value = binding.value
+            if (!value) {
+                value = 'YYYY-MM-DD'
+            }
+
+            // 开始实现回显
+            el.textContent = dayjs(timeContent).format(value)
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/directives/modules/unit.js b/src/directives/modules/unit.js
new file mode 100644
index 0000000..5b930c9
--- /dev/null
+++ b/src/directives/modules/unit.js
@@ -0,0 +1,10 @@
+export default function directiveUnit(app) {
+    app.directive('unit', {
+        mounted(el, binding) {
+            const defaultText = el.textContent
+            let unit = binding.value
+            if (!unit) unit = "￥"
+            el.textContent = unit + defaultText
+        }
+    })
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 659b6ac..1219fdc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,10 +4,13 @@ import "./normalize..css"
 import "./assets/css/index.css"
 import router from "./router/index.js"
 import pinia from "./stores/index.js"
+import useDirective from "./directives/index.js";
 
 const app = createApp(App)  // 创建根组件
 
 app.use(router)  // 使用路由
 app.use(pinia)  // 使用状态管理库
 
+useDirective(app)
+
 app.mount('#app')
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index f11ebc0..4f157e2 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -24,6 +24,33 @@
 <!--  </loading>-->
 </template>
 
+<!-- 开始实现自定义指令 -->
+<script>
+  // option api 的书写
+  export default {
+    directives: {
+      focus: {
+        // 生命周期函数
+        mounted(el) {  // 表示的是我们的自定义指令运用的元素被挂载后的生命周期函数
+          el?.focus()
+        }
+      }
+    },
+    setup(props, { emit }) {
+      // 在组合式 api 中的自定义指令的话需要进行的是直接命名我们的指令即可
+      // 指令命名格式 vFocus v后面的字母必须大写
+      const vFocus = {
+        mounted(el) {
+          el?.focus()
+        }
+      }
+      return {
+        vFocus
+      }
+    }
+  }
+</script>
+
 <script setup name="Home">
   import HomeNavBar from "./components/HomeNavBar.vue"
   import HomeBanner from "./components/HomeBanner.vue"
diff --git a/src/views/Home/components/HomeNavBar.vue b/src/views/Home/components/HomeNavBar.vue
index 5092b2e..64078b7 100644
--- a/src/views/Home/components/HomeNavBar.vue
+++ b/src/views/Home/components/HomeNavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="navbar">
-    <div class="title">JUWENZHANG</div>
+    <div class="title" v-unit>JUWENZHANG</div>
   </div>
 </template>