梦回苍石居  |
Cangshi Live

Ref-lit 86 Views

作者:
苍石
进度:
开发
Progress: 50%
项目开始时间:
2020-11-02
项目结束时间:
项目发表时间:
2021-01-04 18:12:35
最后编辑于:
3 年前
标签:
FRAMEWORKREF-LITJAVASCRIPT

查看演示

Ref-Lit JS

轻量级的 JavaScript 渐进式渲染框架

This is the Chinese Documentation,English Documentation please view: English Documentation

特征

示例

在线 Demo


<my-component></my-component>
// javascript
<script type="module">
    import 'https://unpkg.com/@palerock/ref-lit/build/ref-lit.mini.js';

    const {defineComponent, html} = window.$ref_lit;

    defineComponent('custom-input',
        // 声明组件参数
        {
            value: '',
            type: 'text',
            placeholder: 'please input...'
        },
        ({props, component}) => {
            // 组件内容区域
            function onInputChanged(e) {
                component.dispatchEvent(new CustomEvent('cvalue', {
                    detail: {value: e.target.value}
                }));
            }
            // html 方法的使用参见 lit-html.js
            return () => html`
                <input value=${props.value} type=${props.type} placeholder=${props.placeholder} @keyup=${onInputChanged} >
            `
        }
    );

    defineComponent('my-component', {}, ({ref}) => {

        function onValueChanged(e) {
            ref.value = e.detail.value;
        }

        return () => html`
            <div>
                <p>${ref.value}</p>
                <custom-input value=${ref.value} @cvalue=${onValueChanged}></custom-input>
            </div>
        `
    });
</script>

引入 Ref-Lit JS

  • 如果使用 npm 或者 yarn
    # npm
    npm i @palerock/ref-lit
    
    # yarn
    yarn add @palerock/ref-lit
    
  • 通过浏览器 HTML 代码中的 <script src> 引入
    <script src="xxx/ref-lit.mini.js"></script>
    <script>
        const {defineComponent, html} = window.$ref_lit;
    </script>
    
  • 通过浏览器 HTML 代码模块化引入
    <script type="module">
        import 'xxx/ref-lit.mini.js';
        const {defineComponent, html} = window.$ref_lit;
    </script>
    

怎样获取 ref-lit 的资源文件?

查看源码中 build 目录, 你可以自行选择下载是否压缩过的资源文件.

或者通过以下链接引入/下载:

API 文档

目前,文档正在积极撰写中。

你可以在源码的目录 ./src/demo 获取到一些例子,通过它们可以很快学会如果使用.

留言 ( 0 )

Person name
未登录用户可以发表匿名评论