简介

你正在阅读的是 OWL 2 的文档！（Odoo 18 及以上）

OWL（Odoo Web Library）是 Odoo 官方为构建前端组件而开发的现代化 JavaScript 框架，采用响应式架构，结合虚拟 DOM 和组件化设计理念，是 Odoo 14 之后前端开发的核心框架。
OWL 2 是其第二代版本，提供了更强大的响应系统、更易用的生命周期管理机制以及更优秀的性能优化。
前往 OWL 1 教程，适用于 Odoo 17 及以下版本。

什么是 🦉Owl 框架🦉

Odoo Web Library（Owl）是由 Odoo 为其产品构建的一个轻量级（压缩后 <20kb）UI 框架。 Owl 是一个现代的框架，使用 TypeScript 编写，融合了 React 和 Vue 的优秀思想，以简洁一致的方式呈现。

Owl 的主要特性包括：

声明式组件系统
类似 Vue 的细粒度响应式系统
Hooks（钩子）
Fragments（片段）
异步渲染

Owl 组件使用 ES6 类和 XML 模板定义，底层使用虚拟 DOM，完美集成了 Hooks，并支持异步渲染。

快速链接：

文档
更新日志（从 Owl 1.x 到 2.x）
在线 playground

下面是一个最基本的示例：

/** @odoo-module **/
import { Component, useState } from "@odoo/owl";

export class Counter extends Component {
  static template = "odoo_owl.Counter";
  setup() {
    this.state = useState({
      count: 0
    });
  }

  increment() {
    this.state.count++;
  }
}

对应的模板文件（XML）如下：

xml

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
  <t t-name="odoo_owl.Counter">
    <div>
      <p>当前计数：
        <t t-esc="state.count"/>
      </p>
      <button class="btn btn-primary" t-on-click="increment">增加</button>
    </div>
  </t>
</templates>

请注意，计数器组件通过 useState hook 实现响应式

更多有趣的示例可在 playground 中找到。

文档

学习 Owl

你是 Owl 新手？下面是学习入口：

API 参考

其他话题

安装 Owl

Owl 可通过 npm 安装：

npm install @odoo/owl

如果你想通过 <script> 标签引入，可以在此下载最新版本：

安装 Owl Devtools

Owl Devtools 浏览器扩展也可在 release 页面下载：解压 owl-devtools.zip 文件，然后根据你的浏览器操作：

Chrome 浏览器

打开扩展管理页：chrome://extensions/
开启「开发者模式」
点击「加载已解压的扩展程序」
选择 devtools-chrome 文件夹

🔁 要更新扩展，可以点击扩展卡片上的刷新按钮。 🧼 如遇问题，建议删除并重新加载扩展。

Firefox 浏览器

打开 about:debugging#/runtime/this-firefox
点击「加载临时附加组件」
选择 devtools-firefox 文件夹中的任意文件

💡 如未生效，可尝试重新加载页面或打开新窗口。 🔍 此扩展仅在支持 Owl 版本的页面上生效。

提示

如果你熟悉 Vue 或 React，学习 OWL 会更加轻松。

简介 ​

什么是 🦉Owl 框架🦉 ​

下面是一个最基本的示例： ​

文档 ​

学习 Owl ​

API 参考 ​

其他话题 ​

安装 Owl ​

安装 Owl Devtools ​

Chrome 浏览器 ​

Firefox 浏览器 ​

简介