首页课件丨教程安装教程学习单页Hmlt上使用vue3和axios请求案例

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

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

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

初衷

我只想在一个html文件里面执行vueaxios操作。不想用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)
学习单页Hmlt上使用vue3和axios请求案例 2

这是一个很大的坑大家,其实直接使用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]],影响不大

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

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>

声明: 1.本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:ceo@zunw.cn,我们将第一时间处理! 2.资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持 3.所有资源仅限于参考和学习,版权归原作者所有,更多请阅读网站声明。

给TA赏金
共{{data.count}}人
人已赏金
安装教程

uni-app 新手微信小程序登入获取用户信息

2022-11-13 17:19:55

安装教程

CSS3自定义webkit修改浏览器滚动条样式

2022-11-13 17:20:09

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
MySSL 安全签章