补充vue组件

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="/">Home</RouterLink>
-        <RouterLink to="/about">About</RouterLink>
+          <RouterLink to="/about">About</RouterLink>
       </nav>
     </div>
   </header>
 
-  <RouterView />
+    <RouterView v-slot="{ Component }" >
+      <KeepAlive>
+        <component :is="Component" />
+      </KeepAlive>
+    </RouterView>
 </template>
 
 <style scoped>

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>

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')

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())
 })
 

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