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

Vue主要使用-03

news 2025/7/4 8:44:15

   组件通讯 

       组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件？父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。   

      目前我们还是使用html开发,因为使用模板的话,我们是初步认识vue,需要深入了解

     父传子

          首先我们需要确保我们的定义的组件是没有问题的,我们定义了一个组件 my-aaa 这个是子组件,而我们的父组件就是app这个组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app"><my-aaa></my-aaa></div><template id="tmp"></template><script>const app=Vue.createApp({components: {"my-aaa":{template:"#tmp",}},})app.mount("#app")</script></body>
</html>

      我们想要从父组件传值给子组件,需要给父组件定义一个数据,假如父亲有100元,他要给儿子,他儿子就是 my-son,如何给他呢? 我们需要用到绑定指令,绑定父亲的100元,然后有一个自定义的属性，将父亲的100元赋值给自定义属性 

  可以这样理解：在父亲心里100块钱是钱,而父亲给儿子之后,可能儿子不觉得是钱,而是能买很多东西

   父亲给儿子100块钱,儿子是需要去接住的，所以我们就使用到了 props属性,用于接收外部传来的数据,因为可能不只是一个数据，所以使用数组的形式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app">父亲有 {{money}}元 <br><my-aaa :sonmoney=money></my-aaa></div><template id="tmp">儿子问爸爸要了{{sonmoney}}元</template><script>const app=Vue.createApp({data(){return{money:1000}},components: {"my-aaa":{template:"#tmp",props:["sonmoney"]}},})app.mount("#app")</script></body>
</html>

  子传父

     儿子传给父亲,这时我们是需要有一个点击事件来完成的, 因为定义一个按钮,点击之后,会将这个方法,与父组件的方法绑定

      emits: 我们自定义声明的事件,是需要在emits中声明使用的,也可以不加,但是有时候会报警告

     步骤: 当我们点击按钮时,emit("自定义事件名",参数) 会与我们父组件的getToy进行绑定,点击儿子内的按钮,我们的父组件定义的getToy方法就会生效,在儿子内传的参数在getToy的参数内

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app">父亲的玩具: {{toyson}}<xue-cheng @send-toy="getToy"></xue-cheng></div><template id="son">儿子的玩具: {{toy}} <br><button @click="$emit('send-toy',toy)">儿子给父亲玩具</button></template><script>const app = Vue.createApp({data() {return {toyson: ""}},methods: {getToy(val) {this.toyson = val}},components: {"xue-cheng": {data() {return {toy: "奥特曼"}},emits: ["send-toy"],template: "#son"}}})app.mount("#app")</script></body>
</html>

Axios 

       Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

     中文文档 https://www.axios-http.cn/docs/intro

      他与Ajax的使用是很相似的,但是ajax只支持get和post请求,我们的Axios是基本所有的请求都支持的,所以我们需要使用到Axios

   get

     我们直接上案例

    首先我们需要的后端需要先可以获取我们数据,这个参数是我们定义的分页,这里可以和我不一样，只要能访问到数据就可以

 

      首先我们先要使用axios,因为我们是使用html编写的,所以需要有一个axios的包

     这里我们有网的话,可以使用外网导入资源

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    这里我们实现的是,点击按钮之后,向后端请求数据,请求成功之后,将数据放入我们定义的数据内,然后进行展示

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script><script src="../static/axios.min.js"></script></head><body><div id="app">{{empList}}<button @click="getEmp">获取数据</button></div><script>const app = Vue.createApp({data() {return {empList: []}},methods: {getEmp() {axios.get("http://localhost:8082/queryAll", {params: {currPage: 1,pageSize: 2}}).then(res=>{console.log(res)this.empList=res.data.list})}}})app.mount("#app")</script></body>
</html>

