vue3

15.vue3/project1/src/App.vue

@@ -1,21 +1,41 @@
 <template>
-  <Demo13/>
-  <!-- <Demo1 />
-  <Demo2 />
-  <Demo3 />
-  <Demo4 />
-  <Demo5 />
-  <Demo6 />
-  <Demo7 />
-  <Demo8/> 
-  <Demo9/>
-  <Demo10/>
-  <Demo11/>
-  <Demo12/>
+  <div>
+    <Demo15/>
+  <!-- 
+    <Demo1 />
+    <Demo2 />
+    <Demo3 />
+    <Demo4 />
+    <Demo5 />
+    <Demo6 />
+    <Demo7 />
+    <Demo8/> 
+    <Demo9/>
+    <Demo10/>
+    <Demo11/>
+    <Demo12/>
+    <Demo13/>
   -->
+  <!-- 
+  <div> 
+    <h4 ref="today">哈哈哈</h4>
+    <Demo14 ref='flower' />
+    <button @click="show">展示</button>
+  </div>
+   -->
+  </div>
 </template>
 
 <script setup lang="ts" name="App">
+import { ref } from "vue";
+let today = ref(12);
+
+let flower: any = ref(10);
+
+function show() {
+  console.log(today.value, "flower");
+}
+
 // import Demo1 from "./components/Demo1.vue";
 // import Demo2 from "./components/Demo2.vue";
 // import Demo3 from "./components/Demo3.vue";
@@ -28,6 +48,8 @@
 // import Demo10 from "./components/Demo10.vue";
 // import Demo11 from "./components/Demo11.vue";
 // import Demo12 from "./components/Demo12.vue";
-import Demo13 from "./components/Demo13.vue";
+// import Demo13 from "./components/Demo13.vue";
+// import Demo14 from "./components/Demo14.vue";
+import Demo15 from "./components/Demo15.vue";
 </script>
 <style lang="scss" scoped></style>

15.vue3/project1/src/components/Demo14.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h3>标签的ref</h3>
+    <h4 ref="today">今天天气真好</h4>
+    <button @click="showH4">输出</button>
+  </div>
+</template>
+
+<script setup>
+import { ref} from 'vue'
+let today = ref(12);
+console.log(today,'1');
+console.log(today.value,'2')
+
+let a1 = ref(0)
+let a2 = ref(1)
+let a3 = ref(2)
+function showH4() {
+    console.log(today.value)
+}
+defineExpose({a1,a2,a3,today})
+// console.log(today.value.innerText);
+</script>
+<style lang='scss' scoped>
+
+</style>

15.vue3/project1/src/components/Demo15.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <h3>回顾ts</h3>
+    <!-- <p>今天是个{{ weather }}</p> -->
+  </div>
+</template>
+
+<script setup lang="ts" name="Demo15">
+import { ref, reactive, isReactive } from "vue";
+import { type PersonInter, newPerson,happy } from "@/types/demo15";
+
+// let weather: string = "晴天";
+let weather:string = ref("晴天");
+
+
+function fn5<T extends happy>(a:T):T {
+        return a;
+    }
+
+  console.log( fn5({jump:'0'}));
+
+let person: PersonInter = reactive({
+  name: "孙悟空",
+  age: 10,
+  sex: "男",
+  hobby: "睡觉",
+});
+let list: newPerson = reactive([
+  {
+    name: "孙悟空",
+    age: 10,
+    sex: "男",
+    hobby: "睡觉",
+  },
+  {
+    name: "孙悟空",
+    age: 10,
+    sex: "男",
+    hobby: "睡觉",
+  },
+  {
+    name: "孙悟空",
+    age: 10,
+    sex: "男",
+    hobby: "睡觉",
+  },
+]);
+</script>
+<style lang="scss" scoped></style>

15.vue3/project1/src/types/demo15.ts

@@ -0,0 +1,20 @@
+// 接口 人员信息
+export interface PersonInter {
+    name: string,
+    age: number,
+    sex: string,
+    hobby: string
+}
+
+// 自定义类型
+export type newPerson = PersonInter[]
+
+export interface happy { 
+    jump:string;
+}
+
+export enum Sex {
+
+}
+
+export let a1:number=10;