译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。
尽管整个JavaScript社区对Vue的情感是比较微妙的(不懂为啥),但也不能阻止我尝试用Vue Native来开发移动App。
这是一个很简单的例子,仅仅将“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-cli
初始化一个新的app,入口文件是App.vue
。
就像.js
文件一样,你可以用很多.vue
文件来组合一个.vue
文件。实际上,所有的.vue文件到翻译到以.js后缀的React Native组件。如果想了解更多,请参考此处。
Vue Native同样支持使用v-model
来做数据双向绑定。
你可以使用v-for
指令来写循环,和JavaScript的map类似。
{{name}}
我们使用Vue Native重写了KitchenSink应用,你可以去这里下载源码:GeekyAnts/KitchenSink-Vue-Native。
我们GeekyAnts的高级软件工程师Ankit Singhania使用Vue Native写了一个简单的ToDo应用。
为了使用Vue Native,你首先需要安装React Native。根据这里的步骤来安装。
下一步,使用npm安装Vue Native CLI。
$ npm install -g vue-native-cli
之后,你就可以初始化一个Vue-Native项目了:
$ vue-native init$ cd
你可以直接使用npm run
来在IOS/Andriod模拟器上运行这个Vue Native应用了。
在Vue中,指令是可以说是一种特殊的属性,他们都以v-
作为前缀。下面是几个常用的指令。
v-if
和v-else
用来编写条件语句。
A B C Not A/B/C
执行结果如下:
v-for
类似于JavaScript的map。
{{ todo.text }}
执行结果如下:
v-model
指令用来创建一个双向绑定的元素,可以基于一个input元素或则一个组件。它内部是将value和onChangeText绑定到React Native的TextInput。
{{textContent}}
上面的代码对textContent
做了双向绑定,如果在text-input输入内容,它会被存储到textContent
中,然后会直接显示到text-input
的下方。
执行结果如下:
Vue Native使用vue-router
来实现导航逻辑。我们来看看下面的实现:
你可以使用Vuex来管理状态,详情查看:Vuex。
我们已经使用Vue Native将整个KitchenSink重写,你可以在生产环境使用它。不过你要记得它有局限性。
Vue-Native是完全开源的,可以在Github找到源代码:vue-native-core。