随笔分类 -  StencilJS

StencilJS 相关知识点记录,主要包含其框架的学习和使用
摘要:StencilJs 学习之 JSXStencil 组件使用 `JSX` 渲染,这是一种流行的声明式模板语法。每个组件都有一个渲染函数,它返回在运行时渲染到 DOM 的组件树。 ## 基础用法 `render` 函数用于输出将绘制到屏幕上的组件树。 ```ts class MyComponent { render() { return 阅读全文
posted @ 2023-06-21 08:26 _zhiqiu 阅读(193) 评论(0) 推荐(0) 编辑
摘要:StencilJs学习之事件其实并没有所谓的 stencil Event,相反 stencil 鼓励使用 `DOM event`。然而,Stencil 提供了一个 API 来指定组件可以触发的事件,以及组件监听的事件。 这是通过 Event()和 Listen()装饰器实现的。 ## Event 装饰器 组件可以使用事件发射器 阅读全文
posted @ 2023-06-20 11:28 _zhiqiu 阅读(167) 评论(0) 推荐(0) 编辑
摘要:stenciljs 可以方便的构建交互式组件 支持以下装饰器 - component - state - prop - watch - method - element - event - listen ## Component 装饰器 `@Component` 是一个装饰器,它将 TypeScri 阅读全文
posted @ 2023-06-19 16:45 _zhiqiu 阅读(202) 评论(0) 推荐(0) 编辑
摘要:组件有许多生命周期方法,可用于了解组件何时“将”和“执行”加载、更新和呈现。可以将这些方法添加到组件中,以便在正确的时间挂接到操作中。 在组件类中实现以下方法之一,Stencil 将以正确的顺序自动调用它们: ## 单组件的生命周期 ```tsx import { Component, Host, 阅读全文
posted @ 2022-12-03 14:52 _zhiqiu 阅读(84) 评论(0) 推荐(0) 编辑
摘要:## 框架介绍 `stenciljs` 是用于构建可重用、可扩展的设计系统的工具链。生成在每个浏览器中运行的小型、超快且 100% 基于标准的 Web Component。 更对介绍请参考[官方网站](https://stenciljs.com/) ## 创建项目 ### 使用脚手架创建项目 ``` 阅读全文
posted @ 2022-12-02 16:26 _zhiqiu 阅读(201) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示