当前位置：首页 > news >正文

Vue3快速入门+axios的异步请求（基础使用）

news 2026/2/9 11:20:53

学习Vue之前先要学习html+css+js的基础使用

Vue其实是js的框架

常用到的Vue指令包括vue-on,vue-for,vue-blind,vue-if&vue-show,v-modul

vue的基础模板：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{msg}}</h1></div><script type="module">import{createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return{msg:'hello vue3'}}}).mount("#app");</script>
</body>
</html>

常用到的Vue指令：

v-for

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr>
<!--             <tr><td>标题2</td><td>分类2</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr><tr><td>标题3</td><td>分类3</td><td>2000-01-01</td><td>已发布</td><td><button>编辑</button><button>删除</button></td></tr> --></table></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建应用实例createApp({data() {return {articleList:[{title:"医疗反腐绝非砍医护收入",category:"时事",time:"2023-09-5",state:"已发布"},{title:"中国男篮缘何一败涂地？",category:"篮球",time:"2023-09-5",state:"草稿"},{title:"华山景区已受大风影响阵风达7-8级，未来24小时将持续",category:"旅游",time:"2023-09-5",state:"已发布"}]}}}).mount("#app")//控制页面元素</script>
</body>
</html>

v-blind

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><!-- <a href="https://www.itheima.com">黑马官网</a> --><a v-bind:href="url">黑马</a></div><script type="module">//引入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {url:'https://www.itheima.com'}}}).mount("#app")//控制html元素</script>
</body>
</html>

v-if&&v-show

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 手链价格为:  <span>9.9</span>  <span>19.9</span> <span>29.9</span> --><span v-if="customer.level>=0 && customer.level<=1">9.9</span><span v-else-if="customer.level>=2 && customer.level<=4">19.9</span><span v-else>29.9</span><br><span v-show="customer.level>=0 && customer.level<=1">9.9</span><span v-show="customer.level>=2 && customer.level<=4">19.9</span><span v-show>29.9</span></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {customer:{name:'张三',level:3}}}}).mount("#app")//控制html元素</script>
</body></html>

v-on

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><button v-on:click="money">点我有惊喜</button> &nbsp;<button v-on:click="love">再点更惊喜</button></div><script type="module">//导入vue模块import { createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据}},methods:{money: function(){alert('123')},love: function(){alert('456')}}}).mount("#app");//控制html元素</script>
</body>
</html>

v-module

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app">文章分类: <input type="text" v-modul="searchConditions.category"/><span>{{searchConditions.category}}</span>发布状态: <input type="text" v-modul="searchConditions.state"/><span>{{searchConditions.state}}</span><button>搜索</button><button v-on-click="clear">重置</button><br /><br /><table border="1 solid" colspa="0" cellspacing="0"><tr><th>文章标题</th><th>分类</th><th>发表时间</th><th>状态</th><th>操作</th></tr><tr v-for="(article,index) in articleList"><td>{{article.title}}</td><td>{{article.category}}</td><td>{{article.time}}</td><td>{{article.state}}</td><td><button>编辑</button><button>删除</button></td></tr></table></div><script type="module">//导入vue模块import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'//创建vue应用实例createApp({data() {return {//定义数据methods:{clear:function(){//清空category里的数据}},searchConditions:{category:'',state:''},articleList: [{title: "医疗反腐绝非砍医护收入",category: "时事",time: "2023-09-5",state: "已发布"},{title: "中国男篮缘何一败涂地？",category: "篮球",time: "2023-09-5",state: "草稿"},{title: "华山景区已受大风影响阵风达7-8级，未来24小时将持续",category: "旅游",time: "2023-09-5",state: "已发布"}]}},mounted: function() {console.log('vue挂载完毕，发送请求获取数据')}}).mount("#app")//控制html元素</script>
</body></html>

