Skip to content
This repository was archived by the owner on Jun 6, 2019. It is now read-only.
This repository was archived by the owner on Jun 6, 2019. It is now read-only.

From *.we file to *.vue file #4

@Jinjiang

Description

@Jinjiang
Weex:
class="btn btn-{{type}} btn-sz-{{size}}"
Vue:
:class="['btn', 'btn-' + type, 'btn-sz-' + size]"

Weex:
if="{{!rightItemSrc}}"
Vue:
v-if="!rightItemSrc"

Weex:
repeat="{{item in tabItems}}"
Vue:
v-for="item in tabItems"

Weex:
onclick="onclickrightitem"
Vue:
@click="onclickrightitem"

Weex:
style="height: {{height}}; background-color: {{backgroundColor}};"
Vue:
:style="{ height: height, backgroundColor: backgroundColor }"

Weex:
src="{{rightItemSrc}}"
Vue:
:src="rightItemSrc"

Weex:
onclick="xxx"
Vue: // 自定义组件的原生事件
@click.native="xxx"

Weex:
<content></content>
Vue:
<slot></slot>

Weex:
<text>
  {{title}}
</text>
Vue: // 头尾空格和折行会计算在内
<text>{{title}}</text>

Weex:
data: {
  level: 1,
  value: ''
}
Vue:
props: {
  level: { default: 1 },
  value: { default: '' }
}

Weex:
require('weex-components')
Vue: // 通过 components 字段显性定义
components: {
  item: require('weex-vue-components/list-item.vue'),
  button: require('weex-vue-components/button.vue'),
  countdown: require('weex-vue-components/countdown.vue'),
  hn: require('weex-vue-components/hn.vue')
}

Weex:
$dispatch()/$broadcast()
Vue: // 不能完全等价迁移,部分场景需要手工调整
$emit()

Weex:
id="xxx"
Vue:
ref="xxx"

Weex:
this.$el('xxx')
Vue:
this.$refs.xxx

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions