vue.js项目实战运用篇之抖音视频APP-第六节：首页视频详情功能

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 500+累计阅读 544平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄8年

关注

VIP免费原创最新推荐文章于 2026-06-03 09:29:43 发布 544 阅读 AI 写同款· GEO 优化 ›

Vue初级总结 vue初步总结阅读详情

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

第六节：首页视频详情功能

详情功能介绍

视频首页的详情信息显示及轮播动画的实现。为了增强功能模块的复用性，此处采用组件进行封装。

组件结构分析

1.组件结构
在这里插入图片描述
2.组件的布局及实现

/*
视频详情信息组件
author:enjsky.g
time:2021-05-06
*/
<template>
  <div class="info-bar">
    <div class="infobar-item">逗逗飞</div>
    <div class="infobar-item">Vue 从0到1 实战</div>
    <div class="infobar-item music-item">
      <span class="iconfont icon-douyinbiaoshishang">

最低0.47元/天解锁文章

收录于

当前文章被以下社区和专栏收录：

标签

#web app #css3 #html5 #javascript #vue.js

Vue.js 2——基础篇（1）《Vue.js实战》——基础篇（1）阅读详情

相关推荐

掌握Vue.js：前端开发的完整项目实战指南

Vue.js是一个渐进式JavaScript框架，它以数据驱动和组件化的思想设计，使得开发者可以轻松上手并快速构建单页应用。其核心库只关注视图层，易于学习，且可以与其他库或现有项目无缝集成。Vue的亮点之一是其简洁的API和直观的响应式系统，它通过数据劫持与虚拟DOM实现高效的数据更新渲染。此外，Vue还具备强大的生态系统，提供如Vue Router、Vuex等扩展库，进一步加强了其作为全栈框架的竞争力。Vue.js不断迭代，保持活跃的社区和优质的文档支持，为开发人员提供了稳定且丰富的开发工具。

weixin_30661119的博客 1073

利用Spm12进行fMRI数据分析：从预处理到结果解读的完整指南

本文提供了利用SPM12进行fMRI数据分析的完整流程指南，涵盖从数据预处理、统计建模到结果解读的全过程。详细介绍了在MATLAB环境下使用SPM12图形界面完成头动矫正、空间标准化等关键步骤的操作方法与避坑技巧，帮助神经科学研究者和心理学研究者高效处理功能磁共振成像数据并产出可靠结果。

weixin_29079671的博客 451

（头歌作业）—6.1 葡萄酒评论分析报告(project)

请读取文件中的数据，完成以下任务：‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬。请读取文件中的数据，完成以下任务：‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬。请读取文件中的数据，完成以下任务：‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‪‬。

2301_80677920的博客 1243

Tessent_StdcellLib

第二种为 Tessent Cell lib，既可用于功能仿真，也可以用于测试逻辑插入。lib包含了用于仿真的功能信息，也包含DFT cell属性。如何使用tessent工具将stdcell verilog 仿真模型转换为tessent自己的lib。运行后工具会生成一个atpg的lib文件，打开文件，找到一个带SI的DFF，只有功能描述。tessnt lib分为两种，第一种为ATBG lib，可以用于仿真；打开生成的lib文件，多了dft_cell_selection。第二部：编写attributes文件。

qq_40411444的博客 2134

基于粒子群算法的PID控制器优化设计

粒子群算法、PID、寻优

qq_46107700的博客 2万+

移动端HDR

移动HDR是近年来移动设备最大的技术进步之一。自2017年起，它就开始出现在旗舰手机上，包括苹果(Apple)和三星(Samsung)在内的大多数制造商都加入了这一行列。这一趋势在过去几年里席卷了整个电视行业，但在最近几年才真正深入人心。而且，最近，将更多的HDR内容放到移动设备上的趋势已经加快。对于这种新兴技术来说，它还处于相对早期的阶段，但它也非常有趣，值得关注。 HDR是什么? HDR是...

ISP行业的忠实粉丝 1339

Pytorch入门教程

Pytorch学习总结:1.张量Tensor 张量是一种特殊的数据结构，与数组和矩阵非常相似。在PyTorch中，我们使用张量对模型的输入和输出以及模型的参数进行编码。张量类似于NumPy的ndarray，除了张量可以在 GPU 或其他硬件加速器上运行。事实上，张量和NumPy数组通常可以共享相同的底层内存，从而无需复制数据。...

专注大数据与人工智能技术分享，欢迎私信加群互相学习！ 4万+

GEE APP：基于Sentinel-1 SAR数据的洪水检测与制图系统：利用GEE平台实现洪涝区域提取、面积统计及矢量栅格化导出

本文介绍了一个基于Google Earth Engine平台的Sentinel-1 SAR洪水监测应用，通过自动化流程实现洪水淹没区域的精准检测与分析。系统采用Refined Lee滤波降噪和Otsu自适应阈值算法，结合SRTM地形数据消除干扰，可自动计算淹没面积并生成可视化结果。该工具提供用户友好的交互界面，支持多格式数据导出，适用于灾害应急响应、环境监测和城市规划等领域，具有云平台处理、算法鲁棒性强和操作简便等技术优势。

此星光明博客 326

Dify与第三方平台(飞书、微信、钉钉)LangBot机器人对接实战

调用链路：飞书用户发消息 → 飞书开放平台事件回调 → LangBot 服务 → Dify 应用接口 → Dify 知识库 + 大模型生成答案 → 原路返回飞书聊天框Dify：承载知识库、提示词配置、大模型调用能力；LangBot：多 IM 渠道适配器，统一对接各大 IM 开放平台与 Dify API；飞书开放平台：提供机器人消息收发、事件推送能力。LangBot 作为中间转发服务，一端对接 Dify 应用 API，一端对接飞书开放平台机器人接口；

悦分享 266

STM32F407中文手册

STM32f407中文手册本参考手册面向应用开发人员，提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微控制器系列，各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性，请参见数据手册。有关 ARM Cortex™-M4F 内核的信息，请参见《Cortex™-M4F 技术参考手册》。