这里我们可以了解到,我们的axios的使用： axios.请求方式（请求路径,{    配置   }）.then（function (响应){   操作   }）

     

     这里明显是说我们是存在跨域问题的,是浏览器拦截了我们,不让我们进行跨域,这里可以理解为,你要去一个陌生人家里拿东西,难道不会被拦住吗？ 

    出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响

    当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

  这里我们可以在后端解决一下跨域，在你想要跨域的方法上或者类上添加CrossOrigin注解即可

 这就是我们响应的数据,我们想要的数据在data里     

当我们点击按钮之后会将我们的数据展示出来
 

post


如果我们使用post的请求是有一点不一样的，我们就用这个接口请求我们的数据

首先我们需要知道post请求的传参方式是传的json数据,而我们后端是一个java对象,所以我们需要使用一个注解,将我们的json格式的数据转换成java对象 RequestBody 放在参数前面

 那我们在前端是如何定义一个json数据传到前端呢,我们可以看到与get相比起是不用加params属性的
	axios.post("http://localhost:8082/add", {stuname: "niuer",sex: "男"}).then(res=>{console.log(res.data)})

  代表我们已经成功了

VueRouter 

     客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载

    Vue Router 基于 Vue 的组件系统构建，可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件

   首先我们先定义两个组件,当我们点击 a的时候出现 A组件,当点击b的时候出现B组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="../static/vue.global.js"></script></head><body><div id="app"></div><template id="a"><h1>这是一个组件A</h1></template><template id="b"><h1>这是一个组件B</h1></template><script>const app = Vue.createApp({})app.mount("#app")</script></body>
</html>

       我们是需要通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件，要使用路由需要引入vue的路由资源,我们的路由不可能是有一个路由的,我们需要根据格式来编写配置路由,如果监听到你要去 /a的话,就给你展示a组件,b组件也是

const router=VueRouter.createRouter({history:VueRouter.createWebHashHistory(),routes:[{path:"/a",component:{template:"#a"}},{path:"/b",component:{template:"#b"}	}]})

   不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能,RouterLink的本意还是a标签,

  RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。

     当你点击a这个a标签的时候,Vue的路由会监听到你要去到 /a 下,/a在你配置的路由中,指向了一个组件,他会给你展示那个组件,但是要展示在哪里也是需要你自己定义,使用RouterView

	<div id="app"><router-link to="/a">a</route-link> <br><router-link to="/b">b</route-link><router-view></route-view></div>

相关文章：

Vue主要使用-03

组件通讯 组件通讯也是我们需要了解的,在我们的实际开发中,我们使用的非常多,比如父组件内的数据传入到子组件,子组件的数据传入到父组件,什么是父组件什么是子组件&#xff1f;父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。 …...

编程日记 2024/6/17 0:00:42

LoadBalance客户端负载均衡

1. 前言Ribbon Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡的工具。简单的说&#xff0c;Ribbon是Netflix发布的开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的配置项如连接超时&#xff0…...

编程日记 2024/6/16 23:59:41

Burp Suite Professional 2024.5 (macOS, Linux, Windows) - Web 应用安全、测试和扫描

Burp Suite Professional 2024.5 (macOS, Linux, Windows) - Web 应用安全、测试和扫描 Burp Suite Professional, Test, find, and exploit vulnerabilities. 请访问原文链接&#xff1a;Burp Suite Professional 2024.5 (macOS, Linux, Windows) - Web 应用安全、测试和扫描…...

编程日记 2024/6/16 23:58:40

逢3必过报数游戏-第13届蓝桥杯省赛Python真题精选

[导读]&#xff1a;超平老师的Scratch蓝桥杯真题解读系列在推出之后&#xff0c;受到了广大老师和家长的好评&#xff0c;非常感谢各位的认可和厚爱。作为回馈&#xff0c;超平老师计划推出《Python蓝桥杯真题解析100讲》&#xff0c;这是解读系列的第84讲。 逢3必过报数游戏&…...

编程日记 2024/6/16 23:57:39

解决Qt的multimedia库在clion中依赖库补全的问题

