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

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 后端路由&#xff1a;api/GetDataList 返回值&#xff1a;Value 前端要做的事&#xff1a; ①拿到Value值&#xff0c;传到a标签 ②a标签有一个按钮&#xff0c;每点击一下&#xff0c;Value的值加一。 前端需要用click语法 【代码】 <template>…...

技术周总结 2024.07.15~07.21周日(Spark性能优化)

文章目录 一、07.19 周五1.1&#xff09;问题01&#xff1a; spark性能优化1.2&#xff09;问题02&#xff1a; spark是怎么应用在机器学习领域的1.3&#xff09;问题03&#xff1a;spark自带工具有哪些&#xff1f;1.4&#xff09;问题04&#xff1a; spark日志的知识点有哪些…...

提高性能的常见技术

1.数据库层面&#xff1a; 读写分离&#xff0c;对于大部分业务来说&#xff0c;读取操作要大于写入&#xff0c;同一个库&#xff0c;既读又写的话&#xff0c;负载会比较重&#xff0c;拆分为读库和写入库&#xff0c;可以降低数据库的负载&#xff0c;分时或延迟将写入的数…...

LeetCode206 反转链表

前言 题目&#xff1a; 206. 反转链表 文档&#xff1a; 代码随想录——反转链表 编程语言&#xff1a; C 解题状态&#xff1a; 有了思路以后没敢尝试 思路 需要注意的是创建指针不会申请额外的内存空间。 代码 方法一&#xff1a; 双指针法/迭代 我的理解是创建了三个指针…...

nginx通过nginx_upstream_check_module实现后端健康检查

1、简介说明 nginx是常用的反向代理和负载均衡服务&#xff0c;具有强大并发能力、稳定性、丰富的功能集、低资源的消耗。 nginx自身是没有针对后端节点健康检查的&#xff0c;但是可以通过默认自带的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版>

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

react18+

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

rk3568 OpenHarmony4.1 Launcher定制开发—桌面壁纸替换

Launcher 作为系统人机交互的首要入口&#xff0c;提供应用图标的显示、点击启动、卸载应用&#xff0c;并提供桌面布局设置以及最近任务管理等功能。本文将介绍如何使用Deveco Studio进行单独launcher定制开发、然后编译并下载到开发板&#xff0c;以通过Launcher修改桌面背景…...

MySQL:送分or送命 varchar(30) 与 int(10)

摘要&#xff1a; VARCHAR(30) 和 INT(10) 在MySQL中代表两种不同类型的字段&#xff0c;它们之间的主要区别在于它们存储的数据类型、存储方式以及显示宽度的含义。 正文&#xff1a; INT(10) 在MySQL中&#xff0c;当你看到INT(10)这样的数据类型定义时&#xff0c;可能会…...

【odoo17】后端py方法触发右上角提示组件

概要 在前面文章中&#xff0c;有介绍过前端触发的通知服务。 【odoo】右上角的提示&#xff08;通知服务&#xff09; 此文章则介绍后端触发方法。 内容 直接上代码&#xff1a;但是前提一定是按钮触发&#xff01;&#xff01;&#xff01;&#xff01;&#xff01; def bu…...

1775D - Friendly Spiders

题目链接&#xff1a;Friendly Spiders 首先我们可以考虑暴力做法&#xff0c;那就是每两个蜘蛛判断一下gcd&#xff0c;如果不等于1&#xff0c;那就连条边&#xff0c;这样的话时间复杂度是O&#xff08;n^2&#xff09;&#xff0c;显然超时&#xff0c;因此我们可以采用类似…...

【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语言的常量、枚举、作用域

本专栏将从基础开始&#xff0c;循序渐进&#xff0c;由浅入深讲解Go语言&#xff0c;希望大家都能够从中有所收获&#xff0c;也请大家多多支持。 查看相关资料与知识库 专栏地址:Go专栏 如果文章知识点有错误的地方&#xff0c;请指正&#xff01;大家一起学习&#xff0c;…...

第十一章 数据结构

第十一章 数据结构 11.1 数组 数组是元素的顺序集合&#xff0c;通常这些元素具有相同的数据类型 索引表示元素在数组中的顺序号&#xff0c;顺序号从数组开始处计数 数组元素通过索引被独立给出了地址&#xff0c;数组整体上有一个名称&#xff0c;但每个元素利用数组的的…...

LeetCode704 二分查找

前言 题目&#xff1a; 704.二分查找 文档&#xff1a; 代码随想录——二分查找 编程语言&#xff1a; C 解题状态&#xff1a; 解答错误&#xff0c;变量定义位置错误。 思路 有序数组的查找&#xff0c;最直接的思路应该就是二分查找。但是在查找的过程中要考虑到区间的边界…...

[言简意赅] Matlab生成FPGA端rom初始化文件.coe

&#x1f38e;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要在其他机器上单独运行扫描&#xff0c;必须先连接RLMLicense管理器&#xff0c;如何连接&#xff1f; 3、软硬件环境 1、软件版本&#xff1a;HelixQAC23.04 2、机器环境…...

从等保测评看行业安全趋势:洞察与预测

在当今数字化时代&#xff0c;网络安全已成为各行各业的头等大事。等保测评&#xff08;等级保护测评&#xff09;&#xff0c;作为国家对信息系统安全的重要管理手段&#xff0c;不仅关乎企业的合规性&#xff0c;更是行业安全水平的重要衡量标准。本文将从等保测评的视角出发…...

HTTP模块(二)

HTTP 设置 HTTP 响应报文 HTTP报文常见属性&#xff1a; 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 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

spring:实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强:基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

从物理机到云原生:全面解析计算虚拟化技术的演进与应用

前言&#xff1a;我的虚拟化技术探索之旅 我最早接触"虚拟机"的概念是从Java开始的——JVM&#xff08;Java Virtual Machine&#xff09;让"一次编写&#xff0c;到处运行"成为可能。这个软件层面的虚拟化让我着迷&#xff0c;但直到后来接触VMware和Doc…...

es6+和css3新增的特性有哪些

一&#xff1a;ECMAScript 新特性&#xff08;ES6&#xff09; ES6 (2015) - 革命性更新 1&#xff0c;记住的方法&#xff0c;从一个方法里面用到了哪些技术 1&#xff0c;let /const块级作用域声明2&#xff0c;**默认参数**&#xff1a;函数参数可以设置默认值。3&#x…...