OWL初识

框架概述：

Odoo Javascript 框架是由帮助构建在浏览器中运行的 Odoo 应用程序的插件。在同时，Odoo Javascript 框架是一个单页应用程序，通常称为 Web 客户端（可在 URL 中找到）。web//web

Web 客户端最初是使用自定义类和小部件创建的应用程序系统，但现在它正在过渡到使用原生 JavaScript 类，和 Owl 作为组件系统。这解释了为什么这两个系统目前都处于在代码库中使用。

组件

一个组件常见的文件目录：
componentName.xml：组件结构
componentName.js：组件控制器
componentName.css：组件样式

现在看一个简单示例：它维护一个内部数字值，显示它，并在用户单击按钮将数字+1

counter.js

/** @odoo-module **/

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

export class Counter extends Component {
    static template = "my_module.Counter";

    setup() {
        this.state = useState({ value: 0 });
    }

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

counter.xml

<templates xml:space="preserve">
   <t t-name="my_module.Counter">
      <p>Counter: <t t-esc="state.value"/></p>
      <button class="btn btn-primary" t-on-click="increment">Increment</button>
   </t>
</templates>