DOC.md

DOC

---

${ }

Is consistent with js `${}` template string syntax. Both text nodes and attribute nodes work. You can insert any variable or expression。

<script>
  let value = 'world'

  const computed = {
    get value() {
      return value.toUpperCase()
    },
  }
</script>

<div title="Hello ${value} !">Hello ${computed.value} !</div>

Equivalent to the following JS

div.setAttribute('title', `Hello ${value} !`)
div.innerText = `Hello ${computed.value} !`

object, array Will try to convert to json. undefined Will not be output

---

.prop

prop means dom property

Same syntax as js obj.key、obj[keyVar]

The following is equivalent to js div.title = text

<div .title="text">...</div>

Output rich text

The following is equivalent to js div.innerHTML = html

In fact, the browser will automatically convert to lowercase .innerhtml, but the framework will automatically map any js dom property

<div .innerHTML="html"></div>

this represents the current node, You can access other properties of the current node

<div .title="this.tagName">...</div>

Assigns the current node to a variable

.ref can be any .prop, just to get the current node

<canvas .ref="el = this"></canvas>

The following is equivalent to js div[propVar] = value

Due to HTML limitations, this way only supports variable names that are lowercase and do not allow spaces. But you can use the following way ... to replace

<div [propVar]="value">...</div>

Batch Setting Properties

The following is equivalent to js Object.assign(div, object)

<div ...="object"></div>

The following is equivalent to js Object.assign(div, { [property]: value })

<div ...="{ [property]: value }"></div>

Custom prop setter

for example

Component.defineSetter('asset', function (pass) {
  if (!pass) {
    console.error('asset:', value)
    debugger
  }
})

<div .asset="a == b"></div>

.class

Built-in setter add or remove css classes by bool

<div class="some" .class="{active: bool}" />

.style

Built-in setter automatically +'px' on demand

<div style="height:10px" .style="{width: 10}" />

---

if

Same syntax as js if, else if, else

<div if="(bool)"></div>

<div if="(bool)"></div>
<div else></div>

<div if="(bool)"></div>
<div else if="(bool)"></div>
<div else if="(bool)"></div>
<div else></div>

The parentheses can be omitted

---

for

Same syntax as js for..in, for..of

<ul>
  <li for="(var key in object)">${object[key]}</li>
</ul>

<ul>
  <li for="(const item of array)" onclick="alert(item)">${item}</li>
</ul>

<ul>
  <li for="(const {id, name} of array)" onclick="alert(id)">${name}</li>
</ul>

The parentheses can be omitted

If you're used to writing (item, key?, index?) in list that's fine

It has the same name as the for attribute of the label tag, but the syntax is different, so they do not conflict

If the same node for + if exists at the same time, for runs before if, regardless of the writing order. If you want to filter data, it is recommended to do so in the JS layer

---

on

Consistent with the native DOM0 syntax, this refers to the current node and has an event variable named event, which accepts the code to execute

<button onclick="console.log(this, event)">button</button>

The .prop syntax can also register events, which accept a function

The following is equivalent to js button.onclick = console.count

<button .onclick="console.count">button</button>

---

.prop + on (two-way-biding)

.value + oninput

<input .value="text" oninput="text=this.value" />

Equivalent to the following js

// Model -> View
input.value = text

// View -> Model
input.oninput = function (event) {
  text = this.value
}

Input Number type

<input .value="number" oninput="number=Number(this.value)||0" />

contenteditable + .innerText + oninput Any element can be two-way-biding

<div
  contenteditable="true"
  .innerText="text"
  oninput="text=this.innerText"
></div>

---

Component

An html is a component, and each component instance has its own scope

<!-- MyComponent.html -->
<script>
  let value = 'defaultValue'
  let log = console.log
</script>

<div .onclick="log">${value}</div>

Assigns values to internal variables of child components using the .prop syntax. You can pass any value, including functions, so that they have two-way communication

<!-- App.html -->
<script>
  import MyComponent from './MyComponent.html'
</script>

<main>
  <MyComponent ...="{value:'myValue'}"></MyComponent>
  <!-- 或者 -->
  <div new="MyComponent" .log="alert"></div>
</main>

this.constructor is the class (constructor) of the current component, which can perform recursion, taking care to have termination conditions to avoid endless loops

<script>
  let number = 10
</script>

<main>
  <div>${number}</div>
  <div if="number" new="this.constructor" .number="number-1" />
</main>

mode component mode

ets how the component is referenced. One component allow multiple root nodes

• replace: By default, the component root node is replaced with the original label location
• wrap: Keep the original label and include the component root node
• web: Use the web component

<User mode="wrap"></User>
<div new="User" mode="web"></div>

Setting the Default mode

Component.defaultMode = 'replace'