vue3

12.vue3/project1/src/App.vue

@@ -1,5 +1,9 @@
 <template>
   <div>
+    <Demo7></Demo7>
+    <hr><hr><hr>
+    <Demo6></Demo6>
+    <hr><hr><hr>
     <Demo1></Demo1>
     <hr><hr><hr>
     <Demo2></Demo2>
@@ -18,6 +22,8 @@ import Demo2 from './components/Demo2.vue';
 import Demo3 from './components/Demo3.vue';
 import Demo4 from './components/Demo4.vue';
 import Demo5 from './components/Demo5.vue';
+import Demo6 from './components/Demo6.vue';
+import Demo7 from './components/Demo7.vue';
 </script>
 
 <style>

12.vue3/project1/src/components/Demo6.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>Demo6--标签Ref</h1>
+    <h3 ref="weather">今天天气真好</h3>
+    <button @click="showMain">输出</button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ref,reactive} from "vue" 
+let weather = ref(111);
+console.log(weather.value,'初始化',weather)
+function showMain() {
+    console.log(weather.value,'输出')
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project1/src/components/Demo7.vue

@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <h1>回顾TS</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import { type List, type aa } from "@/types/7";
+let weather = ref<string>("晴天");
+
+let person: List = reactive({
+  name: "胡图图",
+  age: 3,
+});
+
+let newList:aa = reactive([
+  {
+    name: "胡图图",
+    age: 3,
+  },
+  {
+    name: "胡图图",
+    age: 3,
+  },
+  {
+    name: "胡图图",
+    age: 3,
+  },
+]);
+</script>
+
+<style lang="scss" scoped>
+</style>

12.vue3/project1/src/types/7.ts

@@ -0,0 +1,6 @@
+export interface List {
+    name: string,
+    age: number
+}
+
+export type aa = List[]