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

Vue主要使用-03

   组件通讯 

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

      目前我们还是使用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;父组件内包含着我们的子组件,我们的父组件可以有多个子组件,父组件就是我们使用子组件拼接的。 …...

LoadBalance客户端负载均衡

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

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 应用安全、测试和扫描…...

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

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

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

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

图像处理:Python使用OpenCV进行图像锐化 (非锐化掩模、拉普拉斯滤波器)

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

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…...

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

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

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

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

第 6 章: Spring 中的 JDBC

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

[C++ STL] vector 详解

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

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

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

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

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

实时通信websocket和sse

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

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

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

修改SubVI的LabVIEW默认搜索路径

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

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

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

第九站:Java黑——安全编码的坚固防线(第②篇)

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

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

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

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;不是暴力破解的…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

[2025CVPR]DeepVideo-R1:基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈,在多个视频基准上实现SOTA性能 一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战 ​安全措施依赖问题​ GRPO使用min和clip函数限制策略更新幅度,导致: 梯度抑制:当新旧策略差异过大时梯度消失收敛困难:策略无法充分优化# 传统GRPO的梯…...

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

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

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

有限自动机到正规文法转换器v1.0

1 项目简介 这是一个功能强大的有限自动机&#xff08;Finite Automaton, FA&#xff09;到正规文法&#xff08;Regular Grammar&#xff09;转换器&#xff0c;它配备了一个直观且完整的图形用户界面&#xff0c;使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...