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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49676.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《0基础》学习Python——第十八讲__爬虫/<1>

一、什么是爬虫 爬虫是一种网络数据抓取的技术。通过编写程序&#xff08;通常使用Python&#xff09;&#xff0c;爬虫可以自动化地访问网页&#xff0c;解析网页内容并提取出所需的数据。爬虫可以用于各种用途&#xff0c;如搜索引擎的索引&#xff0c;数据分析和挖掘&#x…

Vue 3项目安装Element-Plus

Element Plus 是一个基于 Vue 3 的现代前端UI框架&#xff0c;它旨在提升开发体验&#xff0c;并为开发者提供高效、优雅的组件。如果你正在使用 Vue 3 进行项目开发&#xff0c;那么安装和集成 Element Plus 是一个不错的选择。在本文中&#xff0c;博主将详细介绍如何在 Vue …

[嵌入式Linux]-常见编译框架与软件包组成

嵌入式常见编译框架与软件包组成 1.嵌入式开发准备工作 主芯片资料包括&#xff1a; 主芯片资料 主芯片开发参考手册&#xff1b;主芯片数据手册&#xff1b;主芯片规格书&#xff1b; 硬件参考 主芯片硬件设计参考资料&#xff1b;主芯片配套公板硬件工程&#xff1b; 软件…

OD C卷 - 数据单元的变量替换

数据单元的变量替换&#xff08;100&#xff09; 输入描述&#xff1a; 输入一行数据&#xff0c;用逗号分割每个单元格&#xff0c;尾部没有逗号&#xff0c;最多26个单元格&#xff0c;对应编号A-Z&#xff1b;每个单元格内容&#xff1a;字母、数字、<> 单元格引用&…

linux 公平调度关键点记录

1.如何计算进程的物理运行时间和虚拟运行时间 调度周期(sched period)nice valuerealruntime(实际运行时间)vruntime(虚拟运行时间)10ms05ms5ms05ms5ms10ms-209.996ms0.1153ms150.004ms0.11378ms可以看到对于-20和15两个进程的情况下,其虚拟运行时间是基本相同的,这正式cf…

今天我们聊聊C#的并发和并行

并发和并行是现代编程中的两个重要概念&#xff0c;它们可以帮助开发人员创建高效、响应迅速、高性能的应用程序。在C#中&#xff0c;这些概念尤为重要&#xff0c;因为该语言提供了对多线程和异步编程的强大支持。本文将介绍C#中并发和并行编程的关键概念、优点&#xff0c;并…

如何使用录屏软件录制声音?超实用的4个电脑录屏方法!

在现代的数字时代&#xff0c;录屏软件已经成为我们日常工作和学习中不可或缺的工具之一。无论是制作教学视频、演示软件功能&#xff0c;还是记录游戏过程&#xff0c;录屏软件都能提供极大的帮助。但许多人在使用录屏软件时&#xff0c;可能会遇到一个问题&#xff1a;如何将…

Godot游戏制作 03世界构建1.0版

在game场景&#xff0c;删除StaticBody2D节点&#xff0c;添加TileMap节点 添加TileSet图块集 添加TileSet源 拖动图片到图块&#xff0c;自动创建图块 使用橡皮擦擦除。取消橡皮擦后按住Shift创建大型图块。 进入选择模式&#xff0c;TileMap选择绘制&#xff0c;选中图块后在…

Leetcode 721.账户合并(hash+dfs)☆

思路&#xff1a; 最核心的地方在于如何合并&#xff1f;这里是通过具有相同的email进行账户的合并&#xff0c;这个相同的email类似于图中的共同节点将两个账户连接起来&#xff0c;所以将原来 账户名 -> 邮件1 邮件2.。。变成hash 邮件1 ->账户id1&#xff0c;账户id2…

Meta革命性发布:Llama 3.1——性能最强的AI开源模型,开启智能新时代!

前言 &#x1f680; Meta隆重推出Llama 3.1&#xff1a;迄今为止性能最强的AI模型 Meta公司近日发布了他们最新的AI语言模型——Llama 3.1&#xff0c;这一消息迅速在科技界掀起了波澜。作为猫头虎技术团队&#xff0c;我们将为大家详细解析Llama 3.1的强大功能及其应用前景。…