解决Qt的multimedia库在clion中使用报错的问题 在clion中&#xff0c;使用Qt的multimedia库时会报如下错误&#xff1a; defaultServiceProvider::requestService(): no service found for - "org.qt-project.qt.mediaplayer" 我猜测出现这个错误的原因很可能是因为…...

编程日记 2024/6/16 23:56:37

图像处理：Python使用OpenCV进行图像锐化 （非锐化掩模、拉普拉斯滤波器）

文章目录 非锐化掩模 (Unsharp Masking)拉普拉斯滤波器 (Laplacian Filter)效果对比总结 在图像处理中&#xff0c;锐化操作用于增强图像的边缘和细节&#xff0c;使图像看起来更清晰。常见的图像锐化方法包括非锐化掩模&#xff08;Unsharp Masking&#xff09;和拉普拉斯滤波…...

编程日记 2024/6/16 23:55:36

windows用脚本编译qt的项目

mingw的 cd build ::设置jom环境 set PATHC:\Qt\Qt5.15.2\Tools\mingw810_32\bin;%PATH% set PATHC:\Qt\Qt5.15.2\5.15.2\mingw81_32\bin;%PATH% ::设置Qt环境 amd64_x86 或者 amd64 ::CALL "D:\Program Files (x86)\Microsoft Visual Studio\2017\Enterprise\VC\Auxilia…...

编程日记 2024/6/16 23:53:33

mybatis-plus使用拦截器实现sql完整打印

shigen坚持更新文章的博客写手&#xff0c;擅长Java、python、vue、shell等编程语言和各种应用程序、脚本的开发。记录成长&#xff0c;分享认知&#xff0c;留住感动。 个人IP&#xff1a;shigen 在使用mybatis-plus&#xff08;mybatis&#xff09;的时候&#xff0c;往往需要…...

编程日记 2024/6/16 23:51:31

GPT-4并非世界模型，LeCun双手赞同！ACL力证LLM无法模拟真实世界

一直以来&#xff0c;支持LLM的观点之一是模型可以集成海量事实知识&#xff0c;作为通往「世界模拟器」的基础。虽然也有不少反对意见&#xff0c;但缺乏实证依据。那么&#xff0c;LLM能否作为世界模拟器&#xff1f; 最近&#xff0c;亚利桑那大学、微软、霍普金斯大学等机构…...

编程日记 2024/6/16 23:50:29

第 6 章: Spring 中的 JDBC

JDBC 的全称是 Java Database Connectivity&#xff0c;是一套面向关系型数据库的规范。虽然数据库各有不同&#xff0c;但这些数据库都提供了基于 JDBC 规范实现的 JDBC 驱动。开发者只需要面向 JDBC 接口编程&#xff0c;就能在很大程度上规避数据库差异带来的问题。Java 应用…...

编程日记 2024/6/16 23:49:26

[C++ STL] vector 详解

标题&#xff1a;[C STL] vector 详解 水墨不写bug 目录 一、背景 二、vector简介 三、vector的接口介绍 &#xff08;1&#xff09;默认成员函数接口 i&#xff0c;构造函数&#xff08;constructor&#xff09; ii&#xff0c;析构函数&#xff08;destructor&#xff0…...

编程日记 2024/6/16 23:48:24

PHP简约轻型聊天室留言源码

无名轻聊是一款phptxt的轻型聊天室。 无名轻聊特点&#xff1a; 自适应电脑/手机 数据使用txt存放&#xff0c;默认显示近50条聊天记录 采用jqueryajax轮询方式&#xff0c;适合小型聊天环境。 访问地址加?zhi进入管理模式&#xff0c;发送 clear 清空聊天记录。 修改在…...

编程日记 2024/6/16 23:46:21

代码随想录算法训练营day23|669.修剪二叉搜索树、108.将有序数组转换为二叉搜索树、538.把二叉搜索树转换为累加树

