Vue

Vue 用响应式数据和模板来组织界面。数据变化时，Vue 会找到依赖它的绑定位置并更新页面。

• 响应式数据保存页面要用的值，例如 count = 0。
• 模板把数据放到页面中，也可以把点击动作和数据变化连起来。
• 数据变成 1 后，绑定的位置自动显示新结果，不需要手动重写整段 HTML。

HTML 负责描述结构，JavaScript 或 TypeScript 负责写逻辑，Vue 则提供组件、模板和响应式更新的组织方式。

• Vue 模板看起来接近 HTML，但其中的插值、指令和绑定会连接到响应式数据。
• Vue 可以调用接口并显示结果，但服务器、数据库和接口本身不属于 Vue。

看到“数据变了，绑定位置跟着变”时想到 Vue，看到“服务器保存数据”时还要看后端接口和数据库。

拆开这个单文件组件，可以看到响应式状态、模板绑定和自动更新视图三个真实部分。

• STATE 是由 ref 保存的响应式值，例如 count.value = 0。
• BINDING 是模板中的 {{ count }} 和 @click="count++"。
• VIEW 是状态变化后，绑定位置自动显示新值的实际界面。

请用 Vue 的响应式数据和模板绑定实现计数按钮：点击后更新真实 count，并让绑定位置显示新数字；不要只修改静态文字。请保留键盘操作、可读状态提示，以及 390px 和 320px 下不横向滚动。