<template>
  <div id="one">
    <img src="http://127.0.0.1:9000/upload/001.png" alt="">
    <h1>Hello World</h1>
    <h1>{{ text }}</h1>
<!-- 使用双花括号来变量括起来，进行渲染，定义的变量在下面 -->
  </div>
</template>

<script>
  //axios导入，导入后一定要使用，不然抛出异常
  //import axios from 'axios';
  export default {
    //vue3的setup()函数，执行的顺序在vue页面中排第一
    //setup(props)函数，中的props是用于父子组件之间用于传参的一个参数
    //setup()函数中可以通过return来返回一个对象，这个对象可以用于页面的数据绑定
    //和data()函数的区别，data()函数只能返回一个字符串
    //setup()函数可以返回一个函数对象，把function xxx()函数赋值给text变量
    setup(){
      function getA(){
        return "getA()函数中返回的字符串"
      }
      return{
        //直接在这里给变量text赋值，可以在页面数据绑定中使用,赋值的内容为一个函数对象
        text:getA(),
      }
    }
}
</script>
<style>
#one {
  width: 300px;
  height:200px;
  box-shadow: 0 2px 12px 0 #00000060;
  margin: 0 auto;
}
</style>