Vdt v1.3 发布

Intact所基于的模板引擎Vdt发布了v1.3版本，该版本带来了以下新特性，发布日志

  1. add: 对于组件可以双向绑定任意属性，而非仅仅只是value属性 Javey/Intact#7
  2. add: 更详细的报错信息，可以标示出具体的错误位置 #9
  3. add: 支持同一事件绑定多次回调函数，可以在v-model占用了事件属性后，再次绑定该事件属性，详见双向绑定(v-model) Javey/Intact#9
  4. add: 新增虚拟标签template用于包裹多个元素，template只会渲染子元素，自身不会被渲染，详见模板语法 template #10
  5. add: 支持带参数的block，详见模板继承 带参数的block #8

  6. add: 模板编译后的代码进行了美化，方便调试

  7. change: 现在skipWhitespace也会去掉标签和插值分隔符之间的空白字符 #11

报错信息

之前vdt模板编译出错时，报错信息不够准确，给排查问题造成了很大的困扰。改进后的报错信息，可以像babel那样指定到具体的行和列，并打印出代码片段，例如：

  1. ERROR in ./components/checkbox/index.vdt
  2. Module build failed: Error: Unclosed tag: </span> (19:6)
  3. > 19 |     <span class="k-wrapper">
  4.      |      ^

双向绑定组件的任意属性

对于组件Intact，之前只能通过v-model双向绑定value属性，现在可以绑定任意属性了，用法如下：

  1. <Pagination v-model="page" v-model:limit="size" />

绑定对象的子属性也是可以的

  1. <Component v-model:data.age="age" />

同一事件绑定多个函数

新版支持同一个事件，绑定多个回调函数，注意不是传入数组，而是书写多次该事件属性，例如：

  1. <div ev-click={callbackA} ev-click={callbackB}>click</div>

上例中，当点击div时，callbackA和callbackB会依次执行。

大多数情况下我们无需给同一事件绑定多个事件回调函数，但是由于v-model语法糖的存在，它的编译结果会占用一个事件属性。有了该特性，我们依然可以再次添加同名的事件属性，例如：

  1. <input v-model="data" ev-input={callback} />

它等价于(以下并非真实编译结果)

  1. <input value={data} ev-input={(e) => data = e.target.value} ev-input={callback} />

此时自定义的callback回调函数，也会在input事件触发时执行

template标签

template是一个伪元素，它只会渲染子元素，自身不会被渲染成任何内容。这在我们结合v-for或v-if等指令，来渲染和判读多个元素时提供了便利。

  1. <dl>
  2.     <template v-for={list}>
  3.         <dt>{value.name}</dt>
  4.         <dd>{value.age}</dd>
  5.     </template>
  6. </dl>
  1. {
  2.     "list": [
  3.         {"name": "Javey", "age": 18},
  4.         {"name": "Tom", "age": 20}
  5.     ]
  6. }

渲染结果如下：

  1. <dl>
  2.     <dt>Javey</dt>
  3.     <dd>18</dd>
  4.     <dt>Tom</dt>
  5.     <dd>20</dd>
  6. </dl>

带参数的block

block可以传递参数，我们可以在父模板中传递参数给子模板，子模板中接受参数后，可以根据不同的数据渲染不同的结果。这在v-for渲染中很有用，我们可以动态每一次渲染的结果。这类似vue中的slot-scope，不同的是：和所有的block一样，我们可以通过parent()引用父模板中定义的内容。

使用方法如下：

  1. 首先我们需要在父模板中给block指定实参，通过args属性指定，该属性值是一个数组
  2. 然后在子模板中给block指定形参，通过params属性指定，该属性值是一个字符串
  1. // @file ./list.vdt
  2. <ul>
  3.     <li v-for={data}>
  4.         <b:item args={[value, key]}>{value.name}</b:item>
  5.     </li>
  6. </ul>
  1. // @file ./child.vdt
  2. var list = require('./list.vdt');
  4. <t:list data={[
  5.     {name: 'Javey', age: 18},
  6.     {name: 'Tom', age: 20}
  7. ]}>
  8.     <b:item params="item, index">
  9.         {index + 1}: {parent()}, {item.age}
  10.     </b:item>
  11. </t:list>

渲染结果如下：

  1. <ul>
  2.     <li>1: Javey, 18</li>
  3.     <li>2: Tom, 20</li>
  4. </ul>

上例中，父模板的item block通过args传入value key当做实参，子模板通过parmas定义形参。可以看到，我们依然可以通过parent()访问到父模板中定义的内容