用于 NativeScript 的全新 Vue

您是否曾经渴望尝试软件的早期版本？在分叉一个新构建的仓库并在您的移动模拟器上尝试它时，有一种独特的魅力和兴奋感，展现出它所有的闪亮之处。当我查看由优秀的 Igor Randjelovic 构建的项目时，我感受到了这种感觉，该项目集成了用于 NativeScript 的 Vue.js。是否希望使用 Vue.js 而不是 Angular 或纯原生 NativeScript 来编写您的 NativeScript 应用程序？不用再犹豫了。

有兴趣了解更多关于 NativeScript 和 Vue 的信息吗？观看 YouTube 上的 NativeScript-Vue 2.0 网络研讨会

{
  "main": "app-with-list-view.js",
  "name": "nativescript-template-tutorial",
  "version": "1.0.1"
}

为什么选择 NativeScript 与 Vue？

const Vue = require('nativescript-vue/dist/index')
new Vue({
    data: {
        test: 'testing',
        test2: 50,
        test3: 30
    },
    template: `
        
            <stack-layout>
                <button @tap="onTap">whatever
                <text-field v-model="test"></text-field>
                <slider v-model.number="test2">
                <slider v-model.number="test3" minvalue="-10" maxvalue="50" style="margin-top: 15;">
                
                {{ test }}
                {{ test2 }}
                {{ test3 }}
            </stack-layout>
        
    `,
    methods: {
        onTap() {
            this.test = 'changed'
            this.test2 = 42
        }
    }
}).$start()

data: {
  subreddit: '/r/funny'
},

methods: {
        onTap() {
            this.test = 'changed'
            this.test2 = 42
        }
    }

const Vue = require('nativescript-vue/dist/index')
const VueRouter = require('vue-router')
Vue.use(VueRouter)
global.process = {env: {}} // hack! a build process should replace process.env's with static strings.
const http = require("http")
const SegmentedBarItem = require('tns-core-modules/ui/segmented-bar').SegmentedBarItem
Vue.prototype.$http = http
const Recipe = {
    data: function(){
        return {
            recipe: []
        }
    },
    created() {
        var id = this.$route.params.id
        this.fetchOneRecipe(id)
        var firstItem = new SegmentedBarItem();
        var secondItem = new SegmentedBarItem();
        var thirdItem = new SegmentedBarItem();
        firstItem.title = "Ingredients";
        secondItem.title = "Tools";
        thirdItem.title = "Procedure";
        this.recipeSteps = [ firstItem, secondItem, thirdItem ];    
    },
    template: `
    <stack-layout>
    <img :src="recipe.image" height="25%" stretch="aspectFill">            
        <stack-layout class="innerCard">
               
            <segmented-bar class="bar" bordercolor="#8AC215" :items="recipeSteps" selectedbackgroundcolor="#8AC215" #sb="" selectedindex="0" @selectedindexchange="changeTab(sb)"></segmented-bar>
            <stack-layout verticalalignment="top">
                <scroll-view height="75%" verticalalignment="top">
                    
                </scroll-view>
                <stack-layout height="25%" verticalalignment="center">
                </stack-layout>
            </stack-layout>
        </stack-layout>
    </stack-layout>
    `,
    methods: {
        fetchOneRecipe(id){
            this.$http.getJSON(`https://quicknoms-91e39.firebaseio.com/Recipes.json?orderBy="$key"&equalTo="${id}"`).then((res) => {
                this.recipe = res;
                for( var key in res) {
                    this.recipe.name = res[key].Name
                    this.recipe.image = res[key].Image
                    this.recipe.notes = res[key].Notes
                    this.recipe.procedure = res[key].Method
                }
                console.log(JSON.stringify(this.recipe))                
            }).catch((err) => {
                console.log('err..' + err)
            })
        },
        changeTab(id){
         switch (id) {
            case 0:
                this.procedure = this.ingredients; 
                break;
            case 1:
                this.procedure = this.tools; 
                break;
            case 2:
                this.procedure = this.method; 
                break;            
         }
    }
    }
}
const Recipes = {
    data: function(){
        return {
            recipes: []
        }
    },
    created() {
        this.fetchRecipes()
    },
    template: `
            <scroll-view class="green">
                <wrap-layout horizontalalignment="center">      
                    <stack-layout style="margin-left: 10" class="card" width="45%" v-for="(recipe, i) in recipes" key="i">
                        <stack-layout horizontalalignment="center" @tap="$router.push({ name:'recipe',params: {id: recipe.id} })">
                            <img :src="recipe.image">          
                            {{ recipe.name }}
                        </stack-layout>
                    </stack-layout>           
                </wrap-layout>
            </scroll-view>
    `
    ,
    methods: {
        
        fetchRecipes() {
            this.$http.getJSON(`https://quicknoms-91e39.firebaseio.com/Recipes.json`).then((res) => {
                for( var key in res) {
                    this.recipes.unshift({id : key, name: res[key].Name, image: res[key].Image})                    
                } 
            }).catch((err) => {
                console.log('err..' + err)
            })
        }
    }
}
const router = new VueRouter({
    routes: [
        {path: '/recipes', component: Recipes},
        {path: '/recipe/:id', name: 'recipe', component: Recipe},
        {path: '*', redirect: '/recipes'}
    ]
})
router.replace('/recipes')
new Vue({
    router,
    template: `
        
            <stack-layout>
                <router-view></router-view>
            </stack-layout>
        
    `   
}).$start()