查询手册
本章节简要地汇总一下 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: 可以声明静态作用域
- 状态共享:
createStoreAPI - 自定义渲染器:
useRenderer,defineRendererAPI
Alins