Web1020/13.Vue3/project2/src/App.vue

<template>
  <div>
    <!-- {{msg}} -->
    <!-- <Demo1/>
    <Demo2/>
    <Demo3/>
    <Demo4/>
    <Demo5/>
    <Demo6/>
    <Demo7/>
    <Demo8/>
    <Demo9/> 
    <Demo10/>
    <Demo11/>-->
    <Demo12/>
    <Demo13 v-if='show'/>
    <Demo14 ref="flower" />
    <Demo15/>
  </div>
</template>

<script setup name="App">
import {ref,onMounted} from 'vue';
let show = ref(true)
let flower = ref(null)
onMounted(()=>{
  console.log(flower.value)
})
// 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'
// vue2 选项式API => Option API
// Vue3 组合式API => component API
// export default {
//   // data() {
//   //   return {
//   //     msg:"今天星期五"
//   //   }
//   // }
//   components:{
//     Demo1,
//     Demo2,
//     Demo3
//   }
// }
</script>
<style scoped>

</style>