精华内容
下载资源
问答
  • Is there a version planned that is closer to how native vue components operate? It would also be specially helpful if it was compatible with Vuetify and Nuxtjs. <h3>Steps to reproduce the problem. ...
  • awesome-nativescript-vuenativescript vue的资源
  • nativescript-vue-extend 带有有用代码段的vscode扩展,用于开发NativeScript-Vue移动应用程序。 基于NativeScript XML代码片段扩展,但适用于Vue绑定,并添加了与XML模板系统无关的其他代码片段。 所有代码片段...
  • Vue + Web + Native是基于和的样板,允许同时开发Web和本机应用程序。 内容 开始之前 Vue + Web + Native使用编译所有文件。 这些是主要功能。 最新版本的vue-loader 最新版本的nativescript CSS / SCSS / SASS ...
  • NativeScript-Vue登录模板
  • NativeScript-Vue / Web代码共享应用 使用NativeScript-Vue构建的本机应用程序,可与Web应用程序共享代码。 用法 入门 git clone https://github.com/sasanksasi/nativescript-vue-code-sharing-poc.git < your> cd ...
  • 适用于NativeScript-Vue的简单路由器实现。 先决条件/要求 您自己的所有组件都必须具有唯一的名称 所有路线名称必须具有唯一的名称 您的应用需要渲染中的主框架 安装 npm install nativescript-vue-router-ns --save...
  • React Native with Vue?

    2021-01-08 08:12:48
    <div><p>Hi, Is it possible to use React native with Vue? There were no information about this in readme</p><p>该提问来源于开源项目:akxcv/vuera</p></div>
  • vue native

    2019-10-19 19:24:58
    1、示例 <el-icon icon="Setting" size="sm" @click.native="ceshi"></el-icon> 2、结论 native就是把组件变回原生DOM的一种...

    1、示例

    <el-icon icon="Setting"
    size="sm"
    @click.native="ceshi"></el-icon>
     
    2、结论
    native就是把组件变回原生DOM的一种方式,这样组件就有click等事件了。
     
    是自定义的组件(不是原生dom)!没有focus等原生事件。

    更多专业前端知识,请上【猿2048】www.mk2048.com
    展开全文
  • NativeScript + Vue + TypeScript 本机脚本类型脚本种子 这个项目使任何人都可以开始将NativeScript和Vue与TypeScript一起使用。 它是在使用nativescript-vue-template( tns create my-app --template nativescript...
  • NativeScript-Vue全局抽屉 一个Vue.js插件,可在您的NativeScript-Vue项目中引导RadSideDrawer的集成。 声明一次抽屉,然后通过组件访问抽屉。 如果您需要在App页面上放置一个抽屉,则可以使用此功能。 安装 npm ...
  • 支持NativeScript-Vue-示例 该项目是个人维护项目,由于能量有限,需要支持。 欢迎星,您的星是我最大的支持! NSVue示例 使用NativeScript-Vue构建的本机应用程序 用法 # Install dependencies npm install # ...
  • 详解Vue Native

    2019-10-06 15:50:50
    译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。 原文: Introducing Vue Native 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于...

    译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    尽管整个JavaScript社区对Vue的情感是比较微妙的(不懂为啥),但也不能阻止我尝试用Vue Native来开发移动App。

    Hello World

    这是一个很简单的例子,仅仅将“Hello World”在页面上展示出来。

    2019-03-01-vue-native.png

    动机

    作为一个前端开发,我很喜欢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>
       </view>
    </template>
    <script>
    export default {
     data: function() {
       return {
         names: [“Gaurav”, “Neeraj”, “Sanket”, “Neeraj”]
       };
     }
    };
    </script>

    App示例

    KitchenSink应用

    2019-03-01-kitchensink.gif

    我们使用Vue Native重写了KitchenSink应用,你可以去这里下载源码:GeekyAnts/KitchenSink-Vue-Native

    Todo应用

    2019-03-01-todo.gif

    我们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-ifv-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>

    执行结果如下:

    2019-03-01-vue-if-else.gif

    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>

    执行结果如下:

    2019-03-01-vue-for.gif

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

    执行结果如下:

    2019-03-01-vue-model.gif

    Vue Native路由

    Vue Native使用vue-router来实现导航逻辑。我们来看看下面的实现:

    2019-03-01-nav.gif

    使用Vuex做状态管理

    你可以使用Vuex来管理状态,详情查看:Vuex

    局限性和已知问题

    • 有时候对于一个组件,你需要创建一个返回JSX代码的函数;比如在FlatList中的renderItem函数就必须返回JSX。
    • 报错是在React Native层面的,并没有映射到Vue Native代码。我们正在优化这个问题。

    可以用在生产环境吗?

    我们已经使用Vue Native将整个KitchenSink重写,你可以在生产环境使用它。不过你要记得它有局限性。

    Vue-Native是完全开源的,可以在Github找到源代码:vue-native-core

    博客结尾

    关于Fundebug

    Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用

    wechat_slogan.png

    版权声明

    转载时请注明作者Fundebug以及本文地址:
    https://blog.fundebug.com/2018/07/23/vue-native/

    转载于:https://www.cnblogs.com/fundebug/p/vue-native.html

    展开全文
  • vue-native-websocket · native websocket implementation for Vuejs 2 and Vuex Install yarn add vue-native-websocket # or npm install vue-native-websocket --save Usage Configuration Automatic ...
  • NativeScript empowers you to access native APIs from JavaScript directly. The framework currently provides iOS and Android runtimes for rich mobile development and can be utilized in a number of ...
  • Debugging Nativescript-Vue

    2021-01-11 20:07:10
    <div><h3>What problem does this feature solve? <p>I'm trying to debug my NativeScript-Vue app in Chrome by running npm run debug, opening the chrome ...nativescript-vue/nativescript-vue</p></div>
  • NativeScript-Vue应用程序 使用NativeScript-Vue构建的本机应用程序 建立 确保使用正确配置了 用法 # Install dependencies npm install # Build for production tns build < platform> --bundle # Build, watch for...
  • 详解Vue Native

    2019-03-06 10:18:36
    译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。 原文: Introducing Vue Native 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于...

    译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。

    为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

    尽管整个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>
       </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-ifv-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的下方。

    执行结果如下:

    Vue Native路由

    Vue Native使用vue-router来实现导航逻辑。我们来看看下面的实现:

    使用Vuex做状态管理

    你可以使用Vuex来管理状态,详情查看:Vuex

    局限性和已知问题

    • 有时候对于一个组件,你需要创建一个返回JSX代码的函数;比如在FlatList中的renderItem函数就必须返回JSX。
    • 报错是在React Native层面的,并没有映射到Vue Native代码。我们正在优化这个问题。

    可以用在生产环境吗?

    我们已经使用Vue Native将整个KitchenSink重写,你可以在生产环境使用它。不过你要记得它有局限性。

    Vue-Native是完全开源的,可以在Github找到源代码:vue-native-core

    关于Fundebug

    Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。

    版权声明

    转载时请注明作者Fundebug以及本文地址:
    https://blog.fundebug.com/2018/07/23/vue-native/

    展开全文
  • <div><p>We should not bundle Vue with nativescript-vue, and use the version installed in the {N} app. <p>Vue uses aliases internally, which fail when required directly, a possible solution would be to...
  • NativeScript-Vue-Navigator NativeScript-Vue-Navigator是适用于NativeScript-Vue的简单路由器实现。 快速开始 $ npm install --save nativescript-vue-navigator // main.js import Vue from 'nativescript-vue' ...
  • vue .native

    2020-04-29 12:09:06
    v-on是对 Vue 的事件体系封装后的 API 接口,官方文档中指出Vue 使用的是一套自己的事件传递机制,如@click等事件是经过 Vue 封装的。所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。 而.native...

    有时发现用一些第三方的组件库时,例如一个封装好的button按钮,绑定点击事件却没有任何作用,这时便需要加 .native

    原因:

    v-on 是对 Vue 的事件体系封装后的 API 接口,官方文档中指出Vue 使用的是一套自己的事件传递机制,如 @click 等事件是经过 Vue 封装的。所以在一些实际上处理 DOM 原生事件的场合需要添加额外的标识符。

    而.native就是给组件绑定原生事件采用的方法

    转自:https://blog.csdn.net/weixin_42347151/article/details/81289083

    展开全文
  • <div><p>Which percentage Do Nativescript-Vue cover Nativescript API engine?</p><p>该提问来源于开源项目:nativescript-vue/nativescript-vue</p></div>
  • tns-template-vue:具有TypeScript,PostCSS,Tailwind,Vuex,Vue Router,Webpack等的NativeScript Vue模板
  • <p>vue-cli · Failed to download repo nativescript-vue/vue-cli-template: tunneling socket could not be established, cause=getaddrinfo ENOTFOUND proxyserverpac proxyserverpac:80</p><p>该提问来源于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,315
精华内容 1,326
关键字:

nativevue

vue 订阅