学习单页Hmlt上使用vue3和axios请求案例

如果你爱上了某个星球的一朵花。那么，只要在夜晚仰望星空，就会觉得漫天的繁星就像一朵朵盛开的花

初衷

我只想在一个html文件里面执行vue，axios操作。不想用npm，不想写一个简单的功能要打包一堆文件。所以我想用CDN方式接触下原生vue的内容，写好后直接甩一个html文件方便至极

奇葩踩坑记录

1.ES模块引入js文件

使用ES方式引入

import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import axios from 'https://unpkg.com/axios/dist/axios.min.js';

axios在控制台会显示错误

Uncaught SyntaxError: The requested module 'https://unpkg.com/axios/dist/axios.min.js' does not provide an export named 'default' (at html.html:20:12)

这是一个很大的坑大家，其实直接使用script标签引入是没多大问题的

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

2.数组赋值

我们请求输入正常打印


console.log(res.data);

若我们把数据存到data中


this.apiDate = res.data;
console.log(this.apiDate)

控制台会有[[Handler]]和[[Target]]，影响不大

3.生命周期

created：页面加载完成之前

mounted：页面加载完成后执行

watch：去监听一个值的变化，执行相对应的函数

computed：计算属性，依赖其它的属性计算所得出最后的值

methods：事件方法

mounted和created类似微信小程序的onLoad和onShow

案例

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <div v-for="(item, index) in apiDate" key="index">{{index + 1}}.{{item.title.rendered}}</div>
  </div>

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    // import axios from 'https://unpkg.com/axios/dist/axios.min.js';
    createApp({
      data() {
        return {
          apiDate:''
        }
      },
      mounted() {
        this.feng();
      },
      methods: {
        feng() {
          // 为给定 ID 的 user 创建请求
         axios.get('https://www.frbkw.com/wp-json/wp/v2/posts')
            .then( (res)=> {
              // console.log(res.data);
              this.apiDate = res.data;
              console.log(this.apiDate)
            })
        }
      }
    }).mount('#app')
</script>
</body>

</html>