小編推薦： Fundebug提供JS、微信小程序瓶籽、微信小游戲匠童，Node.js和Java錯誤監(jiān)控。真的是一個很好用的錯誤監(jiān)控服務(wù)塑顺，眾多大佬公司都在使用汤求。
譯者按： 一家叫GeekyAnts的印度公司開發(fā)了Vue Native，基于React Native實(shí)現(xiàn)。
- 原文: Introducing Vue Native
- 譯者: Fundebug
為了保證可讀性首昔，本文采用意譯而非直譯寡喝。另外，本文版權(quán)歸原作者所有勒奇，翻譯僅用于學(xué)習(xí)。
盡管整個JavaScript社區(qū)對Vue的情感是比較微妙的(不懂為啥)巧骚，但也不能阻止我嘗試用Vue Native來開發(fā)移動App赊颠。
Hello World
這是一個很簡單的例子，僅僅將“Hello World”在頁面上展示出來劈彪。
動機(jī)
作為一個前端開發(fā)竣蹦，我很喜歡HTML的簡潔。直接編寫代碼沧奴，輔以CSS來定制樣式痘括。Vue的.vue文件提供了類似的體驗(yàn)。
Vue有豐富的功能：支持模板化滔吠、樣式定義纲菌、基于Vuex的狀態(tài)管理和路由。這使得它不失為一個完美的選擇疮绷。
使用Vue Native翰舌，我們在開發(fā)中也有著類似的體驗(yàn)。
初次嘗試
在網(wǎng)上簡單的搜索冬骚，就可以發(fā)現(xiàn)SmallComfort開發(fā)的react-vue項(xiàng)目椅贱。react-vue將Vue文件翻譯到React和React Native組件。感謝react-vue的作者解決了很多問題只冻。 Vue Native是同樣的庇麦。
Vue Native編譯到React Native
Vue Native依賴React Native。當(dāng)你使用vue-native-cli初始化一個新的app喜德，入口文件是App.vue山橄。
就像.js文件一樣，你可以用很多.vue文件來組合一個.vue文件住诸。實(shí)際上驾胆，所有的.vue文件到翻譯到以.js后綴的React Native組件。如果想了解更多贱呐，請參考此處丧诺。
雙向綁定的例子
Vue Native同樣支持使用v-model來做數(shù)據(jù)雙向綁定。
<template>
<text-input v-model=”name” />
</template>
<script>
export default {
data: function() {
return {
name: "John Doe"
};
}
};
</script>
循環(huán)
你可以使用v-for指令來寫循環(huán)奄薇，和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應(yīng)用
我們使用Vue Native重寫了KitchenSink應(yīng)用，你可以去這里下載源碼：GeekyAnts/KitchenSink-Vue-Native。
Todo應(yīng)用
我們GeekyAnts的高級軟件工程師Ankit Singhania使用Vue Native寫了一個簡單的ToDo應(yīng)用呵晚。
如何開始
為了使用Vue Native眉枕，你首先需要安裝React Native。根據(jù)這里的步驟來安裝责循。
下一步歌粥，使用npm安裝Vue Native CLI。
npm install -g vue-native-cli
之后金矛，你就可以初始化一個Vue-Native項(xiàng)目了：
vue-native init <projectName>
cd <projectName>
你可以直接使用npm run來在IOS/Andriod模擬器上運(yùn)行這個Vue Native應(yīng)用了芯急。
指令
在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>
執(zhí)行結(jié)果如下：
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>
執(zhí)行結(jié)果如下：
v-model
v-model指令用來創(chuàng)建一個雙向綁定的元素，可以基于一個input元素或則一個組件故俐。它內(nèi)部是將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輸入內(nèi)容购披，它會被存儲到textContent中杖挣，然后會直接顯示到text-input的下方。
執(zhí)行結(jié)果如下：
Vue Native路由
Vue Native使用vue-router來實(shí)現(xiàn)導(dǎo)航邏輯刚陡。我們來看看下面的實(shí)現(xiàn)：
使用Vuex做狀態(tài)管理
你可以使用Vuex來管理狀態(tài)惩妇，詳情查看：Vuex。
局限性和已知問題
- 有時候?qū)τ谝粋€組件筐乳，你需要創(chuàng)建一個返回JSX代碼的函數(shù)歌殃；比如在FlatList中的renderItem函數(shù)就必須返回JSX。
- 報錯是在React Native層面的蝙云，并沒有映射到Vue Native代碼氓皱。我們正在優(yōu)化這個問題。
可以用在生產(chǎn)環(huán)境嗎勃刨？
我們已經(jīng)使用Vue Native將整個KitchenSink重寫波材，你可以在生產(chǎn)環(huán)境使用它。不過你要記得它有局限性身隐。
Vue-Native是完全開源的廷区，可以在Github找到源代碼：vue-native-core。
關(guān)于Fundebug
Fundebug專注于JavaScript贾铝、微信小程序隙轻、微信小游戲埠帕、支付寶小程序、React Native玖绿、Node.js和Java線上應(yīng)用實(shí)時BUG監(jiān)控敛瓷。 自從2016年雙十一正式上線，F(xiàn)undebug累計處理了10億+錯誤事件斑匪，付費(fèi)客戶有Google呐籽、360、金山軟件秤标、百姓網(wǎng)等眾多品牌企業(yè)绝淡。歡迎大家免費(fèi)試用！
版權(quán)聲明
轉(zhuǎn)載時請注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2018/07/23/vue-native/
