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

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

Open
Jinjiang opened this issue Sep 8, 2016 · 4 comments
Open

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

Jinjiang opened this issue Sep 8, 2016 · 4 comments
Assignees

Comments

@Jinjiang
Copy link
Contributor

Jinjiang commented Sep 8, 2016

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
@songsiqi
Copy link

songsiqi commented Oct 5, 2016

Weex:
<script type="data"></script>
<script type="config"></script>
Vue:
// 手工调整?

@Jinjiang
Copy link
Contributor Author

Jinjiang commented Oct 5, 2016

data 有机会转成 root 组件的 data option,config 在 vue 里暂时没有实际意义,可以忽略先

@maulshh
Copy link

maulshh commented Nov 29, 2016

for future references, will *.we file be replaced by *.vue file entirely?

@Jinjiang
Copy link
Contributor Author

Jinjiang commented Dec 2, 2016

We will supply a way (or tool) to do this job. And officially we will use Vue 2.0 as our recommendation.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants