Vue3快速入门+axios的异步请求（基础使用）
学习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> <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&…...
VM16安装macOS11
注意： 本文内容于 2024-09-17 12:08:24 创建，可能不会在此平台上进行更新。如果您希望查看最新版本或更多相关内容，请访问原文地址：VM16安装macOS11。感谢您的关注与支持！ 使用 Vmware Workstation Pro 16 安装 macOS…...
自定义复杂AntV/G6案例
一、效果图 二、源码 /** * * Author: me * CreatDate: 2024-08-22 * * Description: 复杂G6案例 * */ <template><div class"moreG6-wapper"><div id"graphContainer" ref"graphRef" class"graph-content"></d…...
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 }...
CCF刷题计划——LDAP（交集、并集 how to go）
LDAP 计算机软件能力认证考试系统 不知道为什么，直接给我报一个运行错误，得了0分。但是我在Dev里，VS里面都跑的好好的，奇奇怪怪。如果有大佬路过，请帮小弟看看QWQ。本题学到的：交集set_intersection、并集…...
谷歌论文提前揭示o1模型原理：AI大模型竞争或转向硬件
Open AI最强模型o1的护城河已经没有了？仅在OpenAI发布最新推理模型o1几日之后，海外社交平台 Reddit 上有网友发帖称谷歌Deepmind在 8 月发表的一篇论文内容与o1模型原理几乎一致，OpenAI的护城河不复存在。 谷歌DeepMind团队于今年8月6日发布…...
【ShuQiHere】 探索数据挖掘的世界：从概念到应用
🌐 【ShuQiHere】 数据挖掘（Data Mining, DM） 是一种从大型数据集中提取有用信息的技术，无论是在商业分析、金融预测，还是医学研究中，数据挖掘都扮演着至关重要的角色。本文将带您深入了解数据挖掘的核心概…...
LabVIEW提高开发效率技巧----使用事件结构优化用户界面响应
事件结构（Event Structure） 是 LabVIEW 中用于处理用户界面事件的强大工具。通过事件驱动的编程方式，程序可以在用户操作时动态执行特定代码，而不是通过轮询（Polling）的方式不断检查界面控件状态。这种方式…...
【前端】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]) …...
Java 之网络编程小案例
1. 多发多收 描述： 编写一个简单的聊天程序，客户端可以向服务器发送多条消息，服务器可以接收所有消息并回复。 代码示例： 服务器端 (Server.java): import java.io.*; import java.net.*; import java.util.concurrent.Execut…...
Spring Boot：现代化Java应用开发的艺术
目录 什么是Spring Boot？ 为什么选择Spring Boot？ Spring Boot的核心概念 详细步骤：创建一个Spring Boot应用 步骤1：使用Spring Initializr创建项目 步骤2：解压并导入项目 步骤3：构建和配置项目 po…...
Redis五种基本数据结构的使用
Redis具有五种基本数据类型：String(字符串)、Hash(哈希)、List(列表)、Set(集合)、SortedSet(有序集合)，下面示意它们的使用。 String类数据类型的使用 增：添加数据(set)、添加多个数据(mset)、添加数据时指定过期时间(setex) 删…...
【QT】系统-下
欢迎来到Cefler的博客😁 🕌博客主页：折纸花满衣 🏠个人专栏：QT 目录 👉🏻QTheadrun() 👉🏻QMutex👉🏻QWaitCondition👉🏻Q…...
java和kotlin 可以同时运行吗
Java 和 Kotlin 可以同时运行在同一个项目中，这主要得益于 Kotlin 对 Java 的互操作性。Kotlin 被设计为与 Java 100% 兼容，这意味着 Kotlin 代码可以很容易地调用 Java 代码，反之亦然。这种设计使得 Kotlin 能够无缝集成到现有的 Java 项目中…...
2024最新版 Tuxera NTFS for Mac 2023绿色版图文安装教程
在数字化时代，数据的存储和传输变得至关重要。Mac用户经常需要在Windows NTFS格式的移动硬盘上进行读写操作，然而，由于MacOS系统默认不支持NTFS的写操作，这就需要我们寻找一款高效的读写软件。Tuxera NTFS for Mac 2023便是其中…...
npm发布插件超级简单版
在开源的世界里，每个人都有机会成为贡献者，甚至是创新的引领者。您是否有过这样的想法：开发一个解决特定问题的小工具，让他成为其他开发者手中的利器？今天，我们就来一场实战训练，学习如何将你的…...
C# 访问Access存取图片
图片存入ole字段，看有的代码是获取图片的字节数组转换为base64字符串，存入数据库；显示图片是把base64字符串转换为字节数组再显示；直接存字节数组可能还好一点； 插入的时候用带参数的sql写法比较好；用拼接…...
正则表达式中常见字符的用法介绍
正则表达式（Regular Expression，简称Regex）是一种文本模式描述的方法，包括普通字符（如a到z之间的字母）和特殊字符（称为“元字符”）。正则表达式使用单个字符串来描述、匹配一系列符合…...
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&…...
VSCode中配置C/C++环境
在Visual Studio Code（VSCode）中配置C/C环境是一个相对直接且功能强大的过程，它能让开发者利用VSCode的诸多便利功能来编写、编译和调试C/C代码。以下是一个详细的步骤指南，涵盖了从安装必要的软件到配置编译器、调试器以及VSCode…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中，iftop是网络管理的得力助手，能实时监控网络流量、连接情况等，帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
使用VSCode开发Django指南
使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架，专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用，其中包含三个使用通用基本模板的页面。在此…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用
1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...
分布式增量爬虫实现方案
之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面，避免重复抓取，以节省资源和时间。 在分布式环境下，增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路：将增量判…...
android13 app的触摸问题定位分析流程
一、知识点 一般来说，触摸问题都是app层面出问题，我们可以在ViewRootImpl.java添加log的方式定位；如果是touchableRegion的计算问题，就会相对比较麻烦了，需要通过adb shell dumpsys input > input.log指令，且通过打印堆栈的方式，逐步定位问题，并找到修改方案。 问题…...
Spring Security 认证流程——补充
一、认证流程概述 Spring Security 的认证流程基于 过滤器链（Filter Chain），核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤： 用户提交登录请求拦…...
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里
写一个shell脚本，把局域网内，把能ping通的IP和不能ping通的IP分类，并保存到两个文本文件里 脚本1 #!/bin/bash #定义变量 ip10.1.1 #循环去ping主机的IP for ((i1;i<10;i)) doping -c1 $ip.$i &>/dev/null[ $? -eq 0 ] &&am…...
ubuntu中安装conda的后遗症
缘由: 在编译rk3588的sdk时，遇到编译buildroot失败，提示如下： 提示缺失expect，但是实测相关工具是在的，如下显示： 然后查找借助各个ai工具，重新安装相关的工具，依然无解。 解决&am…...
【Redis】Redis 的持久化策略
目录 一、RDB 定期备份 1.2 触发方式 1.2.1 手动触发 1.2.2.1 自动触发 RDB 持久化机制的场景 1.2.2.2 检查是否触发 1.2.2.3 线上运维配置 1.3 检索工具 1.4 RDB 备份实现原理 1.5 禁用 RDB 快照 1.6 RDB 优缺点分析 二、AOF 实时备份 2.1 配置文件解析 2.2 开启…...