支持特性

基本语法

支持 Vue 的基本模版语法，包括 v-for、v-if 等。

  1. <!-- v-if & v-for -->
  2. <div v-for="(item, i) in list">
  3.   <div v-if="isEven(i)">{{ i }} - {{ item }}</div>
  4. </div>
  6. <!-- style & class -->
  7. <div :class="classObject"></div>
  8. <div :class="{ active: true }"></div>
  9. <div :class="[activeClass, errorClass]"></div>
  10. <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  11. <div :style="styleObject"></div>
  12. <div :style="[baseStyles, overridingStyles]"></div>

注：class 暂时不能用在组件上

插值表达式

模版中的差值表达式支持写复杂的表达式、方法调用

支持在模版中写复杂的表达式、和调用 methods 上的方法。

  1. <div>
  2.   <div>{{ message.toUpperCase() }}</div>
  3.   <div>{{ toUpperCase(message) }}</div>
  4. </div>

filter

支持 filter

  1. <div>
  2.   <div>{{ message | toUpperCase }}</div>
  3.   <div>{{ date | dateFormatter('yyyy-MM-dd') }}</div>
  4. </div>

slot

支持基本 slot 功能，包括具名 slot。

  1. <div>
  2.   <Container>
  3.     <Card>
  4.       <div slot="head"> {{ title }} </div>
  5.       <div> I'm body </div>
  6.       <div slot="foot"> I'm footer </div>
  7.     </Card>
  8.   </Container>
  9. <div>

注：暂不支持将 slot 一层层传递下去，例如

CompA template:

  1. <div>
  2.   <CompB>
  3.     <slot></slot>
  4.   </CompB>
  5. </div>

CompB template:

  1. <div>
  2.   <slot></slot>
  3. </div>

page template:

  1. <div>
  2.   <CompA>
  3.     page title: {{ title }}
  4.   </CompA>
  5. </div>

目前 CompA 无法将从 page 接收到的 slot 片段传递给它的子组件 CompB。

slot-scope

支持 slot-scope。

page template:

  1. <div>
  2.   <CompA>
  3.     <span slot-scope="scopeProps">{{ scopeProps.item }}</span>
  4.   </CompA>
  5. </div>

CompA template:

  1. <div v-for="(item, i) in list">
  2.   {{ i }} - <slot :item="item"></slot>
  3. </div>

v-html

v-html 需要添加插件 @megalo/vhtml-plugin，并引入模版解析库 octoparse

webpack 配置，指定解析库的路径、和名称。

  1. {
  2.   // ...
  3.   target: createMegaloTarget( {
  4.     // ...
  5.     htmlParse: {
  6.       templateName: 'octoParse',
  7.       src: _.resolve('./node_modules/octoparse/lib/platform/wechat')
  8.     }
  9.   } )
  10. }

页面入口安装插件

  1. import Vue from 'vue'
  2. import VHtmlPlugin from '@megalo/vhtml-plugin'
  4. Vue.use(VHtmlPlugin)

模版中使用

  1. <div v-html="'<h1>megalo</h1>'"></div>

事件

除了支持事件绑定以外，还支持部分修饰符

  1. <button @click="onClick"></button>

支持修饰符：

  • stop，用小程序 catch 绑定事件实现，例如 @tap.stop => catchtap
  • capture，用小程序的 capture 绑定事件实现，例如 @tap.capture => capture-bind（支付宝小程序不支持）
  • self（实验），目前利用特定的 data-set 标记元素实现
  • once，模拟 removeListener 实现

v-text

  1. <div v-text="'I am text'"></div>