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