difference-Weex-Vue2-x

Weex 和 Vue 2.x 的语法差异

Updated time: 14/06/2017

Overview

Weex Vue
生命周期 ready: function() {} mounted: function() {}
条件指令 if="{{!foo}}" v-if="!foo"
循环指令 repeat="{{item in list}}" v-for="item in list"
样式类名 class="btn btn-{{type}}" :class="['btn', 'btn-' + type]"
内联样式 style="color:{{textColor}}" :style="{ color: textColor }"
事件绑定 onclick="handler" @click="handler"
原生事件 onclick="xxx" `@click.native=”xxx”`
数据绑定 src="{{rightItemSrc}}" :src="rightItemSrc"
内容/槽 <content></content> <slot></slot>
数据初始化 data: { value: 'x' } data: function() { return { value: 'x' } }
标签 ID id="xxx" ref="xxx"
获取节点 this.$el('xxx') this.$refs.xxx

Reference

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

LifeCycle Hooks 生命周期钩子

weex vue Description
init beforeCreate 组件实例刚刚被创建，组件属性如data计算之前
created created 组件实例创建完成，属性已绑定，但DOM还未生成
beforeMount 模板编译/挂载之前
ready mounted 模板编译/挂载之后
beforeUpdate 组件更新之前
updated 组件更新之后
activated for keep-alive, 组件被激活时调用
deactivated for keep-alive, 组件被移除时调用
beforeDestroy 组件被销毁前调用
destroyed destroyed 组件被销毁后调用

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

  • 类名

    • weex

      1
      <div class="btn btn-&#123;{type}}"></div>

    • vue

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

  • 样式绑定

    • weex

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

    • vue

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

  • weex

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

    or

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

  • vue

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

  • weex: repeat

    • $index为索引

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

      or

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

    • 对象参数的顺序

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

    • track-by

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

  • vue: v-for

    • 移除$index索引

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

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

    • track-by 替换为v-bind

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

  • weex

    1
    data: { value: 'x' }

  • vue

    1
    props: { value: { default: 'x' } }

动态数据

1
data: function () { return { value: 'x' } }

  • 获取节点

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

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <template>
       <container>
        <text id="top">Top</text>
       </container>
      </template>
      <script>
      module.exports = {
        methods: {
          toTop: function () {
            var top = this.$el('top')
          }
        }
      }
      </script>

    • vue

      1
      2
      this.$refs.xxx
      ​

  • 事件绑定

    • weex

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

    • vue

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

  • 事件触发

    • weex: dispatch和broadcast

      1
      this.$dispatch()
      1
      this.$broadcast()

    • vue: emit

      1
      this.$emit()

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

  • 原生事件

    • weex

      1
      onclick="xxx"

    • vue

      1
      @click.native="xxx"