初识Vue-Vue的页面布局

最新推荐文章于 2026-04-03 17:34:34 发布

原创最新推荐文章于 2026-04-03 17:34:34 发布 · 1.1w 阅读

10 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了Vue页面的基本布局结构，包括template、script和style三个主要部分，并强调了在body区域内使用多个标签时需要包裹在div标签内的规范，避免编辑器报错。

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

1.Vue的页面基本布局

<template>
    //相当于html的body
</template>
<script>
export default {
    //js区域
}
</script>
<style >
	//css区域
</style>

当然也有一些特殊的要求
比如说在Vue的body区域内，如果你放一个一个input标签，编辑器会默认的有一个div区域
在这里插入图片描述
如果写两个以上，则会报错

所以养成一个习惯，写页面之前首先加入div标签，在标签之内写其他标签

这样就不会报错了

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

微微笑再加油

关注关注

1
点赞
踩
10

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vue——布局（flex、gride）

wy313622821的博客

09-03

1万+

前端布局发展史：初代table布局 CSS+div布局 Flex布局（移动端较友好） grid布局（2020年） Flex布局：实例1用flex布局制作导航栏 flex:1表示下面的综合： flex-grow : 1; // 这意味着div将以与窗口大小相同的比例增长 flex-shrink : 1; // 这意味着div将以与窗口大小相同的比例缩小 flex-basis : 0; // 这意味着div没有这样的起始值，并且将根据可用的屏幕大小占用屏幕。例如： -.

别再只会用text-align了！Vue项目里搞定按钮对齐的5种CSS布局方案（附Element-UI示例）

热门推荐

weixin_42974827的博客

09-04

3万+

主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动，后续我会把完整代码放在个人主页KinHKin的博客_CSDN博客-vue,中秋活动,性能优化领域博主的资源里面，供大家免费下载，希望大家能够喜欢💗💗💗。

Vue布局秘籍：用这些技巧打造炫酷页面！

m0_51160509的博客

01-16

4506

el-container、el-header、el-aside和el-footer是Element UI框架中的布局组件，有着以下关系：- el-container：容器组件，是整个布局的最外层容器，包含了页面的整体布局。- el-header：头部组件，位于容器组件的顶部，通常用于放置导航栏、logo等。- el-aside：侧边栏组件，放置在容器组件的左侧或右侧，用于放置边栏菜单、快捷导航等。- el-footer：底部组件，位于容器组件的底部，通常用于放置页脚信息、版权声明等。

VUE-布局

孟孟的博客

05-19

3057

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突

新建的vue项目如何布局（侧边栏，主页等）

m0_65380423的博客

03-24

2469

vue项目写导航栏

渣渣枫初识Vue与Element

m0_51173023的博客

10-14

526

渣渣初学Uve与Element章目录前言一、Vue标题二、Element1.引入库2.读入数据案例总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、Vue 标题示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、Element 1.引入库代码如下（示例）： import numpy

vue初识(vue+elementUl点菜小应用)

assiany的博客

08-20

601

vue初识 Vue.js，它是一套用于构建用户界面的框架，它是只关注于视图层。也是基于组件式的开发的思想。数据驱动视图。释放了对dom的操作，让dom可以随着数据的变化而变化。在开发过程中，不必过多的关注dom的操作，只需要把精力集中在数据上，就可以了。它主要使用基于html的模板语法，可以声明式的把dom绑定到vue的实例上，写的所有的代码都是合法的html，所以不用像reactJs一样再去搞什么jsx。 Vue-cli，它是官方出品的，快速构建单页应用的脚手架。 1你要安装nodejs； 2、npm

Vue初识

weixin_30642305的博客

08-07

复习 """ 1、BBS：前后台不分离的web项目前台页面主要是通过后台逻辑完成渲染 2、Django：Python Web 框架 HttpResponse | ORM | 模板语言 | Forms | Auth 3、前端：HTML5 CSS3 JavaScript jQuery Bootstrap HTML5：页面架构 CSS3：选择器样式布局 ...

vue初识

python基础

06-27

196

一. Vue的简单介绍前端 django的重点简单描述 1、BBS：前后台不分离的web项目前台页面主要是通过后台逻辑完成渲染 2、Django：Python Web 框架 HttpResponse | ORM | 模板语言 | Forms | Auth 3、前端：HTML5 CSS3 JavaScript jQuery Bootstrap HTML5：页面架构 ...

Vue3路由：初识Vue Router(1)

caishuangxi111的博客

05-11

709

理解了基础配置后，我们可能会产生新的疑问：如果商场临时调整了楼层布局怎么办？在接下来的章节中，我们将学习如何处理带参数的路由配置，让我们的导航系统具备应对复杂场景的能力。想象你走进一家大型商场，想要找到心仪的商品。这时候如果有个智能导航机器人，能根据你的需求直接带你去目标区域，是不是比挨个楼层瞎逛高效多了？就像商场导航屏能显示不同楼层地图，Vue Router通过监听URL变化，智能匹配对应的"地图组件"。就像在商场中，通过导航屏幕选择"服装区"后，场景平滑切换到对应区域，而不是重新进入商场大门。

回顾及vue初识

weixin_60488295的博客

11-30

215

第1阶段： html css 。浮动、定位布局、mdeia（百分比）、响应式、flex、rem布局 <tagname key="value"></tagname> <tagname key="value" /> selector{ key:value; } 第2阶段：得保证嵌套标签要合理，逻辑思维，编程思维。声明变量、数据类型、运算符（算术、赋值、比较、逻辑、三目）、声明函数( 参数、this )、分支语句（ if,switch ），..

初识vue 3

qq_52325528的博客

01-17

1787

本文章是笔者在学习的道路上留存的学习知识，笔者使用的书是《Spring Boot+Vue 3大型前后端分离项目实战》十三尼克陈/著。

Vue笔记（初识Vue）

m0_63163126的博客

08-29

810

Vue的基本认知

初识vue3

weixin_58431406的博客

07-07

8349

创建vue3项目，vue3项目main.ts文件发生的变化、生命周期、ref 、reactive、toRefs 、编写方式、Vue3 自定义组件、父子通信、axios、使用 Vite 快速构建 Vue 项目、 Vue3中的VueX、element-plus导航栏布局案例、antd导航栏布局案例

初识 RuoYi-Vue

热爱编程、热爱生活、热爱探索

04-03

650

RuoYi-Vue是一个基于Spring Boot、Vue等技术的企业级快速开发平台，提供部门管理、角色权限、代码生成等模块。作为RuoYi家族的前后端分离版本，其技术栈包含Spring Security、MyBatis、JWT等后端组件，以及Vue、Element UI等前端框架。项目采用模块化结构，后端分为admin、common、system等模块，前端通过api、router等目录组织代码。启动时需先拉取springboot2分支代码，具体部署可参考官方文档。该平台支持多数据源、分布式事务等企业级特

前端进阶之初识Vue

git1314的博客

04-28

403

Vue是一个前端Javascript框架，与React Angular 并称为前端三大主流框架 Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提...

vue面试题

weixin_45838066的博客

04-16

2166

第2节 vue面试题(56道)# 摘讲# 02 vue-cli3搭建项目之webpack配置 15 vue虚拟dom *** 17 vue路由传参问题 25 vue hash 和history的区别 *** 20 Vue的响应式原理 28 v-if v-for 在哪个钩子函数中解析 *** 57 初识vue3(了解) 58 初识typescript(了解) 59 初识webpack 01 插件和组件的区别 **# Vue组件（component）用来构成你的App的业务模块，它的目标是