Vue学习日记

最新推荐文章于 2026-01-04 20:02:54 发布

原创最新推荐文章于 2026-01-04 20:02:54 发布 · 273 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html5 #css3

这篇博客探讨了如何设置页面的上下左右边距，重点讲解了使用div的float属性和display:flex来实现横向排列，以及对盒子模型的理解。此外，还介绍了如何添加面包屑导航、tab切换和富文本(v-html)的运用，是前端开发者提升布局和交互技能的好资源。

学习目标：

做一个介绍页面

学习内容：

设置页面上下边距为60，左右边距为自动（但是自动边距需设置了宽度才好看）
div使用float横向排列和使用display：flex，弹性盒子来使用
对盒子的理解
添加面包屑
添加tab
添加富文本（v-html）

学习时间：

提示：这里可以添加计划学习的时间

例如：

周一至周五晚上 7 点—晚上9点
周六上午 9 点-上午 11 点
周日下午 3 点-下午 6 点

学习产出：

提示：这里统计学习计划的总量

例如：

技术笔记 2 遍
优快云技术博客 3 篇
习的 vlog 视频 1 个

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fember

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue学习日记19：记事本-组件版

03-26

"vue学习日记19：记事本-组件版"是一个关于如何利用Vue.js创建一个功能丰富的记事本组件的实例教程。在这个项目中，我们将深入探讨Vue组件的基本概念、组件的生命周期、状态管理和事件通信。首先，Vue组件是Vue...

vue学习日记17：scoped样式冲突

03-21

在Vue.js框架中， scoped样式是用于实现组件的样式隔离，它通过添加一个唯一的属性到CSS选择器来确保样式只作用于当前组件。这个特性在开发大型应用时尤其有用，因为它帮助维护代码的整洁和可预测性。然而，有时我们...

参与评论您还未登录，请先登录后发表或查看评论

vue学习日记

nicooooooooooooo的博客

12-25

383

（4）出现问题要及时找解决方法，而不是一遍一遍的重新走老路，这个地方找不到答案，就换个地方换个关键词继续找，不要转牛角尖死脑筋。（4）cd vue-project➡️npm install ps:( q-q cnpm更快)➡️npm run dev。（2）.创建新项目：在终端中输入npm init vue@latest 再enter。（1）当在vscode中编辑成功后及时ctrl+s保存，否则打开的网页内容不变。（1）在vscode 中资源管理器下方区域单击右键，点击在集成终端打开。

Vue学习日记（一）

dream-seeker的博客

02-20

1007

Vue

vue学习日记Day6

啥也不会的屁小屁的博客

01-09

216

vue学习日记Day6：补充一个复杂遍历，和event事件复杂遍历： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <title></title> <style type="t

vue学习日记(流水账

andy dennis的博客

03-08

1251

前言写完算法实现后，老师让我去做一个界面，我参考了很多，最后选择了vue等一系列技术栈作为前端解决方案。应朋友们的邀请，下面就记录一下我学习的一些路线，也希望给未来的你有所指引。（大佬路过不喜轻喷哈，本人脸皮较薄呜呜… 文档 vue相关我首先是看了一下vue官方文档 vue 2.x vue 3.x 然后我发现在vue的项目中，vue-router 和 vue-cli用的也挺多，就去瞅了一下他们的文档 vue-cli vue-route 不管它们我也只瞅了基础部分，vue-router主要是明

Vue学习日记Day 1

qq_60798542的博客

12-18

188

10.2 子组件通知父组件做列表更新。

Vue学习日记Day 3

qq_60798542的博客

12-21

154

核心步骤具体实现。

Vue学习日记Day 2

qq_60798542的博客

12-20

175

最后不要忘记在主根件当中渲染组件。

Vue学习日记-toRefs

m0_74197624的博客

04-26

443

toRefs就是让响应式对象中的属性解构后仍然具有响应式的能力。

Vue学习日记：3

m0_65365393的博客

08-08

554

如何定义全局组件组件的试图模板中只能有一个容器实例和组件的数据互不相通组件中的data必须是函数式返回一个对象data函数式和data对象的区别（类似于深拷贝和浅拷贝）：data对象：如果在父组件中定义数据，子组件中使用该数据并修改，会影响父组件中原本的数据，以及其他使用该数据的子组件data函数式：当子组件想要使用data中的数据时，父组件会单独返回一个数据给子组件，当子组件修改该数据时，对父组件原本的数据没有影响可以有多个组件，每个组件可以多次使用。

vue学习日记18：data函数，父传子，子传父

03-21

data函数，父传子，子传父三个的代码

vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）

qq_43730272的博客

12-31

274

vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）

vue对接海康摄像头-H5player

林恒的博客

12-31

381

H5视频监控系统开发摘要本文介绍了基于Vue的H5视频监控系统核心功能实现：1）通过public目录引入JS资源；2）响应式视口布局，使用媒体查询适配不同屏幕；3) 树形监控点列表展示，通过海康API获取区域/摄像头数据并构建树结构；4) 视频流获取逻辑，支持主/子码流切换；5) 球机云台控制功能实现，包括方向指令发送。关键代码包含窗口resize监听、API请求封装及双次点击触发视频加载等交互设计，附件提供播放器性能说明文档。

