译者按: 一家叫 GeekyAnts 的印度公司开发了 vue Native, 基于 React Native 实现.
译者: Fundebug https://www.fundebug.com/
为了保证可读性, 本文采用意译而非直译. 另外, 本文版权归原作者所有, 翻译仅用于学习.
尽管整个 JavaScript 社区对 Vue 的情感是比较微妙的 (不懂为啥), 但也不能阻止我尝试用 Vue Native 来开发移动 App.
Hello World
这是一个很简单的例子, 仅仅将 "Hello World" 在页面上展示出来.
动机
作为一个前端开发, 我很喜欢 html 的简洁. 直接编写代码, 辅以 CSS 来定制样式. Vue 的. vue 文件提供了类似的体验.
Vue 有丰富的功能: 支持模板化, 样式定义, 基于 Vuex 的状态管理和路由. 这使得它不失为一个完美的选择.
使用 Vue Native, 我们在开发中也有着类似的体验.
初次尝试
在网上简单的搜索, 就可以发现 SmallComfort 开发的 https://github.com/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 组件. 如果想了解更多, 请参考此处 http://vue-native.io/docs/how-does-it-works.html .
双向绑定的例子
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>
- </view>
- </template>
- <script>
- export default {
- data: function() {
- return {
- names: ["Gaurav", "Neeraj", "Sanket", "Neeraj"]
- };
- }
- };
- </script>
App 示例
KitchenSink 应用
我们使用 Vue Native 重写了 KitchenSink 应用, 你可以去这里下载源码:.
Todo 应用
我们 GeekyAnts 的高级软件工程师 Ankit Singhania https://medium.com/@ankitsinghania 使用 Vue Native 写了一个简单的 ToDo 应用.
如何开始
为了使用 Vue Native, 你首先需要安装 React Native. 根据这里的步骤来安装.
下一步, 使用 NPM 安装 Vue Native CLI.
NPM install -g vue-native-cli
之后, 你就可以初始化一个 Vue-Native 项目了:
- vue-native init <projectName>
- cd <projectName>
你可以直接使用 NPM run 来在 iOS/Andriod 模拟器上运行这个 Vue Native 应用了.
指令
在 Vue 中, 指令是可以说是一种特殊的属性, 他们都以 v - 作为前缀. 下面是几个常用的指令.
v-if 和 v-else
v-if 和 v-else 用来编写条件语句.
- <template>
- <view class="container">
- <view class="btn-container">
- <button title="show A" :on-press="() => handleBtnClick('A')"/>
- <button title="show B" :on-press="() => handleBtnClick('B')"/>
- <button title="show C" :on-press="() => handleBtnClick('C')"/>
- </view>
- <view>
- <text v-if="type ==='A'">
- A
- </text>
- <text v-else-if="type ==='B'">
- B
- </text>
- <text v-else-if="type ==='C'">
- C
- </text>
- <text v-else>
- Not A/B/C
- </text>
- </view>
- </view>
- </template>
执行结果如下:
v-for
v-for 类似于 JavaScript 的 map.
- <template>
- <view class="container">
- <text
- class="text-container"
- v-for="todo in todos"
- :key="todo.text"
- >
- {{ todo.text }}
- </text>
- </view>
- </template>
- <script>
- export default {
- data: function() {
- return {
- todos: [
- { text: "Learn JavaScript" },
- { text: "Learn Vue" },
- { text: "Build something awesome" }
- ]
- };
- }
- };
- </script>
执行结果如下:
v-model
v-model 指令用来创建一个双向绑定的元素, 可以基于一个 input 元素或则一个组件. 它内部是将 value 和 onChangeText 绑定到 React Native 的 TextInput.
- <template>
- <view class="container">
- <text-input
- class="text-input-container"
- placeholder="Type here"
- v-model="textContent"
- />
- <text
- class="text-container"
- >
- {{textContent}}
- </text>
- </view>
- </template>
- <script>
- export default {
- data: function() {
- return {
- textContent: ""
- };
- }
- };
- </script>
上面的代码对 textContent 做了双向绑定, 如果在 text-input 输入内容, 它会被存储到 textContent 中, 然后会直接显示到 text-input 的下方.
执行结果如下:
Vue Native 路由
Vue Native 使用 vue-router 来实现导航逻辑. 我们来看看下面的实现:
使用 Vuex 做状态管理
你可以使用 Vuex 来管理状态, 详情查看: Vuex https://vuex.vuejs.org/guide/ .
局限性和已知问题
有时候对于一个组件, 你需要创建一个返回 JSX 代码的函数; 比如在 FlatList 中的 renderItem 函数就必须返回 JSX.
报错是在 React Native 层面的, 并没有映射到 Vue Native 代码. 我们正在优化这个问题.
可以用在生产环境吗?
我们已经使用 Vue Native 将整个 KitchenSink 重写, 你可以在生产环境使用它. 不过你要记得它有局限性.
Vue-Native 是完全开源的, 可以在 GitHub 找到源代码: https://github.com/GeekyAnts/vue-native-core .
博客结尾
关于 Fundebug
Fundebug https://www.fundebug.com/ 专注于 JavaScript, 微信小程序, 微信小游戏, 支付宝小程序, React Native,Node.JS 和 Java 线上应用实时 BUG 监控. 自从 2016 年双十一正式上线, Fundebug 累计处理了 10 亿 + 错误事件, 付费客户有 Google,360, 金山软件, 百姓网等众多品牌企业. 欢迎大家免费试用 https://www.fundebug.com/team/create !
来源: http://www.bubuko.com/infodetail-2976384.html