今天的学习笔记:初识Vue框架
一、Vue是什么?
Vue 是一款用于构建用户界面的渐进式 JavaScript 框架。
- 构建用户界面:将数据动态转换为页面内容。
- 渐进式:支持从简单到复杂的应用场景。小项目可用核心库轻量开发,大项目可结合插件(如路由、状态管理)逐层扩展,避免资源浪费。
二、Vue的三大核心特点
1. 组件化开发模式
- 什么是组件化?
将页面拆分为独立的功能块(如UserCard.vue
),每个组件包含自己的 HTML、CSS 和 JavaScript 逻辑。 - 优势:
- 高复用性:相同功能模块无需重复编写。
- 易维护性:修改组件内部代码时,不影响其他部分。
- 封装性:组件内部状态和样式隔离,避免全局污染。
<!-- 示例:一个用户信息组件 -->
<template>
<div class="user-card">
<h3>{{ name }}</h3>
<p>年龄:{{ age }}</p>
</div>
</template>
2. 声明式编码
-
命令式 vs 声明式
-
命令式(原生JS):手动操作 DOM,流程繁琐。
// 数据 const persons = [ { id: '001', name: '张三', age: 18 }, { id: '002', name: '李四', age: 19 }, // ... ]; // 手动拼接 HTML 并更新 DOM let htmlStr = ''; persons.forEach(p => { htmlStr += `<li>${p.id}-${p.name}-${p.age}</li>`; }); document.getElementById('list').innerHTML = htmlStr;
-
声明式(Vue):关注数据本身,无需直接操作 DOM。
<ul id="list"> <li v-for="p in persons" :key="p.id"> {{ p.id }}-{{ p.name }}-{{ p.age }} </li> </ul>
-
-
常用指令
v-for
:列表渲染v-bind
(缩写:
):动态绑定属性v-model
:表单双向绑定v-if
/v-show
:条件渲染
3. 虚拟DOM + Diff算法
-
原生DOM更新的问题
数据变化时,直接操作真实 DOM(如innerHTML
)会导致整个元素重新渲染,效率低下。 -
Vue的优化方案
- 虚拟DOM:用 JS 对象模拟真实 DOM 结构。
- Diff算法:对比新旧虚拟 DOM,仅更新差异部分,复用相同节点。
示例:
- 初始数据:
张三、李四、王五
- 新增数据:
赵六
- 原生JS:删除旧列表,重新渲染全部4条数据。
- Vue:通过 Diff 发现前3条未变,仅插入新节点
赵六
。
三、学习Vue的前置知识
- ES6+ 语法:箭头函数、解构赋值、模板字符串等。
- ES6模块化:
import/export
管理代码依赖。 - 包管理器:npm 或 yarn。
- 原型与原型链:理解 JS 面向对象基础。
- 数组常用方法:
map
、filter
、reduce
。 - Promise 和异步编程:处理异步操作。
- axios:用于网络请求的库。
四、总结
Vue 通过组件化、声明式编码和虚拟 DOM 机制,显著提升了开发效率和性能。其渐进式特性使得开发者能灵活选择功能模块,适合各种规模的项目。接下来将深入探索 Vue 的基础语法和核心功能!
你对哪个部分最感兴趣?欢迎留言讨论! 🚀
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~