Web开发:VUE3小白开发入门基础笔记
一、基本语法
1.@click
后端路由:api/GetDataList
返回值:Value
前端要做的事:
①拿到Value值,传到a标签
②a标签有一个按钮,每点击一下,Value的值加一。
前端需要用@click语法
【代码】
<template><div><p>Value: {{ value }}</p><a :href="`#${value}`"><button @click="incrementValue">增加 Value</button></a></div>
</template><script>
import axios from 'axios';export default {data() {return {value: 0 // 初始值,将在 mounted 钩子中从后端获取};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('/api/GetDataList').then(response => {this.value = response.data.value;}).catch(error => {console.error('Error fetching data', error);});},incrementValue() {this.value++;}}
};
</script>
2.v-show
c#WebAPI +VUE3开发
后端路由:api/GetDataList
返回值:Value
前端要做的事:
①默认p标签值是:100,黑色
②拿到Value值,value=1,则p标签显示为1,显示该黑色标签
value=0,则p标签显示为0,颜色设置为红色
value=其他,则隐藏该标签
③前端用show属性控制显示
<template><div><!-- 根据需求设定 p 标签的初始状态 --><p :style="{ color: pColor }" v-show="showP">{{ pValue }}</p></div>
</template><script>
import { ref, onMounted } from 'vue';
import axios from 'axios';export default {name: 'YourComponentName',data() {return {pValue: 100, // 默认 p 标签值为 100pColor: 'black', // 默认 p 标签颜色为黑色showP: true // 默认显示 p 标签};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('/api/Data/GetDataList').then(response => {const data = response.data;// 根据返回的数据进行逻辑判断if (data.number === 1) {this.pValue = 1;this.pColor = 'black'; // 或其他颜色} else if (data.number === 0) {this.pValue = 0;this.pColor = 'red'; // 红色} else {this.showP = false; // 隐藏 p 标签}}).catch(error => {console.error('Error fetching data:', error);});}}
};
</script>
3.v-if
【需求】点击按钮实现隐藏和复现
<template><div><p v-if="showMessage">这是一个消息</p><button @click="toggleMessage">Toggle Message</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 使用 ref 创建响应式数据const showMessage = ref(true);// 切换消息显示状态的方法const toggleMessage = () => {showMessage.value = !showMessage.value;};return {showMessage,toggleMessage};}
};
</script>
4.v-bind : 动态绑定
【需求】v-bind
指令用于动态地绑定 HTML 属性。它可以接收一个 JavaScript 表达式作为参数,将该表达式的结果绑定到指定的 HTML 属性上。
【注释】v-bind可以简写成:
<template><div><!-- 绑定一个动态的class --><div :class="className"></div><!-- 绑定一个动态的style --><div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div><!-- 绑定一个动态的href属性 --><a :href="url">Visit Vue.js website</a><!-- 绑定一个动态的disabled属性 --><button :disabled="isButtonDisabled">Click me</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {// 使用 ref 创建响应式数据const className = ref('box');const textColor = ref('red');const fontSize = ref(16);const url = ref('https://vuejs.org');const isButtonDisabled = ref(false);// 模拟一个事件处理函数const handleClick = () => {isButtonDisabled.value = true;};return {className,textColor,fontSize,url,isButtonDisabled,handleClick};}
};
</script>
三、WebAPI和VUE3
【需求一】后端拿值显示
后端路由:api/GetDataList
返回值:Name
请你在前端中渲染“后端返回的Name是:xxx” 且返回一个状态码200出去
【代码】
<template><div><p>后端返回的Name是:{{ backendName }}</p><p>状态码:{{ statusCode }}</p></div>
</template><script>
import axios from 'axios';export default {data() {return {backendName: '',statusCode: ''};},mounted() {this.fetchData();},methods: {fetchData() {axios.get('api/GetDataList').then(response => {this.backendName = response.data.Name;this.statusCode = response.status;}).catch(error => {console.error('Error fetching data:', error);});}}
};
</script>
【解析】
1.模板通常是由 <template>
标签包裹的一段HTML代码
2.使用axios进行HTTP请求时,axios的get()
方法返回一个Promise对象,这个响应对象通常具有以下结构:
{data: {}, // 响应体数据status: 200, // HTTP状态码statusText: 'OK', // HTTP状态消息headers: {}, // 响应头信息config: {}, // axios请求配置request: {} // XMLHttpRequest实例
}
3. mounted()
钩子函数中,通常用于初始化页面。
4.data()
方法返回的对象是用于声明组件的响应式数据
5.双括号用于js给html传值。
【需求二】后端拿值显示,遍历列表
后端路由:api/GetDataList
返回值:time,DetailData(包含一个列表:List<string> studentname ,一个数字:Status)
请你在前端中渲染“现在的时间是xxx,状态是xxx,打印后端给的studentname :”
<template><div><p>现在的时间是 {{ currentTime }},状态是 {{ status }}</p><ul><li v-for="name in studentNames" :key="name">{{ name }}</li></ul></div>
</template>
<script>
import axios from 'axios';export default {data() {return {currentTime: '', // 用于存储时间status: '', // 用于存储状态studentNames: [] // 用于存储学生名单};},mounted() {this.fetchData(); // 在组件挂载后调用数据获取函数},methods: {async fetchData() {try {const response = await axios.get('api/GetDataList');const data = response.data;this.currentTime = data.time;this.status = data.Status;this.studentNames = data.DetailData.studentname;} catch (error) {console.error('Failed to fetch data:', error);// 在实际应用中可能需要处理请求失败的情况}}}
};</script>
相关文章:
Web开发:VUE3小白开发入门基础笔记
一、基本语法 1.click 后端路由:api/GetDataList 返回值:Value 前端要做的事: ①拿到Value值,传到a标签 ②a标签有一个按钮,每点击一下,Value的值加一。 前端需要用click语法 【代码】 <template>…...
技术周总结 2024.07.15~07.21周日(Spark性能优化)
文章目录 一、07.19 周五1.1)问题01: spark性能优化1.2)问题02: spark是怎么应用在机器学习领域的1.3)问题03:spark自带工具有哪些?1.4)问题04: spark日志的知识点有哪些…...
提高性能的常见技术
1.数据库层面: 读写分离,对于大部分业务来说,读取操作要大于写入,同一个库,既读又写的话,负载会比较重,拆分为读库和写入库,可以降低数据库的负载,分时或延迟将写入的数…...
LeetCode206 反转链表
前言 题目: 206. 反转链表 文档: 代码随想录——反转链表 编程语言: C 解题状态: 有了思路以后没敢尝试 思路 需要注意的是创建指针不会申请额外的内存空间。 代码 方法一: 双指针法/迭代 我的理解是创建了三个指针…...

nginx通过nginx_upstream_check_module实现后端健康检查
1、简介说明 nginx是常用的反向代理和负载均衡服务,具有强大并发能力、稳定性、丰富的功能集、低资源的消耗。 nginx自身是没有针对后端节点健康检查的,但是可以通过默认自带的ngx_http_proxy_module 模块和ngx_http_upstream_module模块中的相关指令来完…...
FastGPT 知识库搜索测试功能解析(二)
目录 一、代码解析 1.1 searchTest.ts 1.2 controller.ts 本文接上一篇文章FastGPT 知识库搜索测试功能解析 对具体代码进行解析。 一、代码解析 FastGPT 知识库的搜索测试功能主要涉及两个文件,分别是 searchTest.ts 和 controller.ts 文件,下面分别进行介绍。 1.1 se…...

双向链表<数据结构 C版>
目录 关于链表的分类 双向链表结构体 初始化 尾插 头插 打印 判断是否为空 尾删 头删 查找 指定位置之后的插入 指定位置的删除 销毁 关于链表的分类 根据链表的三大特性,单向or双向、带头or不带头、循环or不循环,可将链表分为2*2*2…...

react18+
主要是围绕函数式组件讲,18主要用就是函数式组件,学习前先熟悉下原生js的基本使用,主要是事件 1、UI操作 1.1、书写jsx标签语言 基本写法和原生如同一则,只是放在一个方法里面返回而已,我们称这样的写法为函数式组件…...

rk3568 OpenHarmony4.1 Launcher定制开发—桌面壁纸替换
Launcher 作为系统人机交互的首要入口,提供应用图标的显示、点击启动、卸载应用,并提供桌面布局设置以及最近任务管理等功能。本文将介绍如何使用Deveco Studio进行单独launcher定制开发、然后编译并下载到开发板,以通过Launcher修改桌面背景…...
MySQL:送分or送命 varchar(30) 与 int(10)
摘要: VARCHAR(30) 和 INT(10) 在MySQL中代表两种不同类型的字段,它们之间的主要区别在于它们存储的数据类型、存储方式以及显示宽度的含义。 正文: INT(10) 在MySQL中,当你看到INT(10)这样的数据类型定义时,可能会…...

【odoo17】后端py方法触发右上角提示组件
概要 在前面文章中,有介绍过前端触发的通知服务。 【odoo】右上角的提示(通知服务) 此文章则介绍后端触发方法。 内容 直接上代码:但是前提一定是按钮触发!!!!! def bu…...
1775D - Friendly Spiders
题目链接:Friendly Spiders 首先我们可以考虑暴力做法,那就是每两个蜘蛛判断一下gcd,如果不等于1,那就连条边,这样的话时间复杂度是O(n^2),显然超时,因此我们可以采用类似…...

【python】OpenCV—Point Polygon Test
文章目录 1、完整代码2、涉及到的库cv2.pointPolygonTestcv2.minMaxLoc 1、完整代码 from __future__ import print_function from __future__ import division import cv2 as cv import numpy as np # Create an image r 100 src np.zeros((4*r, 4*r), dtypenp.uint8) # 创…...
6 Go语言的常量、枚举、作用域
本专栏将从基础开始,循序渐进,由浅入深讲解Go语言,希望大家都能够从中有所收获,也请大家多多支持。 查看相关资料与知识库 专栏地址:Go专栏 如果文章知识点有错误的地方,请指正!大家一起学习,…...

第十一章 数据结构
第十一章 数据结构 11.1 数组 数组是元素的顺序集合,通常这些元素具有相同的数据类型 索引表示元素在数组中的顺序号,顺序号从数组开始处计数 数组元素通过索引被独立给出了地址,数组整体上有一个名称,但每个元素利用数组的的…...
LeetCode704 二分查找
前言 题目: 704.二分查找 文档: 代码随想录——二分查找 编程语言: C 解题状态: 解答错误,变量定义位置错误。 思路 有序数组的查找,最直接的思路应该就是二分查找。但是在查找的过程中要考虑到区间的边界…...

[言简意赅] Matlab生成FPGA端rom初始化文件.coe
🎎Matlab生成FPGA端rom初始化文件.coe 本文主打言简意赅。 函数源码 function gencoeInitialROM(width, depth, signal, filepath)% gencoeInitialROM - 生成 Xilinx ROM 初始化格式的 COE 文件%% 输入参数:% width - ROM 数据位宽% depth - ROM 数据深度% s…...

【QAC】分布式部署下其他机器如何连接RLM
1、 文档目标 解决分布式部署下其他机器如何连接RLMLicense管理器。 2、 问题场景 分布式部署下QAC要在其他机器上单独运行扫描,必须先连接RLMLicense管理器,如何连接? 3、软硬件环境 1、软件版本:HelixQAC23.04 2、机器环境…...
从等保测评看行业安全趋势:洞察与预测
在当今数字化时代,网络安全已成为各行各业的头等大事。等保测评(等级保护测评),作为国家对信息系统安全的重要管理手段,不仅关乎企业的合规性,更是行业安全水平的重要衡量标准。本文将从等保测评的视角出发…...

HTTP模块(二)
HTTP 设置 HTTP 响应报文 HTTP报文常见属性: const http require(http);const server http.createServer((request, response) > {// 设置请求状态码 2xx 4xx 5xxresponse.statusCode 200;// 设置请求描述 了解即可response.statusMessage hello// 指定响…...
java 实现excel文件转pdf | 无水印 | 无限制
文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...
《Playwright:微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络,将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具,支持 Chrome、Firefox、Safari 等主流浏览器,提供多语言 API(Python、JavaScript、Java、.NET)。它的特点包括&a…...
spring:实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例,也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下: 定义实例工厂类(Java代码),定义实例工厂(xml),定义调用实例工厂ÿ…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...

dify打造数据可视化图表
一、概述 在日常工作和学习中,我们经常需要和数据打交道。无论是分析报告、项目展示,还是简单的数据洞察,一个清晰直观的图表,往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server,由蚂蚁集团 AntV 团队…...
uniapp 字符包含的相关方法
在uniapp中,如果你想检查一个字符串是否包含另一个子字符串,你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的,但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案
在大数据时代,海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构,在处理大规模数据抓取任务时展现出强大的能力。然而,随着业务规模的不断扩大和数据抓取需求的日益复杂,传统…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用
前言:我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM(Java Virtual Machine)让"一次编写,到处运行"成为可能。这个软件层面的虚拟化让我着迷,但直到后来接触VMware和Doc…...
es6+和css3新增的特性有哪些
一:ECMAScript 新特性(ES6) ES6 (2015) - 革命性更新 1,记住的方法,从一个方法里面用到了哪些技术 1,let /const块级作用域声明2,**默认参数**:函数参数可以设置默认值。3&#x…...