Axios初步
首先导入CDN
1 2 3 | <!--导入vue与axios--> < script src="https://cdn.jsdelivr.net/npm/vue@2"></ script > < script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></ script > |
然后在“script”标签书写。其中先建立一个后缀名为“json”的文件,该文件有两种参考写法,且都不支持注释
写法一:每个独立的对象都被包装在一个顶层对象中,其中的键是自定义的名称。这样就符合了JSON的语法规则。每个内部对象都有自己的键值对,并且整个结构由一个大括号包围,表示这是一个单一的JSON对象。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | { "hunshuideyunxue": { "name": "hunshuideyunxue", "age": 20, "address": "qiludadi" }, "百度": { "name": "hunshuidezhangyu", "url": "https://www.baidu.com" }, "B站": { "name": "B站", "url": "https://www.bilibili.com" } } |
或者所有对象都被放置在一个数组中,由方括号包围。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | [ { "name": "hunshuideyunxue", "age": 20, "address": "qiludadi" }, { "name": "yun", "url": "https://www.baidu.com" }, { "name": "B站", "url": "https://www.bilibili.com" } ] |
然后在“html”文件中的“script”标签中写
1 2 3 4 | mounted(){ //钩子函数,链式编程 axios.get('data.json').then(response=>(console.log(response.data))); //连接“deta.json”文件,拿到后在控制台输出“data.json”中的内容< br > //注意该文件与当下的这个文件的位置关系 } |
此时运行后在浏览器控制台中就可以查看输出内容,本次用的HbuiderX所写。可能因为环境等问题导致浏览器无法显示文件内的元素,求解!!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)