详解Vue Native

最新推荐文章于 2025-10-28 05:31:22 发布

原创

最新推荐文章于 2025-10-28 05:31:22 发布 · 5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #Vue Native

Vue Native是由GeekyAnts开发的，基于React Native的移动应用开发框架。本文介绍了Vue Native的基础用法，包括Hello World示例、动机、双向绑定、循环、指令如v-if/v-else/v-for/v-model，以及如何集成Vuex进行状态管理和路由。同时，通过KitchenSink和Todo应用的示例，展示了Vue Native在实际项目中的应用。文章还讨论了Vue Native的局限性和在生产环境中的可行性。

译者按： 一家叫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>

最低0.47元/天解锁文章