vue-framework-for-Apache-Weex
vue-framework-for-Apache-Weex copied to clipboard
From *.we file to *.vue file
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
Weex:
<script type="data"></script>
<script type="config"></script>
Vue:
// 手工调整?
data 有机会转成 root 组件的 data option,config 在 vue 里暂时没有实际意义,可以忽略先
for future references, will *.we file be replaced by *.vue file entirely?
We will supply a way (or tool) to do this job. And officially we will use Vue 2.0 as our recommendation.