From 4662ac60e1898c05d8dddb16e83ea75030a21140 Mon Sep 17 00:00:00 2001
From: yumaojun03 <719118794@qq.com>
Date: Sun, 29 Dec 2024 18:08:30 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A5=E5=85=85vue=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 skills/web/vue-project/src/App.vue            | 15 ++++++++----
 .../vue-project/src/components/HelloWorld.vue |  4 +++-
 skills/web/vue-project/src/main.js            |  3 +++
 .../web/vue-project/src/views/AboutView.vue   | 24 +++++++++++++++++--
 skills/web/vue3/README.md                     |  5 ++--
 5 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/skills/web/vue-project/src/App.vue b/skills/web/vue-project/src/App.vue
index e864195..da27d18 100644
--- a/skills/web/vue-project/src/App.vue
+++ b/skills/web/vue-project/src/App.vue
@@ -8,16 +8,21 @@ import HelloWorld from './components/HelloWorld.vue'
     <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
 
     <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-
+      <HelloWorld msg="You did it, this is my arg!" />
+      <!-- <component></component> -->
+      
       <nav>
-        <RouterLink to="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
+          <RouterLink to="/">Home</RouterLink>
+          <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <RouterView />
+    <RouterView v-slot="{ Component }" >
+      <KeepAlive>
+        <component :is="Component" />
+      </KeepAlive>
+    </RouterView>
 </template>
 
 <style scoped>
diff --git a/skills/web/vue-project/src/components/HelloWorld.vue b/skills/web/vue-project/src/components/HelloWorld.vue
index d581c66..582cbc3 100644
--- a/skills/web/vue-project/src/components/HelloWorld.vue
+++ b/skills/web/vue-project/src/components/HelloWorld.vue
@@ -1,5 +1,6 @@
 <script setup>
-defineProps({
+// func XXXX(msg: string)
+const pros = defineProps({
   msg: {
     type: String,
     required: true,
@@ -7,6 +8,7 @@ defineProps({
 })
 
 
+
 </script>
 
 <template>
diff --git a/skills/web/vue-project/src/main.js b/skills/web/vue-project/src/main.js
index 5dcad83..e822e0f 100644
--- a/skills/web/vue-project/src/main.js
+++ b/skills/web/vue-project/src/main.js
@@ -5,10 +5,13 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+// import HelloWorld from './components/HelloWorld.vue'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+// app.component('HelloWorld', HelloWorld)
+
 
 app.mount('#app')
diff --git a/skills/web/vue-project/src/views/AboutView.vue b/skills/web/vue-project/src/views/AboutView.vue
index a8e7579..bc195b4 100644
--- a/skills/web/vue-project/src/views/AboutView.vue
+++ b/skills/web/vue-project/src/views/AboutView.vue
@@ -9,7 +9,7 @@
     <!-- person.name -> element Set attri: v-bind -->
     <!-- 为元素绑定动态属性 -->
     <!-- v-bind -> : -->
-    <span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age + 1 }}</span>
+    <span name="静态变量" :id="person.name">{{ person.name }}, {{ person.age }}</span>
     <hr>
     <button v-if="true" @click="buttonClickHandler">确定</button>
     <hr>
@@ -30,7 +30,7 @@
 
 <script setup>
 
-import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
+import { nextTick, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref, watch } from 'vue';
 
 // wrap 'test' --> {value: 'test'}
 // model ---> view
@@ -43,11 +43,31 @@ console.log(pageName.value)
 const inputData = ref('test input')
 console.log(inputData)
 
+//
+watch(inputData, (v, ov) => {
+  console.log(v, ov)
+})
+
 onBeforeMount(() => {
   console.log("onBeforeMount")
 })
 onMounted(() => {
   console.log("onMounted")
+  console.log(person.name, person.age)
+
+  // 立即修改变量的值
+  person.age = 28
+  // 这个效果，不会立即更新到 UI上面
+  // 立即从界面上获取 这个元素
+  // 当前获取的元素的值是多少？
+  // 18 ? 28
+  // 等这个 这次更新 同步到界面上后，在访问UI获取
+  // nextTick 等下 更新对联 执行后，才执行你的函数
+  nextTick(() => {
+    console.log(document.getElementById("张三").innerText)
+  })
+
+
   // console.log(getCurrentInstance())
 })
 
diff --git a/skills/web/vue3/README.md b/skills/web/vue3/README.md
index bb388f0..8f0b312 100644
--- a/skills/web/vue3/README.md
+++ b/skills/web/vue3/README.md
@@ -1,7 +1,8 @@
 # Vue3
 
-https://gitee.com/infraboard/go-course/blob/master/day20/vue-base.md#%E6%A8%A1%E6%9D%BF%E8%AF%AD%E6%B3%95
-
++ 基础原理: https://gitee.com/infraboard/go-course/blob/master/day20/vue3.md
++ 基础用法: https://gitee.com/infraboard/go-course/blob/master/day20/vue3-base.md
++ Vue组件: https://gitee.com/infraboard/go-course/blob/master/day20/vue3-componet.md
 
 如何切换国内源: https://gitee.com/infraboard/go-course/blob/master/extra/devcloud/setup.md