Update template

master
yutent 2024-06-17 12:02:07 +08:00
parent 26e59336a9
commit 3a1bd47a54
1 changed files with 16 additions and 3 deletions

@ -74,6 +74,8 @@ class Foo extends Component {
### 条件渲染
> 限制于原生的字符串模板的语法限制, 不支持复杂的流程语句, 所以只能用`三元表达式`等简单的表达式来实现。
>> v1.12.0 起, 可使用`when()`方法代替三元表达式; `which()`方法代替`switch`流程语句。
```js
@ -103,7 +105,7 @@ class Foo extends Component {
### 节点属性绑定
> 这个, 在上一个例子中, 已经有用到了, 模板中的节点属性, 可以加引号, 也可以不加, 效果上完全一致, 区别只是不加引号有语法高亮。
>> 另外, 还引入了一个特殊的绑定语法, 跟`vue`一样, 在属性名前加冒号`:`, 带冒号的属性, 赋值时是直接赋值的, 而不是调用`setAttribute()`, 即意味着, 你可以通过这种方式, 传递复杂的数据类型。
>>> 另外, 由于字符串模板的原理与`vue/react`等框架不一样, 无法实现双向绑定, 需要手动实现(详见下文)。
>>> 另外, 由于字符串模板的原理与`vue/react`等框架不一样, 要实现双向绑定, 需要借助`live()`方法(详见下文)。
@ -261,10 +263,14 @@ class Foo extends Component {
### 双向绑定
> 上面提到过, 由于模板机制的原因。框架无法实现内置双向绑定。只能是开发者手动实现。实现的方式, 也比较简单, 就是手动监听一下相应的事件来自动更新属性值即可。
> 上面提到过, 由于模板机制的原因, 双向绑定需要借助`live()`方法实现, 当然, 也可以自行监听事件实现。
>> `注意:` `live()`方法是**v1.12.0**开始才支持。
```js
import { html, live, Component } from 'wkit'
class Foo extends Component {
static props = {
@ -272,7 +278,14 @@ class Foo extends Component {
}
render() {
return html`<input value=${this.value} @input=${ev => (this.value = ev.target.value)} >`
return html`
<!-- 自行监听input事件实现 -->
<input value=${this.value} @input=${ev => (this.value = ev.target.value)} >
<!-- 借助live()实现 -->
<input value=${live.bind(this, 'value')} >
`
}
}