axios使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 引入axios的js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/* 发送请求 */axios({method:'get',url:'http//localhost:8080/article/getAll'}).then(result=>{//成功的回调//result代表服务器响应的所有数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据console.log(result.data)}).catch(err=>{//失败的回调console.log(err)});/*         // 使用别名的方式发送请求axios.get('http//localhost:8080/article/getAll').then(result=>{//成功的回调//result代表服务器响应的所有数据，包含了响应头，响应体，result.data 代表的是接口响应的核心数据console.log(result.data)}).catch(err=>{//失败的回调console.log(err)}); */</script>
</body>
</html>

Vue3快速入门+axios的异步请求（基础使用）

学习Vue之前先要学习htmlcssjs的基础使用 Vue其实是js的框架常用到的Vue指令包括vue-on,vue-for,vue-blind,vue-if&vue-show,v-modul vue的基础模板： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8&…...

编程日记 2024/9/20 6:54:12

VM16安装macOS11

注意： 本文内容于 2024-09-17 12:08:24 创建，可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容，请访问原文地址：VM16安装macOS11。感谢您的关注与支持！ 使用 Vmware Workstation Pro 16 安装 macOS…...

编程日记 2024/9/20 6:52:10

自定义复杂AntV/G6案例

一、效果图二、源码 /** * * Author: me * CreatDate: 2024-08-22 * * Description: 复杂G6案例 * */ <template><div class"moreG6-wapper"><div id"graphContainer" ref"graphRef" class"graph-content"></d…...

编程日记 2024/9/20 6:50:07

Golang | Leetcode Golang题解之第419题棋盘上的战舰

题目： 题解： func countBattleships(board [][]byte) (ans int) {for i, row : range board {for j, ch : range row {if ch X && !(i > 0 && board[i-1][j] X || j > 0 && board[i][j-1] X) {ans}}}return }...

编程日记 2024/9/20 6:47:05

CCF刷题计划——LDAP（交集、并集 how to go）

LDAP 计算机软件能力认证考试系统不知道为什么，直接给我报一个运行错误，得了0分。但是我在Dev里，VS里面都跑的好好的，奇奇怪怪。如果有大佬路过，请帮小弟看看QWQ。本题学到的：交集set_intersection、并集…...

编程日记 2024/9/20 6:45:03

谷歌论文提前揭示o1模型原理：AI大模型竞争或转向硬件

Open AI最强模型o1的护城河已经没有了？仅在OpenAI发布最新推理模型o1几日之后，海外社交平台 Reddit 上有网友发帖称谷歌Deepmind在 8 月发表的一篇论文内容与o1模型原理几乎一致，OpenAI的护城河不复存在。谷歌DeepMind团队于今年8月6日发布…...

编程日记 2024/9/20 6:42:00

【ShuQiHere】探索数据挖掘的世界：从概念到应用

🌐 【ShuQiHere】数据挖掘（Data Mining, DM） 是一种从大型数据集中提取有用信息的技术，无论是在商业分析、金融预测，还是医学研究中，数据挖掘都扮演着至关重要的角色。本文将带您深入了解数据挖掘的核心概…...

编程日记 2024/9/20 6:41:00

LabVIEW提高开发效率技巧----使用事件结构优化用户界面响应

事件结构（Event Structure） 是 LabVIEW 中用于处理用户界面事件的强大工具。通过事件驱动的编程方式，程序可以在用户操作时动态执行特定代码，而不是通过轮询（Polling）的方式不断检查界面控件状态。这种方式…...

编程日记 2024/9/20 6:38:58

【前端】ES6：Set与Map

文章目录 1 Set结构1.1 初识Set1.2 实例的属性和方法1.3 遍历1.4 复杂数据结构去重 2 Map结构2.1 初识Map2.2 实例的属性和方法2.3 遍历 1 Set结构它类似于数组，但成员的值都是唯一的，没有重复的值。 1.1 初识Set let s1 new Set([1, 2, 3, 2, 3]) …...

编程日记 2024/9/20 6:35:54

Java 之网络编程小案例

1. 多发多收描述： 编写一个简单的聊天程序，客户端可以向服务器发送多条消息，服务器可以接收所有消息并回复。代码示例： 服务器端 (Server.java): import java.io.*; import java.net.*; import java.util.concurrent.Execut…...

编程日记 2024/9/20 6:27:11

Spring Boot：现代化Java应用开发的艺术

目录什么是Spring Boot？ 为什么选择Spring Boot？ Spring Boot的核心概念详细步骤：创建一个Spring Boot应用步骤1：使用Spring Initializr创建项目步骤2：解压并导入项目步骤3：构建和配置项目 po…...

编程日记 2024/9/20 6:26:09

Redis五种基本数据结构的使用

Redis具有五种基本数据类型：String(字符串)、Hash(哈希)、List(列表)、Set(集合)、SortedSet(有序集合)，下面示意它们的使用。 String类数据类型的使用增：添加数据(set)、添加多个数据(mset)、添加数据时指定过期时间(setex) 删&#xf…...

编程日记 2024/9/20 6:25:07

【QT】系统-下

欢迎来到Cefler的博客😁 🕌博客主页：折纸花满衣 🏠个人专栏：QT 目录 👉🏻QTheadrun() 👉🏻QMutex👉🏻QWaitCondition👉🏻Q…...

编程日记 2024/9/20 6:23:06

java和kotlin 可以同时运行吗

Java 和 Kotlin 可以同时运行在同一个项目中，这主要得益于 Kotlin 对 Java 的互操作性。Kotlin 被设计为与 Java 100% 兼容，这意味着 Kotlin 代码可以很容易地调用 Java 代码，反之亦然。这种设计使得 Kotlin 能够无缝集成到现有的 Java 项目中…...

编程日记 2024/9/20 6:22:04

2024最新版 Tuxera NTFS for Mac 2023绿色版图文安装教程

在数字化时代，数据的存储和传输变得至关重要。Mac用户经常需要在Windows NTFS格式的移动硬盘上进行读写操作，然而，由于MacOS系统默认不支持NTFS的写操作，这就需要我们寻找一款高效的读写软件。Tuxera NTFS for Mac 2023便是其中…...

编程日记 2024/9/20 6:21:03

npm发布插件超级简单版

在开源的世界里，每个人都有机会成为贡献者，甚至是创新的引领者。您是否有过这样的想法：开发一个解决特定问题的小工具，让他成为其他开发者手中的利器？今天，我们就来一场实战训练，学习如何将你的…...

编程日记 2024/9/20 6:20:02

C# 访问Access存取图片

图片存入ole字段，看有的代码是获取图片的字节数组转换为base64字符串，存入数据库；显示图片是把base64字符串转换为字节数组再显示；直接存字节数组可能还好一点； 插入的时候用带参数的sql写法比较好；用拼接…...

编程日记 2024/9/20 6:15:59

正则表达式中常见字符的用法介绍

正则表达式（Regular Expression，简称Regex）是一种文本模式描述的方法，包括普通字符（如a到z之间的字母）和特殊字符（称为“元字符”）。正则表达式使用单个字符串来描述、匹配一系列符合…...

编程日记 2024/9/20 6:14:58

Vue3.0组合式API：依赖注入provide和inject实现跨层组件的通信

Vue3.0组合式API系列文章： 《Vue3.0组合式API：setup()函数》《Vue3.0组合式API：使用reactive()、ref()创建响应式代理对象》《Vue3.0组合式API：computed计算属性、watch监听器、watchEffect高级监听器》《Vue3.0组合式API&…...

编程日记 2024/9/20 6:13:56

VSCode中配置C/C++环境

在Visual Studio Code（VSCode）中配置C/C环境是一个相对直接且功能强大的过程，它能让开发者利用VSCode的诸多便利功能来编写、编译和调试C/C代码。以下是一个详细的步骤指南，涵盖了从安装必要的软件到配置编译器、调试器以及VSCode…...

编程日记 2024/9/20 6:12:55

pam_env.so模块配置解析

在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解字段值说明模块类型auth认证类模块，负责验证用户身份&am…...

编程新知 2025/10/5 8:09:39

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具，可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下： ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜： ffmpeg…...

编程新知 2026/2/4 23:47:47

Robots.txt 文件

什么是robots.txt？ robots.txt 是一个位于网站根目录下的文本文件（如：https://example.com/robots.txt），它用于指导网络爬虫（如搜索引擎的蜘蛛程序）如何抓取该网站的内容。这个文件遵循 Robots…...

编程新知 2025/9/9 5:38:23

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...

编程新知 2025/9/17 2:39:21

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接在运行jar包时出现了这样的错误查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...

编程新知 2026/2/8 14:19:47

08. C#入门系列【类的基本概念】：开启编程世界的奇妙冒险

C#入门系列【类的基本概念】：开启编程世界的奇妙冒险嘿，各位编程小白探险家！欢迎来到 C# 的奇幻大陆！今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类！别害怕，跟着我，保准让你轻松搞…...

编程新知 2025/10/31 20:37:10

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...

编程新知 2026/1/31 4:40:38

Vite中定义@软链接

在webpack中可以直接通过符号表示src路径，但是vite中默认不可以。如何实现： vite中提供了resolve.alias：通过别名在指向一个具体的路径在vite.config.js中 import { join } from pathexport default defineConfig({plugins: [vue()],//…...

编程新知 2026/1/24 13:26:57