精华内容
下载资源
问答
  • 主要介绍了详解Vue2.0之去掉组件click事件的native修饰,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vuenative的用法

    千次阅读 2019-10-23 15:44:19
    Vuenative的用法 native nativeVue.js官方的大致意思是监听自定义标签根标签的事件,将原生事件绑定到组件上,比如a标签可以直接绑定原生事件,但是如果你通过自定义封装了button标签,起成了名字myself-abutton...

    Vue中native的用法

    native

    native在Vue.js官方的大致意思是监听自定义标签根标签的事件,将原生事件绑定到组件上,比如a标签可以直接绑定原生事件,但是如果你通过自定义封装了button标签,起成了名字myself-abutton,这时候绑定事件就需要加上native了,下面写一个简单的例子方便理解:

    例子

    四个按钮,分别是普通标签不加native和加native,自定义标签不加native和加native

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script> 
    </head>
    <body>
    <div id="app">
      <button @click="add(this)">普通的html标签,不包含native的按钮</button><br/>
      <button @click.native="add(this)">普通的html标签,包含native的按钮</button><br/>
      <myself-button @click="add(this)"/></myself-button><br/>
      <myself-button @click.native="add(this.id)"/></myself-button>
      <div>
    </body>
      <script>
        Vue.component('myself-button', {
            template: `<button>我是自定义的标签</button>`
        });
        var vm=new Vue({
          el:"#app",
          data:{
          },
          methods:{
            add:function(obj){
              console.log(obj+'我触发了');
            },
          }
        });
      </script>
    </html>
    

    大家猜测一下哪个按钮会触发事件,下面我依次点击了四个按钮,console中的结果如图
    在这里插入图片描述
    现在native的作用就很显而易见了
    以上事例测试代码及输出来自JS Bin

    展开全文
  • Vue开发React Native应用详解

    千次阅读 2019-04-09 20:41:42
    概述 自从2015年4月React Native...不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃用React Native ,不管如何,React Native 的跨平台的目的是很诱惑的。 紧接着google发布了跨平台框架Flutter...

    概述

    自从2015年4月React Native 发布以来后,关于移动跨平台的话题就层出不穷,不管是大公司还是小公司都在开始使用React Native 来开发跨平台App。不过,也有公司对React Native 并不看好,如Airbnb在去年就开始宣布弃用React Native ,不管如何,React Native 的跨平台的目的是很诱惑的。

    紧接着google发布了跨平台框架Flutter,对于这个颠覆式的框架,可以说受到大多数开发者和公司的青睐,因为它是google开发的,目前活跃度明显超过了React Native。

    自从Flutter诞生后,React Native已经感受到了压力,因此加快了优化的进度。去年底公布了优化方案,目前正在重构js引擎,最大提升js的性能问题。毕竟React Native低层还是基于原生的系统去做的,目前来看有一定的优势,而且社区庞大,短期用户量还是有的。Flutter虽然流畅,UI层独立,但是很多插件还是要基于原生系统架构,不能完全独立。

    但是,不管是React Native还是Flutter,它们都不能脱离原生系统,除非android和iOS系统被另外一个系统取代。所以,不管未来如何,对于前端同学来说,React Native还是很有诱惑力的,它让前端同学有能力开发媲美原生应用的能力。

    在前端框架中,作为仅次于React 的框架,Vue在国内的趋势可以说已经超过React,更是受到广大程序员的喜爱。正是基于此,一家名叫GeekyAnts 的印度公司开发了 Vue Native,病用它来开发基于 React Native 的跨平台应用。

    Vue Native

    安装

    安装Vue Native可以使用vue-native-cli脚手架方式,安装的命令如下:

    npm install -g vue-native-cli
    

    新建项目

    安装vue-native-cli工具后,接下来就可以使用vue-native-cli的命令行来新建Vue Native应用。

    vue-native init <projectName>
    cd <projectName>
    

    安装依赖包

    创建项目后,还需要安装以下一些依赖包:

    npm install vue-native-core vue-native-helper —save
    npm install vue-native-script —save-dev
    

    Hello Word

    例如,下面是一个使用Vue编写的React Native程序,运行效果如下图:
    在这里插入图片描述
    和 React Native使用React一样,Vue Native使用的是Vue语法,开发者可以直接使用Vue语法来开发跨平台应用,对于熟悉Vue的开发者来说,使用Vue来开发移动应用可谓得心应手。
    和React Native一样,使用vue-native-cli初始化一个新的 app时,app的入口文件为App.vue。并且,开发者可以使用很多.vue文件来组合一个新的.vue文件,在app编译时系统会将所有的vue 文件翻译成以.js 后缀的 React 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>
    

    运行效果如下:
    在这里插入图片描述

    示例

    KitchenSink

    KitchenSink是一个使用Vue 重写的Vue Native应用,源码地址为:https://github.com/GeekyAnts/KitchenSink-Vue-Native,可以下载源码并进行二次开发。

    Todo

    除了KitchenSink外,你也可以下载ToDo 应用,它是GeekyAnts 的高级软件工程师Ankit Singhania使用 Vue Native 编写的Vue Native应用,下载地址为:https://github.com/ankitsinghania94/vue-native-todo-app

    其他

    Vue Native 使用vue-router来实现导航逻辑,我们来看看下面的实现:
    在这里插入图片描述
    应用的状态,使用的是Vuex,具体可以参考Vue官网
    当然,这个库目前还在开发和升级中,并且React Native本来就很坑,Vue Native不过是为Vue开发移动应用提供了可能,还不好用目前并不好说。

    展开全文
  • Airbnb 宣布放弃使用 React NativeVue超越了React? 前端每周清单专注大前端领域内容,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信...

    Airbnb 宣布放弃使用 React Native,Vue超越了React?

     

    前端每周清单专注大前端领域内容,帮助开发者了解一周前端热点;分为新闻热点、开发教程、工程实践、深度阅读、开源项目等栏 目。欢迎关注【前端之巅】微信公众号(ID: frontshow),及时获取前端每周清单。

     

    新闻热点

    国内国外,前端最新动态

    Vue.js超越React.js?勿以star数论高低!:近日,在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量,并在不久之后双双破了10W。

    纵观过去两年的数据,我们可以看到,与 github 的 star 数形成鲜明对比的是,根据 NPM 软件包的下载量来衡量,React 仍然在实际使用方面占据主导地位。它即将超过每月1000万的巨大下载量,并且还一直保持着高速的增长。

    但在过去的两年中,Vue 的增长速度比其他任何主流的 JavaScript 框架都快,最近赶上了 Angular.js,并逐渐缩小了它与 Angular 和 React 之间的差距。

    Airbnb 宣布放弃使用 React Native,回归使用原生技术:6月20日,Airbnb 技术团队在 Medium 上宣布,Airbnb 放弃使用 React Native,将回归到使用基于原生技术的自有框架开发 App。

    Airbnb 表示,尽管很多团队都依赖 React Native 并计划在可预见的将来使用它,但他们最终还是无法实现最初的目标。Airbnb 放弃使用 React Native 的主要原因是 React Native 未能实现完全的跨平台抽象,有时候仍然需要针对特定平台单独编写代码来解决问题。这就间接要求他们的工程师必须熟悉三个平台才能真正用好 React Native,然而绝大多数开发者只熟悉一两个平台,久而久之便引发了一系列的问题。

    Google发布Flutter预览版:6月21日,在北京 GMTC 大前端大会上,Google Flutter 高级工程师于潇宣布 Flutter Release Preview 1发布,并宣布与阿里巴巴闲鱼团队在 Flutter 上合作,这标志着 Flutter 进入了一个新阶段。在Google I/O大会之后,Flutter 生态得到了快速地增长,Flutter 的活跃用户增长了 50%,不仅如此,在 I/O 大会之后的几周内,在全世界范围内,已有超过 150 个与 Flutter 相关的事件发生。

    Flutter 团队表示,Flutter 从 beta 版本到现在的Release Preview 1,都体现了他们对稳定性和质量的信心和关注。

     

    开发教程

    步步为营,掌握基础技能

    大话大前端时代:Vue 与 iOS 的组件化(上):笔者是一名普通的全职 iOS 开发者,在接触到了前端开发以后,发现了前端有些值得移动端学习的地方,于是便有了这个大前端时代系列的文章,希望两者能相互借鉴优秀的思想。谈及到大前端,常常被提及的话题有:组件化,路由与解耦,工程化(打包工具,脚手架,包管理工具),MVC 和 MVVM 架构,埋点和性能监控。笔者先从组件化方面谈起,以前端和移动端(以 iOS 平台为主)对比为主,看看这两端的不同做法,并讨论有无相互借鉴学习的地方。

    服务端与客户端同构 —— Vue.js 应用框架 Nuxt.js:很多现代的JavaScript框架,比如Vue.js, 旨在构建单页应用(SPA)。单页应用的优势在于,改善用户体验,让网页速度更快,像APP一样流畅,即使更新。虽然单页应用优点很多,但是由于依赖多导致首屏渲染慢,无法做seo优化也是让人头疼的问题。

    服务端渲染是指,提前将页面在服务器端渲染好,当浏览器请求服务器时,直接返回渲染好的html页面返回。构建服务端渲染的JavaScript程序多少有些无趣,在开始编码之前,需要大量的基础配置。因此,解决vue.js服务端渲染问题的Nuxt.js产生了。

    通过本文,你讲学习到如何利用 Nuxt.js 搭配 Vue.js 构建服务端渲染的 JavaScript 应用程序。还学会如何使用其 generate 命令来生成我们页面的静态文件,并且,可以利用 Firebase Hosting 这样的静态托管工具部署。

     

    工程实践

    立足实践,提示实际水平

    美团外卖Android Crash治理之路:Crash率是衡量一个App好坏的重要指标之一。如果你忽略了它的存在,它就会得寸进尺,愈演愈烈,最后造成大量用户的流失,进而给公司带来无法估量的损失。本文讲述美团外卖Android客户端团队在将App的Crash率从千分之三做到万分之二过程中所做的大量实践工作,抛砖引玉,希望能够为其他团队提供一些经验和启发。

    太平洋保险CIMS系统微前端实践:微前端的概念最早由 ThoughtWorks 在 2016 年底提出,是一种将微服务推广到前端的设计理念。(https://micro-frontends.org/),目前的趋势是构建一个功能丰富且功能强大的浏览器应用程序,也就是位于微服务架构之上的单页应用程序(SPA)。

    微前端可以有效的降低前端的代码复杂度和更加灵活的解耦,甚至可以很好的组合当前流行的各种前端框架,例如 Vue,React,Angluar。同时, 微前端服务可以有自己的独立生命周期。在本文中,作者将告诉我们太平洋保险是如何利用微前端改造CIMS系统的。

    苏宁金融移动端登录优化之道:在登录优化过程中,苏宁金融秉持“图难于其易,为大于其细的思想”,已经达成登录响应时间、成功率及用户体验的提升。本文主要从如下几个方面介绍苏宁金融移动端登录优化的道和术:找到登录优化之道、完善系统的监测和度量、梳理登录的每个环节、优化登录的各个环节。

    大型网站的 HTTPS 实践:协议层以外的实践:百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS 性能优化涉及到大量内容,在前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列文章将对此一一进行介绍。

     

    深度阅读

    深度思考,升华开发智慧

    浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层:本文会在主要描述以 Vue 技术栈为技术主体,ToC 端项目业务主体,在构建过程中,遇到或者总结的点(也会提及一些 ToB 项目的场景)。主要包括选择单页面还是多页面,全局配置、插件与拦截器,以及路由配置与懒加载等。

    深入理解JavaScript this:要说 JavaScript 这门语言最容易让人困惑的知识点,this 关键词肯定算一个。JavaScript 语言面世多年,一直在进化完善,现在在服务器上还可以通过 node.js 来跑 JavaScript。显然,这门语言还会活很久。

    所以说,如果你是一个 JavaScript 开发者或者说 web 开发者,学好 JavaScript 的运作原理以及语言特点肯定对你以后大有好处。不过你首先需要学变量作用域和作用域提升、JavaScript 的函数、闭包这些基础知识才能更好地理解this。

     

    开源项目

    乐于分享,共推前端发展

    JSUI:JSUI是一个强大的用于管理JavaScript应用程序的UI工具包,无论是前端还是后端应用程序,也不管应用什么框架,如果它有package.json,就能使用这个库。

    vue-native-core:vue-native是一个使用JavaScript构建跨平台原生移动应用程序的框架。它用Vue Native CLI生成Vue Native应用程序,这意味着Vue Native可以做任何React Native能做的事。

    spritejs:SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架,可以基于 canvas 快速绘制结构化 UI、动画和交互效果,并发布到任何拥有canvas环境的平台上(比如浏览器、小程序和node)。

    展开全文
  • vue中的.native

    2020-07-06 16:48:49
    vue中的.native修饰符 如果你想在某个组件的根元素上绑定事件,直接使用 @click=’‘function’ 是不生效的,我们可以添加.native修饰符 @click.native=’‘function’’

    vue中的.native修饰符
    如果你想在某个组件的根元素上绑定事件,直接使用 @click=’‘function’ 是不生效的,我们可以添加.native修饰符 @click.native=’‘function’’

    展开全文
  • 1,给vue组件绑定事件时候,必须加上native ,不然不会生效(注意给普通标签加.native无效) 2,在组件上v-on时,我们监听的是组件的自动触发的自定义事件, 3,等同于在自定义组件中: 子组件内部处理click事件然后...
  • 支持NativeScript-Vue NativeScript-Vue是由MIT许可的开源项目,由我们的赞助商提供: 这些优秀的支持者: 蒂亚戈·阿尔维斯(Tiago Alves) 卡门·邦德夫(Kamen Bundev) 扬·韦勒 OpenLitterMap 阿帕拉吉塔...
  • 适用于NativeScript-Vue的简单路由器实现。 先决条件/要求 您自己的所有组件都必须具有唯一的名称 所有路线名称必须具有唯一的名称 您的应用需要渲染中的主框架 安装 npm install nativescript-vue-router-ns --save...
  • vue中@click.native的使用

    千次阅读 2020-08-25 11:04:55
    vue中@click.native 在组件中时常看到@click.native。在项目中遇到后,简单介绍下: 一丶@click.native是给组件绑定原生事件 我的标签 ‘ListCell’ 是子组件引到当前父组件 因为当父组件中引入子组件的时候,当要...
  • 我们在给vue组件添加事件的时候,有时需要添加native。 当我们想在vue根组件监听原生事件的时候,我们可以使用v-on的修饰符native 比如,我们给router-link标签添加cilck事件,如果不加native,事件是不会发生的,...
  • 详解Vue Native

    千次阅读 2018-07-24 10:16:03
    译者按: 一家叫GeekyAnts的印度公司开发了Vue Native,基于React Native实现。 原文: Introducing Vue Native 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅...
  • Flutter 、Vue、React Native 、Weex哪个好

    千次阅读 2020-03-10 23:43:14
    跨平台项目GSYGithubApp系列三大开源版本比较(Flutter 、React Native 、Weex) vue react angularjs这三个是同一类型...weex和react native是基于vue和react改造的移动端混合开发框架,把网页包装成app,可以通过...
  • npm install --save vue-native-notification 用法 添加插件 import Vue from 'vue' import VueNativeNotification from 'vue-native-notification' Vue . use ( VueNativeNotification , { // Automatic ...
  • 前言 本笔记主要基于官方文档《迁移...Vue 2.x 的 .native 修饰符 在 Vue 2.x,如果想要在一个组件的根元素上直接监听一个原生事件,需要使用v-on 的 .native 修饰符。 <base-input v-on:focus.native="onFocus">
  • vue @click.native和@click.stop和@click.self

    万次阅读 多人点赞 2019-05-10 17:02:11
    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用.native修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件:$emit("click".fn) 参考二: ...
  • vue/no-deprecated-v-on-native-modifier Disallow using deprecated .native modifiers (in Vue.js 3.0.0+)
  • vue中'. native'修饰符的使用

    万次阅读 多人点赞 2018-06-22 11:47:27
    可以使用 v-on 的修饰符 .native 。 通俗点讲:就是在父组件中给子组件绑定一个原生的事件,就将子组件变成了普通的HTML标签,不加'. native'事件是无法触 发的。 此时点击页面中的按钮无任何反应。 ...
  • 使用在React Native中运行Vue组件 React系统 由于Vue清晰的分层设计,我们可以轻松地拉出React系统(压缩为9 KB),并驱动React组件渲染。 npm install --save react-vue import React , { Component } from 'react...
  • react和vue都是web端框架,运行在浏览器的。react native和weex是用前端的方法写native app, 即手机应用,能在app store下载的那种,用的是框架自定义的组件。而且具有一次开发,同时生成android、ios、uwp等平台的...
  • vue2.0 阻止冒泡, native

    千次阅读 2019-06-14 17:40:26
    事件修饰符 在事件处理程序中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。...为了解决这个问题, Vue.js 为v-on提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 ...
  • vue @click.native的使用

    2019-10-16 17:31:58
    如果想给自己封装的或者是第三方的组件添加click事件的时候需要使用 @click.native,而不是@click,@click在给组件添加的时候是不会生效的 比如给第三方添加@click.native的方法: ...
  • nativescript-vue-extend 带有有用代码段的vscode扩展,用于开发NativeScript-Vue移动应用程序。 基于NativeScript XML代码片段扩展,但适用于Vue绑定,并添加了与XML模板系统无关的其他代码片段。 所有代码片段...
  • Vue + Web + Native是基于和的样板,允许同时开发Web和本机应用程序。 内容 开始之前 Vue + Web + Native使用编译所有文件。 这些是主要功能。 最新版本的vue-loader 最新版本的nativescript CSS / SCSS / SASS ...
  • awesome-nativescript-vuenativescript vue的资源
  • NativeScript-Vue Typescript入门套件 NativeScript-Vue + Typescript入门套件,可快速启动并运行 你得到了什么 该入门工具包旨在通过将打字稿集成到我们的项目中来使您的开发环境尽可能高效,我们将从语言强大的...
  • npm install vue-native-color-picker 进口 全球范围内: import InputColorPicker from "./vue-input-color-picker"; Vue.use(InputColorPicker); 或本地: import InputColorPicker from 'vue-native-color-...
  • GitHub: react-vue 前言 react-vue 为两大前端框架搭了一座桥,它主要有三种用法 使用 Vue 的响应式系统驱动 React 渲染 使用 react-vue-loader 将 Vue...使用 react-vue-native-script 在 React Native 下运行 Vue...
  • vue-native-websocket· Vuejs 2和Vuex的本地websocket实现 安装 yarn add vue-native-websocket # or npm install vue-native-websocket --save 用法 配置 通过URL字符串自动进行套接字连接 import VueNativeSock ...
  • 今天小编就为大家分享一篇vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • NativeScript-Vue多抽屉 一个插件,提供支持多个抽屉的抽屉组件。 所有抽屉都是可选的,并且可以单独配置。 特征: 左侧,右侧,顶部和底部的抽屉 滑动即可打开 滑动以关闭 轻按外部以关闭 打开抽屉时,主要内容...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,157
精华内容 11,262
关键字:

nativevue

vue 订阅