一个小白的vue之路(一)——关于vue的简单了解

本文为Vue框架初学者提供了一个入门指南,介绍了单页面富应用、数据驱动页面和MVVM模式等核心概念,适合没有前端框架经验的新手。文章强调了对node.js和es6基础的了解对学习Vue的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言:因为公司需要我开始学习vue框架,在此之前我没有接触过类似的前端框架,只是懂一些h5css3还有js的基础语法,可以说是一个前端的小白。时至今日已经有一周多了,一些vue基础的东西都接触过了。现在我把我在学习过程中遇到的难点不懂的记录下来,希望对一些和我一样的初学者有所帮助,同时欢迎大家评论指导。接下来,我们话不多说进入正题!

关于vue的简单了解

在学习之前我们要先了解几个概念:单页面富应用数据驱动页面MVVM模式。还有我们需要对node.jses6基础了解,这会对你对vue理解与使用有很大帮助。
单页面富应用
一个后台管理网站(如下图)为例,我们传统的网站大多是个多页面应用程序,页面左侧导航与右侧页面之间的跳转大多是通过点击a标签在对应的iframe标签下加载所需页面这种方式完成的,页面会刷新。而现在页面不刷新也可以做到,例如vue/react框架。它们只是加载了index页面然后动态的往上挂载组件。
在这里插入图片描述
数据驱动页面
vue是一个数据驱动页面的框架,这是它最大的特点。在以往的页面中我们都是用js/jquery通过获取dom元素对象然后根据数据作相应的操作。而现在vuejs帮我们封装了数据和dom对象操作的映射,我们只需要关心数据的逻辑处理,数据的变化就能够自然的通知页面进行页面的重新渲染。
MVVM模型
vue.js的数据驱动就是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。
Model:指的是数据部分,对应到前端相当于javascript对象
View:指的是视图部分,对应前端相当于dom
Viewmodel:就是连接视图与数据的中间件通讯
推荐:这是一边关于vue介绍比较好的文章——[(https://nb.mbd.baidu.com/5o6857s?f=cp)

### 关于 Vue 前端项目的入门资料与教程 对于初学者来说,Vue种非常友好的前端框架,其简单易学的特点使得许多开发者能够快速上手并构建功能丰富的应用。以下是针对 Vue 前端项目的小白入门教程及相关知识点: #### Vue3 入门推荐资源 份详尽的 Vue3 入门教程可以帮助新手从零开始掌握 Vue 的基础知识以及实际开发技巧[^1]。该教程涵盖了 Vue3 的核心概念,例如响应式系统、组合 API 和模板语法等内容。 #### 二、Element Plus 集成指南 如果计划在 Vue3 项目中使用 Element Plus 这样的 UI 库,则可以按照官方文档中的说明完成集成操作。具体步骤如下: - 下载依赖库 `npm install element-plus --save`; - 在入口文件 main.js 中全局引入或按需加载组件样式; - 使用 `<script setup>` 或传统方式编写基于 Element Plus 的界面逻辑。 #### 三、Vue Router 路由管理器介绍 为了实现页面之间的跳转和动态更新视图的功能,在 Vue 项目里通常会借助 **Vue Router** 插件来定义不同的路径及其对应的显示内容[^2]。它的主要作用就是通过声明式的配置映射 URL 到特定的组件实例上去渲染出来给用户查看。 ##### (1)安装与初始化过程概述 遵循标准流程设置好环境之后就可以着手处理以下几个方面的工作了: 1. 执行命令行工具添加必要的支持模块:`npm i vue-router@next`; 2. 导入所需类库至 JavaScript 文件头部位置; 3. 调用方法激活插件机制使其生效在整个应用程序范围内可用 ; 4. 构建包含多个子项的对象结构用来描述各个可能访问的目标地址连同关联起来呈现出来的部分 ; 5. 把最终形成的 navigation graph 注册进去根级别容器当中去接管整个生命周期事件流控制权柄. ##### (2)关键要素解析 除了上述提到的基础搭建之外还需要注意两个重要环节——即创建具体的 view component 并指定它们各自的 routing rule;另外就是在布局设计阶段预留空白区域作为 placeholder 来承载即将被替换掉的内容区块也就是所谓的 “router-view”。 #### 四、实践建议 当熟悉理论知识以后不妨尝试动手做简单的练习题目巩固记忆效果比如模仿现有网站制作登录表单或者商品列表页等等形式多样化的案例演练有助于加深理解程度提高解决问题的能力水平。 ```javascript // 示例代码片段演示如何配置一个基本的 Vue Router 实例 import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', name: 'Home', component: () => import('@/views/Home.vue') // 动态懒加载 Home 组件 }, { path: '/about', name: 'About', component: () => import('@/views/About.vue') } ]; export const router = createRouter({ history: createWebHistory(), routes, }); ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值