首页-静态结构准备和动态渲染(父组件使用子组件三步骤，请求参数和父组件与子组件的通信）

最新推荐文章于 2024-07-18 15:48:23 发布
最新推荐文章于 2024-07-18 15:48:23 发布
阅读量171 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a4867/article/details/139456927
版权

太久没写过css了，复习一下，要记得在组件的样式中写上lang=”less“和scoped

盒子可以看为左右两部分，左边放图片，右边放产品相关的信息

这里比较有意思的是flex: 1，当我们设置好图片后，我们可以用flex: 1 将剩下的空间分配给信息盒子

注意！父组件中用子组件有三步 1.导入子组件 2.在script中声明component 3.使用组件

接下来就是请求数据

还是一样，把接口封装到api --> 然后父组件请求数据 -->接着子传父传递数据即可

有需要参数，在方法中额外写params

获取到的数据

拔掉一层data，学习写法

最后就是父传子，组件通信

a4867
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
compose-server-side：使用compose和ktor试用服务器端渲染
02-05
在本文中，我们将深入探讨如何使用Compose和Ktor实现服务器端渲染。Compose是Jetpack库的一部分，主要用于构建Android用户界面，而Ktor是一款由JetBrains开发的轻量级、高性能的服务器端应用框架，适用于构建Web服务...
note-app-django-vue-javascript：使用django和vue.js的笔记应用程序的示例
01-30
**django-vue** 可能是一个特定的Django和Vue集成库，它可能简化了Vue在Django项目中的集成，包括静态文件处理和模板渲染。 **BootstrapJavaScript** 指的是Bootstrap框架中的JavaScript插件，如Modal、Dropdown和...
Nuxt 3组件开发与管理
06-20 677
摘要：本文深入探讨了Nuxt 3的组件开发与管理，从基础概念、安装配置、目录结构、组件分类与开发实践、生命周期与优化，到测试与维护策略。详细介绍了Nuxt 3的核心特点，如服务器端渲染（SSR）、静态站点生成（SSG）以及与Vue生态系统的无缝集成。文章以Nuxt 3为基础，指导开发者如何高效构建高性能、可维护的Vue应用程序。内容涵盖了基本组件的定义与分类、独立组件与函数式组件的示例、Props和Slots的使用、Composition API的引入，以及组件的生命周期与优化方法。同时，文章还提供了组件开
React-18(组件化开发) -- 生命周期与父子组件间通信
聪明勇敢有力气的博客
11-27 1464
React-18(组件化开发) -- 生命周期与父子组件间通信
React 18 组件通信 将props传递给子组件
jyn15159的博客
06-02 1454
要传递 props，请将它们添加到 JSX，就像使用 HTML 属性一样。要读取 props，请使用解构语法。可以指定一个默认值，如size = 100，用于缺少值或值为undefined的 props。可以使用JSX 展开语法转发所有 props，但不要过度使用它！像这样的嵌套 JSX，将被视为Card组件的childrenprop。Props 是只读的时间快照：每次渲染都会收到新版本的 props。不能改变 props。当需要交互性时，可以设置 state。
Vue.js学习 Item11 – 组件与组件间的通信
小平果的欢乐谷
07-11 3436
什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。使用组件注册之前说过，我们可以用 Vue.extend() 创建一个组件构造器：var MyComponent = Vue.exten
demo-springboot-angular:使用Maven在单个存储库中管理Spring和Angular项目的示例存储库
04-17
而Angular负责前端展示，通过HTTP请求与Spring Boot应用通信，获取数据并渲染视图。两者之间的通信通常基于JSON格式的HTTP请求。 在开发过程中，开发者可能会使用Spring Boot的Actuator模块进行健康检查和监控，...
静态微信页面
12-18
7. **网络请求**: 使用axios或fetch API与后端API进行交互，获取或更新用户信息、聊天记录等数据。 8. **导航**: 为了在不同的页面之间导航，可以使用React Navigation库，它提供了多种导航方案，如StackNavigator...
DandD-Frontend:调度和交付前端仓库
04-18
《DandD-Frontend：调度与交付前端仓库解析》 DandD-Frontend，全称为“调度和交付前端仓库”，是一个专为在线订单交付服务设计的Web应用程序的前端部分。这个项目的核心目标是提供一个高效、用户友好的界面，使...
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
最新发布
yrldjsbk的博客
07-18 356
除了必要的import导入之外，剩余的就是直接调用了，赋值了。经历过上一次的，新鲜好物的栏目渲染之后，我们已经熟练了，vue3的接口调用，数据渲染到页面中的整体流程。如图，我们已经做好了，列表的渲染赋值。里面可以看见，顶部是脚本，中间是模板，底部是样式。在首页面，内容里面，会看见很多内容，上期内容我们已经完成了新鲜好物的渲染操作。1：打开接口文档，查询：人气推荐栏目的接口地址信息和参数，返回值对象信息等。以上内容就是，已经写好的，HomeHot的模板代码了。如图，地址信息和调用的方式已经清楚了。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1296
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
【前端】JavaScript入门及实战6-10
weixin_45980065的博客
07-17 569
如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，typeof是number。NaN是一个特殊的数字，不是数字：not a number，是一个字面量，typeof是number。但是注意，null和undefined这两个值没有toString()方法，如果调用会报错。它会将null直接转换为"null"，将undefined直接转换为"undefined"当声明一个变量，但是并不给变量赋值时，它的值就算undefined。该方法不会影响原变量，它会将转换的结果返回。
【Vue】 style中的scoped
DX390609的博客
07-15 168
在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。
cookies,sessionStorage和localStorage都有什么区别
qq_51856496的博客
07-17 302
cookies,sessionStorage和localStorage都有什么区别 cookies在请求数据传输的时候会携带至后台，sessionStorage,localStorage是纯客户端缓存 cookies有过期机制,sessionStorage是会话级缓存，窗口关闭后会销毁，localStorage是本地持久缓存手动才会清除 cookies只能存储4KB并且不推荐前端用js直接操作，sessionStorage,localStorage存储有5MB
ReactRouter v6升级的步骤
feixin369的博客
07-14 430
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
(三)js前端开发中设计模式之工厂模式
峰会路转的博客
07-17 256
工厂模式是一种创建型设计模式，它可以帮助我们根据需求创建对象。
使用 Vue3、Node.js、MySQL、Electron 和 Express 实现用户登录、文章管理和截屏功能
liyananweb的博客
07-15 666
通过本文，我们详细介绍了如何使用 Vue3、Node.js、MySQL、Electron 和 Express 实现一个完整的用户登录、文章管理和截屏功能的应用。希望这篇文章能为你提供有价值的参考，帮助你更好地理解和实现前后端分离的应用开发。如果你有任何问题或建议，欢迎在评论区留言讨论。
前端工具-json-server
zhangankang的博客
07-14 168
以项目为例，介绍前端mock数据的方式；
vue nginx伪静态
05-04
Vue是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得开发者可以轻松地构建可复用的UI组件。Vue可以与后端服务器进行通信，获取数据并动态更新页面。 Nginx是一个高性能的Web服务器，也可以用作反向代理服务器。伪静态是指在URL中隐藏文件的真实路径，使得URL看起来像是静态文件，但实际上是通过服务器动态生成的。在Vue项目中，可以使用Nginx的伪静态功能来处理路由请求。 要实现Vue和Nginx的伪静态，可以按照以下步骤进行配置： 1. 在Nginx的配置文件中，找到`location`块，并添加以下配置： ``` location / { try_files $uri $uri/ /index.html; } ``` 这将使Nginx在找不到具体文件时，将请求转发到Vue的入口文件index.html。 2. 确保Vue项目已经构建完成，并将构建后的文件放置在Nginx的静态文件目录下。 3. 重启Nginx服务器，使配置生效。 这样配置后，当用户访问Vue应用的URL时，Nginx会将请求转发到Vue的入口文件index.html。然后，Vue的路由系统会根据URL解析出对应的组件，并动态渲染到页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值