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…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
React第五十七节 Router中RouterProvider使用详解及注意事项
前言 在 React Router v6.4 中，RouterProvider 是一个核心组件，用于提供基于数据路由（data routers）的新型路由方案。 它替代了传统的 <BrowserRouter>，支持更强大的数据加载和操作功能（如 loader 和…...
Docker 运行 Kafka 带 SASL 认证教程
Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明：server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...
java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别
UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件 的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述：iview使用table 中type: "index",分页之后 ，索引还是从1开始，试过绑定后台返回数据的id, 这种方法可行，就是后台返回数据的每个页面id都不完全是按照从1开始的升序，因此百度了下，找到了…...
React Native在HarmonyOS 5.0阅读类应用开发中的实践
一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强，React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 （1）使用React Native…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
相机Camera日志分析之三十一：高通Camx HAL十种流程基础分析关键字汇总（后续持续更新中）
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了：有对最普通的场景进行各个日志注释讲解，但相机场景太多，日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志，通过下列分类关键字搜索，即可清晰的分析不同场景的相机运行流程差异…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...