vue-framework-for-Apache-Weex icon indicating copy to clipboard operation
vue-framework-for-Apache-Weex copied to clipboard

From *.we file to *.vue file

Open Jinjiang opened this issue 8 years ago • 4 comments

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

Jinjiang avatar Sep 08 '16 17:09 Jinjiang

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

songsiqi avatar Oct 05 '16 11:10 songsiqi

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

Jinjiang avatar Oct 05 '16 18:10 Jinjiang

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

maulshh avatar Nov 29 '16 12:11 maulshh

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

Jinjiang avatar Dec 02 '16 02:12 Jinjiang