vue3

vue3/my_project/src/App.vue

@@ -1,58 +1,26 @@
 <template>
-   <div id="app">
-    <!-- html -->
-    <Demo9></Demo9>
-    <!-- <h2 ref="address">哈尔滨</h2>
-    <button @click="getMain">获取</button>
-    <Demo8 ref="haha"></Demo8> -->
-    <!-- <Demo7></Demo7> -->
-    <!-- <Demo6></Demo6> -->
-    <!-- <Demo5></Demo5> -->
-    <!-- <Demo4></Demo4> -->
-    <!-- <Demo3></Demo3> -->
-    <!-- <Demo2></Demo2> -->
-    <!-- <Demo1></Demo1> -->
-    <!-- <Demo></Demo> -->
-   </div>
+  <div class="app">
+    <Demo11 v-if="isShow"></Demo11>
+    <!-- <Demo10 :list1="list"></Demo10> -->
+  </div>
 </template>
 
-<script>
-import Demo9 from './components/Demo9.vue'
-import Demo8 from './components/Demo8.vue'
-import Demo7 from './components/Demo7.vue'
-import Demo6 from './components/Demo6.vue'
-import Demo5 from './components/Demo5.vue'
-import Demo4 from './components/Demo4.vue'
-import Demo3 from './components/Demo3.vue'
-import Demo2 from './components/Demo2.vue'
-import Demo1 from './components/Demo1.vue'
-// import Demo from './components/Demo.vue'
-export default {
-    // js或ts
-    components: {   
-        // Demo,
-        // Demo1,
-        // Demo2,
-        // Demo3,
-        // Demo4,
-        // Demo5,
-        // Demo6,
-        // Demo7,
-        Demo8,
-        Demo9
-    },
-}
-</script>
-<script setup>
-    import {ref} from 'vue';
-    let address = ref();
-    let haha = ref();
-    function getMain() {
-        // console.log(address.value,'app页')
-        console.log(haha.value,'app')
-    }
+<script setup lang="ts" name="App">
+import Demo10 from './components/Demo10.vue';
+import Demo11 from './components/Demo11.vue';
+import {PersonList} from '@/types/Demo10.ts'
+import {reactive,ref,onMounted} from 'vue'
+let list = reactive<PersonList>([
+    {id:1,name:"孙悟空",age:10,hobby:"吃饭"},
+    {id:2,name:"猪八戒",age:20,hobby:"睡觉"},
+    {id:3,name:"图图",age:3,hobby:"打豆豆"}
+])
+let isShow = ref(true);
+onMounted(()=>{
+    console.log("app挂载")
+})
 </script>
 
-<style scoped>
- /* 样式 */
+<style>
+
 </style>

vue3/my_project/src/components/Demo10.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="demo10">
+    <ul>
+        <li v-for="item in list1" :key="item.id">
+            {{item.id}} -- {{ item.name }} -- {{ item.hobby }}
+        </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo10">
+import {PersonList} from '@/types/Demo10.ts';
+import {withDefaults} from 'vue';
+import { defineProps } from 'vue';
+// defineProps 
+// 第一种接收方式：全部接收
+// defineProps(['list1']);
+// 第二种接收方式：指定接收类型
+// defineProps<{list1:PersonList}>();
+//第三种接收方式：全部接收 + 指定接收类型 + 默认类型显示
+withDefaults(defineProps<{list1?:PersonList}>(),{
+    list1:()=>[{
+        id:121,
+        name:"张三",
+        hobby:"篮球"
+    }]
+})
+</script>
+
+<style>
+
+</style>

vue3/my_project/src/components/Demo11.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="demo11">
+    <h2>数值：{{sum}}</h2>
+    <button @click="getAdd">点击加一</button>
+  </div>
+</template>
+
+<script setup name="Demo11" lang="ts">
+import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue';
+let sum = ref(0);
+function getAdd() {
+    sum.value += 1;
+}
+// 创建 =>setup
+// console.log(sum);
+// 挂载
+onBeforeMount(()=>{
+    console.log("挂在前")
+})
+onMounted(()=>{
+    console.log("Demo11挂载后")
+})
+// 更新
+onBeforeUpdate(() => {
+    console.log("更新前")
+})
+onUpdated(() => {
+    console.log("更新后")
+})
+// 卸载
+onBeforeUnmount(() => {
+    console.log("卸载前")
+})
+onUnmounted(() => {
+    console.log("卸载后")
+})
+</script>
+
+<style>
+
+</style>

vue3/my_project/src/types/Demo10.ts

@@ -0,0 +1,8 @@
+export interface Persons {
+    id: number,
+    name: string,
+    age: number,
+    hobby: string,
+}
+
+export type PersonList = Array<Persons>;

vue3/my_project/归档/2.计算属性 watch/App.vue

@@ -0,0 +1,58 @@
+<template>
+   <div id="app">
+    <!-- html -->
+    <Demo9></Demo9>
+    <!-- <h2 ref="address">哈尔滨</h2>
+    <button @click="getMain">获取</button>
+    <Demo8 ref="haha"></Demo8> -->
+    <!-- <Demo7></Demo7> -->
+    <!-- <Demo6></Demo6> -->
+    <!-- <Demo5></Demo5> -->
+    <!-- <Demo4></Demo4> -->
+    <!-- <Demo3></Demo3> -->
+    <!-- <Demo2></Demo2> -->
+    <!-- <Demo1></Demo1> -->
+    <!-- <Demo></Demo> -->
+   </div>
+</template>
+
+<script>
+import Demo9 from './components/Demo9.vue'
+import Demo8 from './components/Demo8.vue'
+import Demo7 from './components/Demo7.vue'
+import Demo6 from './components/Demo6.vue'
+import Demo5 from './components/Demo5.vue'
+import Demo4 from './components/Demo4.vue'
+import Demo3 from './components/Demo3.vue'
+import Demo2 from './components/Demo2.vue'
+import Demo1 from './components/Demo1.vue'
+// import Demo from './components/Demo.vue'
+export default {
+    // js或ts
+    components: {   
+        // Demo,
+        // Demo1,
+        // Demo2,
+        // Demo3,
+        // Demo4,
+        // Demo5,
+        // Demo6,
+        // Demo7,
+        Demo8,
+        Demo9
+    },
+}
+</script>
+<script setup>
+    import {ref} from 'vue';
+    let address = ref();
+    let haha = ref();
+    function getMain() {
+        // console.log(address.value,'app页')
+        console.log(haha.value,'app')
+    }
+</script>
+
+<style scoped>
+ /* 样式 */
+</style>