查询手册
本章节简要地汇总一下 Alins 中的核心jsx属性和语法规则,主要目的是为了帮助开发者快速查找 Alins 的使用方式。如果您是第一次阅读该文档,建议先阅读具体介绍的章节,了解各个属性和语法规则的详细介绍和示例。
这里的列表包含了几乎所有Alins概念,所以这里罗列的并不都是必须的,包含了一些 Alins 的高阶使用。
- $mount: 用于挂载dom元素到指定元素
- 事件: 与原生dom的事件命名一致,如
onclick、onmousedown
。同时事件值支持js表达式,此时可以使用 $e 变量来访问 event对象,如onclick={console.log($e.clientX)}
- 事件装饰器:
prevent、stop、capture、once、self、pure
, 使用方式:onclick:stop={console.log(1)}
- $ref: 引用dom元素
- $html: 设置innerHTML
- $attributes: 使用对象批量设置属性
- Fragment: 使用空标签和 Frag 标签都可以创建DocumentFragment
- 单属性类名:
class:a={true}
- 单属性样式:
class:color='#f44'
- 生命周期: $created,$appended,$mounted,$removed
- 双向绑定装饰器: 转换绑定的数据类型, 如
value:number={str}
- 组价: 组件入参为 props和children
- 逻辑块:
if、switch
语法;map函数;If、Switch、For、Show、Async
逻辑组件;$show
,$if
,$switch
,$for
,$async
属性 - set语法糖: 用于设置computed的set 如:
let b=a+1;set: v=>{a=v-1;}
- watch语法糖: 监听数据变更,如:
watch: a, (...args)=>{console.log(args)}
- 属性简写:
name={name}
等价于name:name
等价于$name
- 注释标注:
@reactive, @static,@shallow,@static-scope
,其中@reactive, @static可以携带参数 - 标签: $: 可以声明响应式数据,_: 可以声明静态数据,static_scope: 可以声明静态作用域
- 状态共享:
createStore
API - 自定义渲染器:
useRenderer
,defineRenderer
API