vue 原理

skills/web/vue-project/src/components/HelloWorld.vue

@@ -5,6 +5,8 @@ defineProps({
     required: true,
   },
 })
+
+
 </script>
 
 <template>
@@ -36,6 +38,7 @@ h3 {
 }
 
 @media (min-width: 1024px) {
+
   .greetings h1,
   .greetings h3 {
     text-align: left;

skills/web/vue-project/src/views/AboutView.vue

@@ -1,15 +1,65 @@
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h1>This is an about {{ pageName }} page</h1>
+    <hr>
+    <input v-model="inputData" type="text">
+    <hr>
+    {{ person.name }}, {{ person.age }}
   </div>
 </template>
 
+<script setup>
+
+import { onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, reactive, ref } from 'vue';
+
+// wrap 'test' --> {value: 'test'}
+// model ---> view
+const pageName = ref('test2')
+console.log(pageName.value)
+
+// view ---> model
+// form 表单
+// data ---> api
+const inputData = ref('test input')
+console.log(inputData)
+
+onBeforeMount(() => {
+  console.log("onBeforeMount")
+})
+onMounted(() => {
+  console.log("onMounted")
+  // console.log(getCurrentInstance())
+})
+
+onBeforeUpdate(() => {
+  console.log("onBeforeUpdate")
+})
+onUpdated(() => {
+  console.log("onUpdated")
+})
+
+onBeforeUnmount(() => {
+  console.log("onBeforeUnmount")
+})
+onUnmounted(() => {
+  console.log("onUnmounted")
+})
+
+// ....
+const person = reactive({
+  name: "张三",
+  age: 18
+})
+
+
+</script>
+
 <style>
-@media (min-width: 1024px) {
+/* @media (min-width: 1024px) {
   .about {
     min-height: 100vh;
     display: flex;
     align-items: center;
   }
-}
+} */
 </style>