Vue 入门指南（面向 Claude Code 开发者） 写给已经掌握 JS / HTML / CSS 基础的你。本文只讲 原理和用法 ，不堆代码细节——因为具体代码可以交给 Claude Code 写，你需要的是看懂它在做什么、能提出正确的需求、能读懂输出的结果。 一、Vue 解决了什么问题 原生 JS 开发页面时，你需要手动操作 DOM：数据变了，自己找到对应的 DOM 节点，手动更新内容。页面越复杂，这种"数据 → 手动改 DOM"的代码就越难维护。 Vue 的核心思路是 声明式渲染 + 响应式数据 ： 你只需要描述"页面长什么样，取决于哪些数据"（模板）； 数据变化时，Vue 自动帮你找到需要更新的 DOM 并更新它。 你不再写"如何更新界面"，只写"界面应该是什么样"。这是从命令式编程到声明式编程的转变，也是所有现代前端框架（Vue/React/Angular）共同的思路。 二、响应式数据：Vue 的核心机制 这是 Vue 最重要的概念，务必理解。 普通 JS 变量赋值后，没有人知道它变了。Vue 提供了 ref() 和 reactive() 两个函数，把普通数据"包装"成响应式数据——本质是给数据加上了"监听器"，一旦被修改，Vue 会自动通知所有用到它的地方去更新。 ref() ：包装单个值（数字、字符串、布尔值，也可以是对象），使用时需要通过 .value 访问。 reactive() ：直接包装一个对象，不需要 .value ，但不能重新赋值整个对象（只能改内部属性）。 实际开发中 ref() 用得更多，因为它更灵活、限制更少。你不需要记住实现细节，只需要知道： 想让一个数据"活起来"（改了就自动刷新界面），就用 ref 包一下 。 三、模板语法：数据如何显示到页面上 Vue 的模板本质上还是 HTML，但加了几种特殊写法： 语法 作用 {{ 变量 }} 把 JS 表达式的值插入到文本中 v-bind:属性 （简写 :属性 ） 把 HTML 属性绑定到某个变量，变量变了属性也跟着变 v-on:事件 （简写 @事件 ） ...