同一个"添加待办" · 三种编写方式
三栏都是真实运行的页面：左边内容写死在源码里、中间用 jQuery 手动操作 DOM、右边用 Vue 自动更新。
都在下面的输入框里加一条，体感上的差别就是这一讲的重点。
① 纯 HTML · 静态页时代（1990s）
浏览器里的页面（内容写死在源码里）
买牛奶
写周报
＋ 添加一条
静态页面没有"响应"能力，点了不会有新内容出现。
内容写死在页面里
加一条 = 改源码、重新发布
② HTML + jQuery · 命令式（2006）
浏览器里的页面（每一步都要你亲手操作）
添加
买牛奶
写周报
输入内容后点"添加"，看页面多出一条。
创建节点→设文本→插进去
每一步都自己写、自己盯
③ Vue 3 · 声明式（2014-）
浏览器里的页面（自动跟随数据更新）
添加
{{ item }}
数据 items 一变，列表自动更新——你只描述"数据长什么样"。
只描述"数据长什么样"
数据一变，页面自动更新
记整个页面
→
记每一步操作
→
只记数据和样子
SE3306 · Web 前端框架技术 · 三种编写方式真实演示 | 优先 CDN 加载，失败自动回退同目录本地文件