这不是浏览器,也不是 Vue
这篇用一张表把 Web / Vue 习惯映射到 BlueOS。后面每一篇都默认你已经看过这张表。
学完能做什么: 看到 @click、v-for、document、gap 时,知道正确写法。
前置: 已经在模拟器里看到 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。
- 事件绑定里不要写
{{ }}。 写onclick="openDetail(item)",不要onclick="openDetail({{ item }})"。后者会黑屏,日志类似create_function: value is not an object。 - 新响应式字段必须出现在
data里,或用this.$set。this.title = 'x'在data里没有title时,界面不会更新。 - 用到的系统 API 要在
manifest.json的features里声明(路由 除外,官方写明无需声明)。
- 长得像 Vue ≠ 是 Vue;没有浏览器 DOM。
onclick、for的(index, item)顺序、data声明,这三件事先记住。- 参数细节去官方参考查,不要靠网页经验猜。
下一篇:.ux 与 manifest