詳解Vue Native

時間 2019-11-09

標籤詳解 vue native 简体版

原文原文鏈接

譯者按： 一家叫GeekyAnts的印度公司開發了Vue Native，基於React Native實現。html

原文: Introducing Vue Native
譯者: Fundebug

爲了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原做者全部，翻譯僅用於學習。前端

小編推薦：Fundebug專一於JavaScript、微信小程序、微信小遊戲，Node.js和Java線上bug實時監控。真的是一個很好用的bug監控服務，衆多大佬公司都在使用。vue

儘管整個JavaScript社區對Vue的情感是比較微妙的(不懂爲啥)，但也不能阻止我嘗試用Vue Native來開發移動App。react

Hello World

這是一個很簡單的例子，僅僅將「Hello World」在頁面上展現出來。git

動機

做爲一個前端開發，我很喜歡HTML的簡潔。直接編寫代碼，輔以CSS來定製樣式。Vue的.vue文件提供了相似的體驗。github

Vue有豐富的功能：支持模板化、樣式定義、基於Vuex的狀態管理和路由。這使得它不失爲一個完美的選擇。vue-router

使用Vue Native，咱們在開發中也有着相似的體驗。vuex

初次嘗試

在網上簡單的搜索，就能夠發現SmallComfort開發的react-vue項目。react-vue將Vue文件翻譯到React和React Native組件。感謝react-vue的做者解決了不少問題。 Vue Native是一樣的。npm

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-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的下方。

執行結果以下：