Weex 和 Vue 2.x 的语法差异

Overview

Reference

See the source code of weex-vue-migration for more details:

• template-rewriter
• script-rewriter

LifeCycle Hooks 生命周期钩子

在weex中，使用{{…}}在<template>中绑定在<script>里定义的数据；在vue中，需要在要绑定的属性前加 : 。如以下示例。

• 类名

  • weex

  <div class="btn btn-{{type}}"></div>

  • vue

  <div :class="[‘btn‘, ‘btn-‘ + type]"></div>

• 样式绑定

  • weex

    <div style="color:{{textColor}}"></div>

  • vue

    <div :style="{color: textColor}"></div>

• weex

  <image src="..." if="{{shown}}"></image>

  or

  <image src="..." if="shown"></image>

• vue

  <image src="..." v-if="shown"></image>

• weex: repeat

  • $index为索引

    <div repeat="{{list}}"> <text>No. {{$index + 1}}</text> <div>

    or

    <div repeat="{{v in list}}"> <text>No. {{$index + 1}}, {{v.nickname}}</text> </div>

  • 对象参数的顺序

    <div repeat="{{(key, value) in list}}"> <text>No. {{key + 1}}, {{value.nickname}}</text> </div>

  • track-by

    <div repeat="{{item in items}}" track-by="item.id" class="{{gender}}"></div>

• vue: v-for

  • 移除$index索引

  • 对象参数的改变：改为(value, key), 与通用的对象迭代器保持一致

    <div repeat="{{(value, key) in list}}"> <text>No. {{key + 1}}, {{value.nickname}}</text> </div>

  • track-by 替换为v-bind

    <div v-for="item in items" v-bind:key="item.id">

• weex

  data: { value: ‘x‘ }

• vue

  props: { value: { default: ‘x‘ } }

  动态数据

  data: function () { return { value: ‘x‘ } }

• 获取节点

  • weex: this.$el(‘xxx‘)

    <template> <container> <text id="top">Top</text> </container> </template> <script> module.exports = { methods: { toTop: function () { var top = this.$el(‘top‘) } } } </script>

  • vue

    this.$refs.xxx

    ?

• 事件绑定

  • weex

    <div onclick="handler"></div>

  • vue

    <div @click="handler"></div>

• 事件触发

  • weex: dispatch和broadcast

    this.$dispatch()

    this.$broadcast()

  • vue: emit

    this.$emit()

  注：Weex 的 $dispatch 与组件无关，在任意组件中都可以通过 $on 捕获到，Vue 的$emit 用于触发组件(标签)的自定义事件。

• 原生事件

  • weex

    onclick="xxx"

  • vue

    @click.native="xxx"

Weex 和 Vue 2.x 的语法差异

原文：http://www.cnblogs.com/hehey/p/6295482.html