Android APP 音视频(02)MediaProjection录屏与MediaCodec编码

说明&#xff1a; 此MediaProjection 录屏和编码实操主要针对Android12.0系统。通过MediaProjection获取屏幕数据&#xff0c;将数据通过mediacodec编码输出H264码流&#xff08;使用ffmpeg播放&#xff09;&#xff0c;存储到sd卡上。 1 MediaProjection录屏与编码简介 这里…

HTML5 + CSS3

HTML 基础 准备开发环境 1.vscode 使用 新建文件夹 ---> 左键拖入 vscode 中 2.安装插件 扩展 → 搜索插件 → 安装打开网页插件&#xff1a;open in browser汉化菜单插件&#xff1a;Chinese 3.缩放代码字号 放大,缩小&#xff1a;Ctrl 加号&#xff0c;减号 4.设…

机械设计基础B(学习笔记)

绪论 机构&#xff1a;是一些具备各自特点的和具有确定的相对运动的基本组合的统称。 组成机构的各个相对运动部分称为构件。构件作为运动单元&#xff0c;它可以是单一的整体&#xff0c;也可以是由几个最基本的事物&#xff08;通常称为零件&#xff09;组成的刚性结构。 构件…

机器学习笔记1——监督学习和无监督学习

一、机器学习的定义 1.机器学习的定义&#xff1a;计算机程序从经验E中学习&#xff0c;解决某一任务T进行某一性能度量P&#xff0c;通过P测定在T上的表现因经验E而提高。 2.在各种不同类型的学习算法中&#xff0c;主要分为监督学习和无监督学习。 监督学习&#xff1a;就是我…

面试题---Mybatis

Mybatis MyBatis中${}取值和#{}取值的区别 {}能够防止SQL注入&#xff0c;因为底层使用PreparedStatement对象&#xff0c;预编译&#xff0c;性能较高 ${}不能防止SQL注入&#xff0c;因为底层使用Statement对象&#xff0c;不会预编译而是拼接字符串&#xff0c;性能较低 …

华杉研发九学习日记17 正则表达式 异常

华杉研发九学习日记17 一&#xff0c;正则表达式 ^ $ 作用&#xff1a; 测试字符串内的模式(匹配) 例如&#xff0c;可以测试输入字符串&#xff0c;以查看字符串内是否出现电话号码模式或信用卡号码模式。这称为数据验证. 替换文本&#xff08;替换》 可以使用正则表达式来…

vue3 学习笔记17 -- 基于el-menu封装菜单

vue3 学习笔记17 – 基于el-menu封装菜单 前提条件&#xff1a;组件创建完成 配置路由 // src/router/index.ts import { createRouter, createWebHashHistory } from vue-router import type { RouteRecordRaw } from vue-router export const Layout () > import(/lay…

PyTorch 2.0 GPU Nvidia运行库的安装

【图书推荐】《PyTorch深度学习与计算机视觉实践》-CSDN博客 假设读者电脑带有NVIDIA 20 以上系列的显卡。 我们以CUDA 11.7cuDNN 8.2.0&#xff08;其他更高版本的组合&#xff0c;读者可以执行查阅PyTorch官网获得&#xff09;为例&#xff0c;讲解PyTorch 2.0 GPU版本的安…

rt_container_of 作用和实现过程超级详解介绍

目录 作用 ptr 获取 偏移size获取 函数作用 我们先看段代码,了解rt_container_of有什么用处&#xff1a; #include "stdio.h" #define rt_container_of(ptr, type, member) \((type *)((char *)(ptr) - (unsigned long)(&((type *)0)->member)))struct ST…

Chrome谷歌浏览器Console(控制台)显示文件名及行数

有没有这样的困扰&#xff1f;Chrome谷歌浏览器console(控制台)不显示编译文件名及行数? 设置&#xff08;Settings&#xff09;- > 忽略列表&#xff08;lgnore List&#xff09;-> 自定义排除规则&#xff08;Custom exclusion rules&#xff09; 将自定义排除规则…