🚀 Alins: The most pure and elegant WebUI framework

中文 | Documentation | Playground | Update Log | Feedback Errors/Defects | Gitee | Message Board

Alins Standalone

Alins provides a compilation-free toolkit. Through some API calls, complete Alins application functions can be realized, but jsx syntax cannot be used.

1. Installation and use

npm installation and use

npm i alins-standalone

import {/**import**/} from 'alins-standalone';

<script src='https://unpkg.com/alins-standalone'></script>
<script>
     window.Alins;
</script>

2.API

alins-standalone exports the following API, the basic usage is consistent with alins

import {
    mount, ref, reactive, watch, computed,
    If, ElseIf, Else,
    Switch, Case, Default,
    For, Async, Show, Dom, Component,
    created, appended, mounted, removed,
} from 'alins-standalone';

The counter program above can be expressed using Alins Standalone:

import { ref, computed, Dom, join } from 'alins-standalone';

const count = ref(1);
const countAdd1 = computed(() => count.v + 1);
Dom.button({
    $mount: 'body',
    onclick: () => count.v++,
}, join`count is ${count}; countAdd1 is ${countAdd1}`);

Let’s use the cdn method and learn about it through an example.

<script src='https://unpkg.com/alins-standalone'></script>
<script>
const { ref, computed, Dom, join } = window.Alins;
const count = ref(1);
const countAdd1 = computed(() => count.v + 1);
Dom.button({
    $mount: 'body',
    onclick: () => count.v++,
}, join`count is ${count}; countAdd1 is ${countAdd1}`);
</script>

Note: The join api means splicing a string with responsive data and returning an array. You can also use the array form directly

['count is ', count, '; countAdd1 is ', countAdd1]

For specific usage of other APIs, please refer to alins-standalone.d.ts