随笔分类 - StencilJS
StencilJS 相关知识点记录,主要包含其框架的学习和使用
摘要:
Stencil 组件使用 `JSX` 渲染,这是一种流行的声明式模板语法。每个组件都有一个渲染函数,它返回在运行时渲染到 DOM 的组件树。 ## 基础用法 `render` 函数用于输出将绘制到屏幕上的组件树。 ```ts class MyComponent { render() { return
阅读全文

摘要:
其实并没有所谓的 stencil Event,相反 stencil 鼓励使用 `DOM event`。然而,Stencil 提供了一个 API 来指定组件可以触发的事件,以及组件监听的事件。 这是通过 Event()和 Listen()装饰器实现的。 ## Event 装饰器 组件可以使用事件发射器
阅读全文

摘要:stenciljs 可以方便的构建交互式组件 支持以下装饰器 - component - state - prop - watch - method - element - event - listen ## Component 装饰器 `@Component` 是一个装饰器,它将 TypeScri
阅读全文
摘要:组件有许多生命周期方法,可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中,以便在正确的时间挂接到操作中。 在组件类中实现以下方法之一,Stencil 将以正确的顺序自动调用它们: ## 单组件的生命周期 ```tsx import { Component, Host,
阅读全文
摘要:## 框架介绍 `stenciljs` 是用于构建可重用、可扩展的设计系统的工具链。生成在每个浏览器中运行的小型、超快且 100% 基于标准的 Web Component。 更对介绍请参考[官方网站](https://stenciljs.com/) ## 创建项目 ### 使用脚手架创建项目 ```
阅读全文