--- title: 这不是浏览器，也不是 Vue description: BlueOS 模板长得像 Vue，运行时不是 Vue，也不是浏览器。用对照表避开常见坑。 --- 这篇用一张表把 Web / Vue 习惯映射到 BlueOS。后面每一篇都默认你已经看过这张表。 **学完能做什么：** 看到 `@click`、`v-for`、`document`、`gap` 时，知道正确写法。 **前置：** 已经在模拟器里看到 [Hello World](/guide/hello-world/)。 ## 对照表 | Web / Vue | BlueOS | |-----------|--------| | `@click="handler"` / `v-on:click` | `onclick="handler"` | | `v-for="item in list"` | `for="{{(index, item) in list}}"`（**index 在前**） | | `v-if` / `v-show` | `if="{{cond}}"` / `show="{{cond}}"` | | `:prop="x"` | `prop="{{x}}"` | | `document` / `window` / `querySelector` | 无 DOM；用 `@blueos.*` 模块 | | `localStorage` | `@blueos.storage.storage`（feature 名是 `blueos.storage.storage`） | | `display: block` / `grid` | 只有 `flex` 和 `none` | | `gap` | 子元素 `margin`（没有 `:last-child`） | | `rem` / `em` / `vw` / `vh` | `px` 或 `%` | | 任意依赖 DOM/Node 内置模块的 npm 包 | 不能当浏览器用 | 官方事件文档提到 `@click` 可作为 `onclick` 的简写。**本教程一律写 `onclick`**，避免和 Vue 混在一起。即便写成 `@click`，循环变量、`{{ }}` 规则仍然不是 Vue。 ## 三条硬规则 1. **事件绑定里不要写 `{{ }}`。** 写 `onclick="openDetail(item)"`，不要 `onclick="openDetail({{ item }})"`。后者会黑屏，日志类似 `create_function: value is not an object`。 2. **新响应式字段必须出现在 `data` 里，或用 `this.$set`。** `this.title = 'x'` 在 `data` 里没有 `title` 时，界面不会更新。 3. **用到的系统 API 要在 `manifest.json` 的 `features` 里声明**（[路由](/api/system/router/) 除外，官方写明无需声明）。 ## 深入阅读 - [数据绑定](/reference/app-service/data-binding/) - [事件处理](/reference/app-service/event-on/) - [style 样式](/reference/configuration/style-sheet/) - [通用样式](/component/common/common-styles/) ## 本页要点 - 长得像 Vue ≠ 是 Vue；没有浏览器 DOM。 - `onclick`、`for` 的 `(index, item)` 顺序、`data` 声明，这三件事先记住。 - 参数细节去官方参考查，不要靠网页经验猜。 下一篇：[`.ux` 与 `manifest`](/guide/ux-and-manifest/)