Vue基础教程（5）前端开发技术的发展之Vue.js概述与发展历程：Vue.js：前端界的“魔法杖”进化史——从“哟，不错哦”到“唯我独尊”

一、 前言：从前端“石器时代”到Vue的“工业革命”

兄弟们，姐妹们，码农同胞们！想象一下，在“远古”的前端时代，我们要做个简单的页面交互是啥样？那真是“一把辛酸泪，满屏document.getElementById”啊！jQuery虽然帮我们脱离了原始社会的徒手搏斗，但面对越来越复杂的单页面应用（SPA），代码依然容易乱成一锅“意大利面条”。

就在这个时候，一股清流，哦不，是一股“洪流”席卷而来——它就是Vue.js。它不像Angular那样一上来就让你学习一整套“武功秘籍”（依赖注入、模块系统等），也不像React那样需要你先理解“函数式编程”的哲学。Vue的口号就俩字：好使！用行话叫 “渐进式”——你可以从一个简单的<script>标签开始，像搭乐高一样，需要啥再加啥，简直是为开发者良心定制的“爽文剧本”。

今天，咱就泡上一杯咖啡（或肥宅快乐水），一起唠唠Vue这位“天选之子”的发家史，顺便手把手教你用最时髦的Vue 3写法，整一个活蹦乱跳的TodoList应用！

二、 Vue.js概述：它到底是个啥？为啥这么香？

简单说，Vue.js就是一个用于构建用户界面的JavaScript框架。 但它的核心魅力在于其 “响应式” 和 “组件化”。

• 响应式（Reactivity）： 这绝对是Vue的“灵魂魔法”。你只需要在data里定义个message: 'Hello'，然后在模板里写个{ { message }}。当你通过代码改变message的值时，页面上显示的内容会自动、立刻、无缝地更新！你再也不用苦哈哈地手动操作DOM了，Vue在背后帮你搞定了一切脏活累活。这种感觉，就像你有个隐形的助手，你动动嘴皮子（改数据），他立马把活儿干得漂漂亮亮。
• 组件化（Component-Based）： 把页面想象成一个机器。以前我们是一整块铁疙瘩来雕琢，现在Vue让我们可以把机器拆成一个个可复用、易维护的零件（比如按钮、导航栏、列表项）。每个零件（组件）都有自己的HTML、CSS和JavaScript，独立开发，随意拼装。这样，项目再大也不怕，管理起来井井有条。

正是这两大“法宝”，让Vue在开发者中圈粉无数。用过的都说：“回不去了！”

三、 Vue.js发展历程：一部“草根逆袭”的爽文

1. 诞生记（2013-2014）：天才的“灵光一现”

故事的主角是咱们的华人大神——尤雨溪（Evan You）。当时他在Google用AngularJS做项目，觉得这框架很好，但太重了。于是他心想：“我能不能把它好的部分提炼出来，再做得更轻量、更灵活一点呢？” 说干就干！2013年，Vue.js的雏形作为他个人的一个实验性项目诞生了。2014年2月，他正式对外发布了第一个版本0.8.0。

这开局，像极了武侠小说里主角在山洞里捡到一本残破的武功秘籍，然后自己琢磨出了更牛逼的招式。

2. 崛起之路（2015-2016，Vue 1.x & 2.x）：口碑爆炸，社区狂欢

• Vue 1.x： 确立了核心概念：响应式系统、组件系统、指令（如v-if, v-for