W250511/17.Vue3/project/src/App.vue

<!-- <template>
  <div>
    <p>你好</p>
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">修改</button>
  </div>
</template>

<script lang="ts" >
export default {
  // data() {
  //   return {
  //     msg:"111"
  //   }
  // },
  // methods:{
  //   changeMsg() {
  //     this.msg = '222';
  //   }
  // }
}
</script>

<style lang="scss" scoped>
</style> -->


<template>
  <div>
    <h1>首页</h1>
    <Demo14></Demo14>
    <hr>
    <hr>
    <Demo13 ref="flower"></Demo13>
    <hr>
    <hr>
    <Demo12 v-if="isShow"></Demo12>
    <hr>
    <hr>
    <Demo11></Demo11>
    <hr>
    <hr>
    <Demo10></Demo10>
    <hr>
    <hr>
    <Demo9></Demo9>
    <hr>
    <hr>
    <Demo8></Demo8>
    <hr>
    <hr>
    <Demo7></Demo7>
    <hr>
    <hr>
    <Demo6></Demo6>
    <hr>
    <hr>
    <Demo5></Demo5>
    <hr>
    <hr>
    <Demo1></Demo1>
    <hr>
    <hr>
    <Demo2></Demo2>
    <hr>
    <hr>
    <Demo3></Demo3>
    <hr>
    <hr>
    <Demo4></Demo4>
  </div>
</template>

<script lang="ts" setup>
import {ref,onMounted} 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';
// export default {
//   // components:{
//   //   Demo1
//   // }
// }
let isShow = ref(true);
let flower = ref();
onMounted(()=>{
  console.log(flower.value,'花')
  console.log(flower.value.vase)
  console.log(flower.value.num)
})
</script>

<style lang="scss" scoped>
</style>