Ankit Singhania, a Senior Software Developer at GeekyAnts, has also created a simple ToDo App using Vue Native.

How To Get Started

In order to use Vue Native, you will first need to install React Native on your system. Follow the steps given here to install React Native.

Next, we can install the Vue Native CLI on your system using NPM.

$ npm install -g vue-native-cli

With that, all you need to do now is initialize a new Vue-Native project directory in your system.

$ vue-native init <projectName>
$ cd <projectName>

You can now run this Vue Native app on an iOS or Android Simulator using the npm run command.

Directives

Directives are special attributes that are found in Vue. These are attributes that come with the v- prefix. Here are a few of these directives and where they can be used in Vue.

v-if and v-else

The v-if and v-else directives are used in Vue to write conditional code blocks.

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

Running this code on your system will give you this output:

v-for

The v-for directive is similar to JavaScript’s map operator.

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

Running this code on your system will give you this output:

v-model

v-model directive creates a two-way data binding on a form input element or a component. Internally it attaches value and onChangeText handler to TextInput of React Native.

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

The above code snippet creates a two-way data binding on textContent, so when the types something in the text-input, it will be stored in textContent, which will then be displayed right below the text-input field.