Vue.js3 axios 讀取API資料

Vue.js3 axios Ajax

 

<div id="app">
  {{ data }}
</div>
<script type="module">
  import { createApp, ref, onMounted } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.15/vue.esm-browser.prod.min.js';
  import axios from 'https://cdn.skypack.dev/axios@0.24.0'; // 引入 Axios
  const app = createApp({
    setup() {
      // 參數
      const data = ref([]);
      
      // 功能.對外部API發出收取資料請求
      function testAjax() {
        axios.get('https://randomuser.me/api/?results=2').then((respons) => {
            data.value = respons.data.results;
          })
      }

      // 初始化資料 Ajax...
      onMounted(() => {
        testAjax();
      });

      // 輸出
      return {
        data,
        testAjax
      }
    }
  })
  app.mount('#app');
</script>

我只是一棵樹