译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

尽管整个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>
</view>
</template>
<script>
export default {
data: function() {
return {
names: [“Gaurav”, “Neeraj”, “Sanket”, “Neeraj”]
};
}
};
</script>

App示例

KitchenSink应用

我们使用Vue Native重写了KitchenSink应用,你可以去这里下载源码:GeekyAnts/KitchenSink-Vue-Native

Todo应用

我们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 <projectName>
cd <projectName>

你可以直接使用npm run来在IOS/Andriod模拟器上运行这个Vue Native应用了。

指令

在Vue中,指令是可以说是一种特殊的属性,他们都以v-作为前缀。下面是几个常用的指令。

v-if和v-else

v-ifv-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

局限性和已知问题

  • 有时候对于一个组件,你需要创建一个返回JSX代码的函数;比如在FlatList中的renderItem函数就必须返回JSX。
  • 报错是在React Native层面的,并没有映射到Vue Native代码。我们正在优化这个问题。

可以用在生产环境吗?

我们已经使用Vue Native将整个KitchenSink重写,你可以在生产环境使用它。不过你要记得它有局限性。

Vue-Native是完全开源的,可以在Github找到源代码:vue-native-core

博客结尾

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

版权声明

转载时请注明作者Fundebug以及本文地址:

https://blog.fundebug.com/2018/07/23/vue-native/

详解Vue Native的更多相关文章

  1. 详解Vue.js 技术

    本文主要从8个章节详解vue技术揭秘,小编觉得挺有用的,分享给大家. 为了把 Vue.js 的源码讲明白,课程设计成由浅入深,分为核心.编译.扩展.生态四个方面去讲,并拆成了八个章节,如下: 准备工作 ...

  2. 详解vue的数据binding原理

    自从angular火了以后,各种mv*框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点…性能 ...

  3. 详解Vue 方法与事件处理器

      本篇文章主要介绍了详解Vue 方法与事件处理器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 方法与事件处理器 方法处理器 可以用 v-on 指令监听 DOM 事件 ...

  4. 详解vue 路由跳转四种方式 (带参数)

    详解vue 路由跳转四种方式 (带参数):https://www.jb51.net/article/160401.htm 1.  router-link ? 1 2 3 4 5 6 7 8 9 10 ...

  5. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  6. 详解Vue中的computed和watch

    作者:小土豆 博客园:https://www.cnblogs.com/HouJiao/ 掘金:https://juejin.cn/user/2436173500265335 1. 前言 作为一名Vue ...

  7. 详解Vue的slot新用法

    摘要: 理解Vue插槽. 作者:前端小智 原文:vue 2.6 中 slot 的新用法 Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue ...

  8. 【Vue】详解Vue生命周期

    Vue实例的生命周期全过程(图) (这里的红边圆角矩形内的都是对应的Vue实例的钩子函数) 在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之 ...

  9. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

随机推荐

  1. OJ001

    #include<stdio.h> int main(){ int a,b; while (scanf("%d%d",&a,&b)!=EOF){ pri ...

  2. Data Center(5): 实例

    我们来分析从外网访问内网的服务的具体过程: 首先我们看DNS和Load Balancer是怎么工作的. 客户端要访问我们的系统,发送了一个https请求,https://nova.mycompany. ...

  3. Vue 学习笔记 — filter

    简书 对将要插入html的对象进行处理 一个简单的Vue示例 基本过滤器用法 带参数的过滤器 全局过滤器 (这张图片有点问题,最后显示的应该是 hello world不是null) 过滤器的简单应用 ...

  4. 容器云技术选择之kubernetes和swarm对比

    swarm和k8s本质都是容器编排服务.它们都能把底层的宿主机抽象化,然后将应用从以构建好的镜像开始,最终以docker的方式部署到宿主机上.   应该选择哪种方案作为我们的容器云服务呢? 我觉得k8 ...

  5. JAVA小白开发环境配置(编译器为Idea)

    JDK配置 1.首先到官网下载最新版JDK:Oracle官网下载 Accept License Agreement–>下载适合自己pc版本的jdk(此处以64位windows为例.x86是32位 ...

  6. 音视频编解码技术(一):MPEG-4/H.264 AVC 编解码标准

    一.H264 概述 H.264,通常也被称之为H.264/AVC(或者H.264/MPEG-4 AVC或MPEG-4/H.264 AVC) 1. H.264视频编解码的意义 H.264的出现就是为了创 ...

  7. Go语言单元测试与基准测试

    目录 单元测试 概述 go test参数解读 单元测试日志 基准测试 基础测试基本使用 基准测试原理 自定义测试时间 测试内存 控制计时器 Go语言拥有一套单元测试和性能测试系统,仅需要添加很少的代码 ...

  8. [Swift]LeetCode120. 三角形最小路径和 | Triangle

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  9. Spring Boot 最核心的 25 个注解,都是干货!

    学习和应用 Spring Boot 有一些时间了,你们对 Spring Boot 注解了解有多少呢?今天栈长我给大家整理了 Spring Boot 最核心的 25 个注解,都是干货! 你所需具备的基础 ...

  10. Linux指令装图像化界面

    1.对yum进行配置安装.//这是重点 [root@localhost ~]# yum groupinstall "GNOME Desktop" "Graphical A ...