译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。
- 原文: Introducing Vue Native
- 译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
尽管整个JavaScript社区对Vue的情感是比较微妙的(不懂为啥),但也不能阻止我尝试用Vue Native来开发移动App。
Hello World
这是一个很简单的例子,仅仅将“Hello World”在页面上展示出来。
动机
作为一个前端开发,我很喜欢HTML的简洁。直接编写代码,辅以CSS来定制样式。Vue的.vue文件提供了类似的体验。
Vue有丰富的功能:支持模板化、样式定义、基于Vuex的状态管理和路由。这使得它不失为一个完美的选择。
使用Vue Native,我们在开发中也有着类似的体验。
初次尝试
在网上简单的搜索,就可以发现SmallComfort开发的react-vue项目。react-vue
将Vue文件翻译到React和React Native组件。感谢react-vue的作者解决了很多问题。 Vue Native是同样的。
Vue Native编译到React Native
Vue Native依赖React Native。当你使用vue-native-cli
初始化一个新的app,入口文件是App.vue
。
就像.js
文件一样,你可以用很多.vue
文件来组合一个.vue
文件。实际上,所有的.vue文件到翻译到以.js后缀的React Native组件。如果想了解更多,请参考此处。
双向绑定的例子
Vue Native同样支持使用v-model
来做数据双向绑定。
<template>
<text-input v-model=”name” />
</template>
<script>
export default {
data: function() {
return {
name: "John Doe"
};
}
};
</script>
循环
你可以使用v-for
指令来写循环,和JavaScript的map类似。
<template>
<view>
<text v-for=”name in names” v-bind:key="name">{
{name}}</text>