vue中 v-cloak指令

KLW75

01-02

215

v-cloak指令用于隐藏尚未完成编译的DOM模板。有时会出现网络延迟或异步操作的情况，导致模板中的插值表达式内容并不一定能够及时被编译解析，网页中则会出现一部分未被解析的插值表达式，利用v-cloak指令，将指令中包含的内容先进行隐藏，当全部内容被解析编译完以后再显示，v-cloak指令不能单独使用，需要配合样式来实现。

08_组件基础

最新发布

weixin_53415999的博客

01-04

133

单文件组件(Vue 单文件组件(又名vue文件，缩写为 SFC)是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中。单文件组件Vue 单文件组件(又名vue 文件，缩写为 SFC)是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑与样式封装在单个文件中。

从零搭建 Vue 移动端项目

萌新程序员的博客，觉得有用的可以点点关注

12-30

1273

本文完整讲解了 Vue 移动端项目的搭建流程：从环境准备→项目创建→适配配置→UI 库集成→功能开发→打包发布，核心是解决移动端适配和交互问题。实际开发中可根据项目需求选择适配方案（rem/vw）、扩展更多功能（如支付、分享、定位），并结合 ESLint、Prettier 保证代码规范。掌握这套流程后，你可以快速搭建各类 Vue 移动端项目（电商、资讯、工具类 App），后续可深入学习 Vue 3 的组合式 API、Vite 优化、移动端性能调优等内容，提升项目体验。

Vue：defineProps、defineEmits、defineExpose 深度解析

Irene1991的博客

12-30

302

本文深度解析Vue3 <script setup> 语法中的三个核心编译器宏：defineProps、defineEmits 和 defineExpose。

vue3 学习日记

03-10

### Vue3 学习笔记示例教程 #### 使用 `v-bind` 和 `v-on` 在 HTML 中，可以使用简写的 `:` 来代替 `v-bind` 进行属性绑定。例如： ```html <div :id="dynamicId"></div> ``` 对于事件监听器，则可以通过 `@` 符号来替代 `v-on`[^1]。 ```html <button @click="handleClick">点击</button> ``` 这段代码会在按钮被点击时调用名为 `handleClick` 的方法。 #### 表单输入绑定为了使表单控件与应用程序状态之间实现双向数据绑定，可利用 `v-model` 指令简化这一过程。下面的例子展示了如何创建一个文本框并将其值与组件实例中的 `message` 属性关联起来[^2]。 ```html <input v-model="message" placeholder="编辑我"> <p>消息是: {{ message }}</p> ``` 每当用户更改 `<input>` 字段的内容时，视图模型会自动更新；反之亦然——如果改变 JavaScript 对象内的相应字段，UI 将即时反映这些变化。 #### 利用 Composition API 构建逻辑关注点分离的应用程序结构 Vue 3 推出了新的组合式API风格，允许开发者更灵活地组织业务逻辑而不必受限于选项式的声明方式。核心在于引入了 `setup()` 函数作为入口点，在这里定义响应式资源以及公开给模板使用的成员[^3]。 ```javascript import { ref, defineComponent } from 'vue' export default defineComponent({ setup() { const count = ref(0) function increment() { count.value++ } return { count, increment } } }) ``` 此片段展示了一个简单的计数器功能：当触发 `increment` 方法时，内部维护的状态 `count` 增加一单位，并且该数值能够实时反馈至页面显示区域。