속성

h-scope

여기서부터 스코프입니다. 문서 어디에 언제 끼워지든 살아납니다. 바깥 스코프의 값은 보지 않습니다 — 받을 것은 h-inherit · h-inject 로 적습니다. 값이 함수면 도구를 넘겨 호출하고, async 함수면 끝날 때까지 안쪽을 살리지 않습니다.

h-state

스코프 호스트를 만들지 않고, 그 요소부터 안쪽에 별도의 리액티브한 값 공간을 만듭니다. 경계가 아니라서 바깥 값을 그대로 보고 씁니다 — $host · $props · $emit 은 감싼 h-scope 의 것입니다. h-for 의 줄마다 자기 값을 줄 때 씁니다. 객체만 받습니다.

h-scope 안에서만 뜻이 있습니다. h-if · h-for 가 그린 것은 살아나지만, 나중에 혼자 끼워진 h-state 는 살아나지 않습니다 — 나중에 끼워져 살아나는 것은 h-scope 와 컴포넌트뿐입니다.

h-inherit

바로 바깥 스코프 한 단계에서 이어 받을 이름. 식이 아니라 이름 목록입니다. 읽고 쓰는 것이 바깥과 이어집니다.

h-provide

그 요소부터 안쪽에 값을 내려 줍니다. 식은 요소가 놓인 자리(바깥)에서 풀고, 누가 처음 받을 때 계산되며 읽은 값이 바뀌면 따라 바뀝니다. 같은 요소의 h-scope 보다 먼저 서고, h-scope 가 없는 요소에 달아도 됩니다. h-provide:shop-name 은 shopName 으로 받습니다.

h-inject

위에서 내려 준 값을 그 이름으로 읽습니다. 식이 아니라 이름 목록이고, 몇 단계 위든 내려 준 곳에서 받습니다. h-scope · h-state · 보통 요소 · 컴포넌트 태그에 답니다.

받은 이름은 읽기 전용입니다. 이름에 넣으면 콘솔 에러를 내고 값은 그대로입니다(받은 객체의 속은 바꿀 수 있습니다). 받은 값 자체를 갈아야 하면 내려 준 쪽에 요청합니다 — 받은 쪽이 이벤트로 알리고, 내려 준 쪽이 자기 값을 바꿉니다.

h-props

서버가 건네는 값. JSON 으로만 읽고, 식으로 실행하지 않습니다. 스코프에서는 $props 로 읽기만 합니다 — 값을 바꾸는 것은 서버입니다. 서버가 조각을 다시 랜더링해 보내면 새 값으로 바뀝니다.

h-bind

속성을 값에 묶습니다. 줄여서 : 로 씁니다.

h-on

이벤트를 듣습니다. 줄여서 @ 로 씁니다.

h-text

요소의 글자를 값으로 채웁니다 — 값을 속성에 적습니다. 글자 안에 {{ }} 로 적으려면 바로 아래의 h-text-inline 입니다.

h-text-inline

이 요소의 바로 아래 글자에서 {{ }} 를 읽습니다. 안쪽 요소로는 이어지지 않습니다. 없으면 {{ }} 는 글자 그대로 남습니다. 서버가 랜더링한 사용자 글에 {{ }} 가 들어 있어도 실행되지 않게 하려는 것입니다.

안쪽 요소의 글자까지 읽으려면 값에 선택자를 적습니다. 쉼표로 여러 개를 적습니다. * 는 안쪽 전체입니다. > 로 시작하면 붙인 요소에서부터 걸음을 셉니다 — >* 는 자식, >*>* 는 손자, >*, >*>* 는 둘 다입니다. 안쪽의 h-scope · 컴포넌트 · h-pre 는 넘지 않고, h-text · h-html 이 붙은 요소에서도 멈춥니다. 같은 요소에 h-text 나 h-html 과 함께 붙으면 그쪽이 이깁니다. 서버가 랜더링하는 사용자 글이 맞는 요소 안에 있으면 그 글도 읽히므로, 필요한 요소만 적습니다.

h-html

요소의 안쪽 HTML 을 값으로 채웁니다. 넣은 HTML 은 글로 다룹니다. 그 안의 h-scope 나 컴포넌트 태그는 살아나지 않습니다(h-pre 와 같습니다). 사용자가 쓴 글은 서버에서 거른 뒤에 넣습니다.

h-model

입력과 값을 서로 맞춥니다. 서버가 랜더링한 값이 처음 값이 됩니다.

화면이 바뀌었을 때만 값에 적습니다. 값을 바꾼 직후에는 화면이 아직 옛 모습이어도, 그때 온 input · change 이벤트가 값을 되돌리지 않습니다. 요소만 쥐고 값을 읽고 쓰려면 $model 을 씁니다.

h-show

값에 따라 보이고 숨깁니다.

h-if

값에 따라 DOM 에 넣고 뺍니다. h-else 가 뒤따를 수 있습니다.

h-for

목록만큼 되풀이합니다.

h-computed

그 요소와 안쪽에서 읽는 계산값. 읽기 전용입니다. h-scope 요소에 달면 스코프 전체에서 보입니다. h-computed:total-price 는 totalPrice 로 읽습니다. 이름이 없으면 콘솔 에러 — 값 없이 일만 할 때는 h-effect 입니다.

h-effect

읽은 값이 바뀔 때마다 식을 다시 실행합니다. 값을 내지 않습니다 — 값이 필요하면 h-computed 입니다.

수식어를 붙이면 값을 따라 돌지 않고 그 노드의 때에 한 번 돕니다. h-effect.mounted 는 노드가 살아난 뒤, h-effect.unmounted 는 노드가 문서에서 내려갈 때, h-effect.sealed 는 감싼 스코프가 $host.seal() 로 봉해지기 직전입니다. 봉할 때는 .unmounted 가 돌지 않습니다 — 두 때 모두 할 일은 h-effect.sealed.unmounted 로 적습니다. h-if · h-for 로 그려지고 걷히는 요소마다 돕니다.

h-ref

요소에 이름을 붙여 $refs 로 부릅니다.

h-keep

서버가 새로 랜더링한 HTML 은 받되, 입력하던 값은 잇습니다.

h-cloak

살아나기 전까지 숨겨 둡니다. 살아나면 속성이 사라집니다. template 에 붙이면 스코프가 준비된 뒤에 내용이 들어옵니다.

h-await

비동기 작업의 상태에 따라 보입니다. 값은 식이 아니라 이름:상태 토큰이고, 상태를 빼면 pending 입니다. 값이 없으면 스코프가 준비되기 전에 보입니다.

h-pre

이 안쪽은 건드리지 않습니다. 속성도 {{ }} 도 읽지 않고 적힌 그대로 둡니다.