weexteam / vue-framework-for-Apache-Weex

This repos is a third party work, and is not developed nor maintained by Apache Weex.
MIT License
295 stars 23 forks source link

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

Open Jinjiang opened 8 years ago

Jinjiang commented 8 years ago
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 commented 8 years ago
Weex:
<script type="data"></script>
<script type="config"></script>
Vue:
// 手工调整?
Jinjiang commented 8 years ago

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

maulshh commented 8 years ago

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

Jinjiang commented 8 years ago

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