web250825/vue3/project3/src/App.vue

<template>
  <div>
    <!-- <Demo1></Demo1> -->
     <!-- <Demo3></Demo3> -->
    <!-- 
    <Demo2></Demo2>
    <Demo3></Demo3> -->
    <!-- <Demo4></Demo4>
    <Demo5></Demo5>
    <Demo6></Demo6>
    <Demo7></Demo7>
    <Demo8></Demo8>
    <Demo9></Demo9> -->
     <!-- <Demo14 v-if="isshow"></Demo14> -->
     <!-- <Demo23></Demo23> -->
     <!-- <Demo24 ref="main"></Demo24> -->
    <!-- <Demo10></Demo10>
    <Demo11></Demo11>
    <Demo12></Demo12>
    <Demo13></Demo13> -->
    <!-- <Demo25 :name="name1" :age="10"/>
    <Demo25 :list1="list"/> -->
    <!-- <Demo26 /> -->
    <Demo27></Demo27>
  </div>
</template>

<!-- <script>
import Demo1 from "./components/Demo1.vue";
import Demo2 from './components/Demo2.vue';
export default {
  data() {
    return {};
  },
  components: {
    Demo1,
    Demo2
  },
  created() {
    console.log(this)
  }
};
</script> -->

<script lang="ts" setup>
import { ref,onMounted, reactive } from "vue";
import Demo1 from "./components/Demo1.vue";
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';
import Demo8 from './components/Demo8.vue';
import Demo9 from './components/Demo9.vue';
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 Demo14 from './components/Demo14.vue';
import Demo15 from './components/Demo15.vue';
import Demo16 from './components/Demo16.vue';
import Demo17 from './components/Demo17.vue';
import Demo18 from './components/Demo18.vue';
import Demo19 from './components/Demo19.vue';
import Demo23 from './components/Demo23.vue';
import Demo24 from './components/Demo24.vue';
import Demo25 from './components/Demo25.vue';
import Demo26 from './components/Demo26.vue';
import Demo27 from './components/Demo27.vue';
let isshow  = ref(true);
let main = ref<any>(null);
// onMounted(() => {
//   console.log(main.value.a)
//   console.log(main.value.b)
// }) 
let name1 = ref<string>("孙悟空")
interface Person {
  name1:string,
  age1:number
}
let list:Person[] = reactive([{
  name1:"小红",
  age1:10
},{
  name1:"小黄",
  age1:20
},{
  name1:"小粉",
  age1:15
}])

</script>
<style>
</style>