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

Vue主要使用-03

news 2026/3/26 21:17:46

   组件通讯 

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

      目前我们还是使用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

3步实现会呼吸的界面边界：让表单交互体验提升300%的动态效果

3步实现会呼吸的界面边界&#xff1a;让表单交互体验提升300%的动态效果 【免费下载链接】motion-primitives UI kit to make beautiful, animated interfaces, faster. Customizable. Open Source. 项目地址: https://gitcode.com/gh_mirrors/mo/motion-primitives 在现…...

编程新知 2026/3/26 20:01:35

实战数据可视化：基于快马平台构建小龙虾销售趋势分析看板

实战数据可视化&#xff1a;基于快马平台构建小龙虾销售趋势分析看板 最近帮朋友的小龙虾连锁店做数据分析&#xff0c;发现传统Excel报表根本满足不了实时决策的需求。老板们需要一眼就能看懂销售趋势、口味偏好和地区差异&#xff0c;于是我尝试用InsCode(快马)平台快速搭建…...

编程新知 2026/3/26 19:59:35

2026年AI大爆发：DeepSeek、Claude、Gemini三强鼎立，智能体应用成为新战场

进入2026年&#xff0c;AI领域迎来前所未有的激烈竞争格局。DeepSeek凭借极低的训练成本和开源策略强势出圈&#xff0c;R1模型在推理能力上直追GPT-o1&#xff0c;引发全球AI圈震动&#xff1b;Anthropic的Claude 3.7 Sonnet推出了扩展思考模式&#xff0c;在代码和复杂推理任…...

编程新知 2026/3/26 19:51:33

抖音无水印视频批量下载器：从零开始的高效内容采集指南

抖音无水印视频批量下载器&#xff1a;从零开始的高效内容采集指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 你是否曾遇到过这样的困境&#xff1f;想要保存抖音上的精彩视频用于学习参考&#xff0c;…...

编程新知 2026/3/26 19:35:25

SEO_移动端SEO优化的关键步骤与注意事项介绍

<h1 id"seo">移动端SEO优化的关键步骤与注意事项介绍</h1> <p>在互联网时代&#xff0c;移动端已经成为用户访问网站的主要途径。因此&#xff0c;移动端SEO优化变得尤为重要。本文将详细介绍移动端SEO优化的关键步骤与注意事项&#xff0c;帮助你…...

编程新知 2026/3/26 19:20:58

Python 3.13 + CUDA 13.0编译轮子

核心工具链安装 1、安装 Visual Studio 2022 (勾选 “使用 C 的桌面开发”) 2、安装 CUDA Toolkit 13.0环境变量注入 在终端执行&#xff0c;确保编译器能精准定位 CUDA 路径&#xff1a;set CUDA_PATHD:\Program Files\NVIDIA_GPU_Computing_Toolkit\v13 set PATH%CUDA_PATH%\…...

编程新知 2026/3/26 18:52:40

自然滚动的终结：Scroll Reverser如何重构输入设备交互逻辑

自然滚动的终结&#xff1a;Scroll Reverser如何重构输入设备交互逻辑 【免费下载链接】Scroll-Reverser Per-device scrolling prefs on macOS. 项目地址: https://gitcode.com/gh_mirrors/sc/Scroll-Reverser 在追求无缝人机交互的今天&#xff0c;macOS系统中输入设备…...

编程新知 2026/3/26 18:01:55

不止于集成：在RuoYi-Camunda流程设计器中实现自定义属性面板与FEEL表达式校验

深度定制RuoYi-Camunda流程设计器&#xff1a;从属性面板扩展到FEEL表达式校验实战 当标准BPMN设计器无法满足复杂业务需求时&#xff0c;定制化开发成为必经之路。某跨国零售企业的审批系统曾因无法在流程节点上定义"区域经理审批阈值"字段&#xff0c;导致每次业务…...

编程新知 2026/3/26 17:03:19

高效USB设备管理工具：一键安全弹出的专业解决方案

高效USB设备管理工具&#xff1a;一键安全弹出的专业解决方案 【免费下载链接】USB-Disk-Ejector A program that allows you to quickly remove drives in Windows. It can eject USB disks, Firewire disks and memory cards. It is a quick, flexible, portable alternative…...

编程新知 2026/3/26 16:25:08

BilibiliDown终极实战指南：解锁B站视频批量下载的完整方案

BilibiliDown终极实战指南&#xff1a;解锁B站视频批量下载的完整方案 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader &#x1f633; 项目地址: https://gitcode.com/gh_mirro…...

编程新知 2026/3/26 16:23:08