@acutejs/core 中文文档教程
Acute
Acute 是一个轻量级但固执己见的框架，允许您使用 Web 组件构建 Web 应用程序。
它抽象掉了编写自定义元素时一些更乏味和重复的部分，例如特性-属性绑定、事件处理和模板化。
A simple component
急性成分被定义为对象。 此模式与模块配合得很好：
HelloWorld.js
import { html } from '@acutejs/plugin-lit-html';
export default {
props: {
greeting: {
default: 'Hello',
type: String,
},
name: {
default: 'world',
type: String,
}
},
render({ greeting, name }) {
return html`
<p>
${ greeting }, ${ name }
</p>
`;
},
};
The createApp function
createApp 用于向 Acute 注册组件。
app.js
import { createApp } from '@acutejs/core';
import litHtml from '@acutejs/plugin-lit-html';
import HelloWorld from './HelloWorld.js';
createApp({
components: {
HelloWorld,
},
plugins: [
litHtml,
]
});
Your HTML file
引导您的应用程序就像包含您的基本组件一样简单。
index.html
<!DOCTYPE html>
<html>
<head>
<script async src="bundle.js"></script>
</head>
<body>
<hello-world name="Acute"></hello-world>
</body>
</html>
Acute
Acute is a lightweight but opinionated framework that allows you to build web apps using web components.
It abstracts away some of the more tedious and repetitive parts of authoring custom elements, such as attribute-property binding, event handling and templating.
A simple component
Acute components are defined as objects. This pattern works nicely with modules:
HelloWorld.js
import { html } from '@acutejs/plugin-lit-html';
export default {
props: {
greeting: {
default: 'Hello',
type: String,
},
name: {
default: 'world',
type: String,
}
},
render({ greeting, name }) {
return html`
<p>
${ greeting }, ${ name }
</p>
`;
},
};
The createApp function
The createApp is used to register components with Acute.
app.js
import { createApp } from '@acutejs/core';
import litHtml from '@acutejs/plugin-lit-html';
import HelloWorld from './HelloWorld.js';
createApp({
components: {
HelloWorld,
},
plugins: [
litHtml,
]
});
Your HTML file
Bootstrapping your app is as simple as including your base components.
index.html
<!DOCTYPE html>
<html>
<head>
<script async src="bundle.js"></script>
</head>
<body>
<hello-world name="Acute"></hello-world>
</body>
</html>
