当前位置: 首页 > 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// 指定响…...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

React第五十七节 Router中RouterProvider使用详解及注意事项

前言 在 React Router v6.4 中&#xff0c;RouterProvider 是一个核心组件&#xff0c;用于提供基于数据路由&#xff08;data routers&#xff09;的新型路由方案。 它替代了传统的 <BrowserRouter>&#xff0c;支持更强大的数据加载和操作功能&#xff08;如 loader 和…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

CMake控制VS2022项目文件分组

我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...