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…...
利用快马平台五分钟搭建openclaw部署原型，验证核心功能
最近在折腾一个开源机器人抓取框架openclaw，想快速验证它的核心功能。但传统部署流程实在太繁琐——要配环境、装依赖、调试各种版本冲突，经常花半天时间还没跑通。后来发现InsCode(快马)平台能一键生成部署原型，五分钟就搞定了测试环境&…...
终极指南：3分钟解锁百度网盘SVIP下载特权，让下载速度飙升70倍！
终极指南：3分钟解锁百度网盘SVIP下载特权，让下载速度飙升70倍！ 【免费下载链接】BaiduNetdiskPlugin-macOS For macOS.百度网盘 破解SVIP、下载速度限制~ 项目地址: https://gitcode.com/gh_mirrors/ba/BaiduNetdiskPlugin-macOS 还在…...
提升表单开发效率：基于快马AI一键生成w777.7cc验证表单组件
今天在开发一个用户注册功能时，遇到了表单验证这个老生常谈的问题。以前每次都要手动写一堆验证逻辑，既费时又容易出错。这次尝试用w777.7cc框架结合InsCode(快马)平台的AI辅助功能，发现开发效率提升了不少，分享下具体实现过程。 …...
Janus-Pro-7B惊艳效果：同一张建筑照片生成写实/水彩/线稿三种风格图
Janus-Pro-7B惊艳效果：同一张建筑照片生成写实/水彩/线稿三种风格图 1. 从一张照片到三种艺术风格 想象一下，你手里有一张普通的建筑照片，可能是你旅行时拍的，也可能是工作中需要用的素材。现在，你希望它能变成三种完…...
3分钟搞定！BaiduPCS-Web免费解锁百度网盘满速下载终极方案
3分钟搞定！BaiduPCS-Web免费解锁百度网盘满速下载终极方案 【免费下载链接】baidupcs-web 项目地址: https://gitcode.com/gh_mirrors/ba/baidupcs-web 还在为百度网盘下载速度慢如蜗牛而烦恼吗？每次下载大文件都要等上几个小时甚至一整天&#…...
3个鲜为人知的smcFanControl使用技巧：让你的Mac冷静运行的开源方案
3个鲜为人知的smcFanControl使用技巧：让你的Mac冷静运行的开源方案 【免费下载链接】smcFanControl Control the fans of every Intel Mac to make it run cooler 项目地址: https://gitcode.com/gh_mirrors/smc/smcFanControl 当你在夏天使用MacBook处理大型…...
Win11轻量优化指南：自定义调校让系统流畅如初
Win11轻量优化指南：自定义调校让系统流畅如初 【免费下载链接】Win11Debloat A simple, lightweight PowerShell script that allows you to remove pre-installed apps, disable telemetry, as well as perform various other changes to declutter and customize …...
5分钟终极指南：在Windows上完美使用苹果触控板的完整方案
5分钟终极指南：在Windows上完美使用苹果触控板的完整方案 【免费下载链接】mac-precision-touchpad Windows Precision Touchpad Driver Implementation for Apple MacBook / Magic Trackpad 项目地址: https://gitcode.com/gh_mirrors/ma/mac-precision-touchpad…...
突破硬件限制：OpenCore Legacy Patcher实现老旧Mac现代化升级的完整方案
突破硬件限制：OpenCore Legacy Patcher实现老旧Mac现代化升级的完整方案 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 在苹果生态系统中&#x…...
UsbDk：突破Windows USB访问壁垒的开源驱动开发套件
UsbDk：突破Windows USB访问壁垒的开源驱动开发套件 【免费下载链接】UsbDk Usb Drivers Development Kit for Windows 项目地址: https://gitcode.com/gh_mirrors/us/UsbDk 技术背景解析 解构Windows USB访问限制 在Windows操作系统架构中，USB设…...