669.修剪二叉搜索树 这道题目需要考虑当前节点是否在[low,high]之间&#xff0c; 因为是平衡二叉树&#xff0c; 所以当当前节点值小于low时&#xff0c;那么其左节点肯定更小&#xff0c;因此删除该节点的方式是给root节点返回其右节点的递归&#xff0c;注意&#xff1a;这里…...

编程日记 2024/6/16 23:44:18

实时通信websocket和sse

microsoft/fetch-event-source是一个JavaScript库&#xff0c;用于处理服务器发送的事件&#xff08;Server-Sent Events&#xff0c;简称SSE&#xff09;。它提供了一个简单易用的API&#xff0c;使得客户端可以与服务器进行实时通信。这个库主要用于浏览器环境 安装依赖npm i…...

编程日记 2024/6/16 23:43:16

（超详细）基于动态顺序表实现简单的通讯录项目

前言&#xff1a; 我们在上一章节用c语言实现了线性表中的的动态顺序表&#xff0c;那么顺序表就只是顺序表吗&#xff1f;当然不是&#xff0c;使用顺序表结构可以实现很多项目&#xff0c;许多项目的数据结构都会用到顺序表&#xff0c;本章节我们就要使用顺序表实现一个简易…...

编程日记 2024/6/16 23:41:15

修改SubVI的LabVIEW默认搜索路径

在启动顶级VI后&#xff0c;LabVIEW可能会遇到找不到subVI的情况。这通常是由于subVI的路径发生了变化或没有被正确配置。 LabVIEW默认搜索路径 默认情况下&#xff0c;LabVIEW会按以下顺序搜索文件位置&#xff08;*表示LabVIEW将搜索子目录&#xff09;&#xff1a; <t…...

编程日记 2024/6/16 23:39:12

基于python深度学习的CNN图像识别鲜花-含数据集+pyqt界面

代码下载&#xff1a; https://download.csdn.net/download/qq_34904125/89383615 本代码是基于python pytorch环境安装的。 下载本代码后&#xff0c;有个requirement.txt文本&#xff0c;里面介绍了如何安装环境&#xff0c;环境需要自行配置。 或可直接参考下面博文进行…...

编程日记 2024/6/16 23:38:11

第九站：Java黑——安全编码的坚固防线（第②篇）

4. 验证和过滤输入数据示例&#xff1a;使用Apache Commons Lang 对输入数据进行验证和过滤是防止多种安全漏洞的关键步骤&#xff0c;包括但不限于SQL注入和命令注入。Apache Commons Lang库提供了一些实用方法来帮助进行字符串操作和验证。以下是一个简单的示例&#xff0c;…...

编程日记 2024/6/16 23:37:09

如何优雅的删除正式环境中的大表

引起 MySQL 数据库性能抖动的原因有很多，比如大事务、定时批量查询等，而这些原因我们一般都会注意到。但是，有一个引起性能抖动的原因却经常被我们忽视，那就是在生产环境删除无用的大表，即 DROP TABLE。 一、为什么要 DROP TABLE？ 生产环境中，为什么要 DROP TABLE？相…...

编程日记 2024/6/16 23:36:08

Vulnhub-DC-1,7

靶机IP:192.168.20.141 kaliIP:192.168.20.128 网络有问题的可以看下搭建Vulnhub靶机网络问题(获取不到IP) 前言 1和7都是Drupal的网站&#xff0c;只写了7&#xff0c;包含1的知识点 信息收集 用nmap扫描端口及版本号 进入主页查看作者给的提示&#xff0c;不是暴力破解的…...

编程日记 2024/6/16 23:35:07

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

编程新知 2025/6/26 0:06:54

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/7/4 2:16:32

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/6/26 8:37:19

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/6/25 2:04:34

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/7/2 17:10:27

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/6/24 6:43:34

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/6/27 11:49:11

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/6/17 4:17:05

dify打造数据可视化图表

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

编程新知 2025/6/29 6:30:28

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/6/21 22:57:04