.native - listen for a native event on the root element of component.

作用:[给组件绑定原生事件]

例子:如果使用router-link标签,加上@click事件,绑定的事件会无效因为:router-link的作用是单纯的路由跳转,会阻止click事件,你可以试试只用click不用native,事件是不会触发的。此时加上.native,才会触发事件。

题外话:

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

前端学习笔记系列一:4 vue中@click.native的更多相关文章

  1. 前端学习笔记系列一:3 Vue中的nextTick

    一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgD ...

  2. vue 中 @click.native.prevent 事件

    在项目中看到@click.native.prevent, 查了一点资料 总结一下, 1.给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件, 2.prev ...

  3. 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

  4. 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap

    1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...

  5. 前端学习笔记系列一:7 在vscode中根据vue等模板生成代码

    目标:希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法:打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索 ...

  6. 前端学习笔记系列一:5 在项目中引入阿里图标icon

    进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...

  7. 前端学习笔记系列一:2 Vue的单文件组件

    (1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...

  8. 前端学习笔记系列一:14 vue3.X中alias的配置

    第一步: 第二步: // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/a ...

  9. 前端学习笔记系列一:12 js中获取时间new date()的用法

    获取时间: 1  var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.get ...

随机推荐

  1. SSL 证书格式普及,PEM、CER、JKS、PKCS12

    根据不同的服务器以及服务器的版本,我们需要用到不同的证书格式,就市面上主流的服务器来说,大概有以下格式: .DER .CER,文件是二进制格式,只保存证书,不保存私钥. .PEM,一般是文本格式,可保 ...

  2. 电脑读取U盘总提示格式化

    参考: https://zhidao.baidu.com/question/588981499.html 1.进入命令提示符界面:在此我们需要以管理员的身份进入命令提示符界面,可以通过右击桌面左下角的 ...

  3. [ DLPytorch ] 文本分类&图像增强

    图像增强 图像增广(image augmentation)技术通过对训练图像做一系列随机改变,来产生相似但又不同的训练样本,从而扩大训练数据集的规模.图像增广的另一种解释是,随机改变训练样本可以降低模 ...

  4. Nginx禁止使用ip访问,只允许使用域名访问

    Nginx虚拟主机配置,vhosts下面有很多域名的配置: [root@external-lb01 vhosts]# pwd/data/nginx/conf/vhosts [root@external ...

  5. 【代码总结】GD库中添加图片水印

    函数 getimagesize() bool imagecopymerge( resource dst_im, resource src_im, int dst_x, int dst_y, int s ...

  6. 02-05Android学习进度报告五

    今天主要学习了关于Android 开发的关于进度条和拖动条的知识. 主要学习了一些关于进度条的基本属性: android:max:进度条的最大值 android:progress:进度条已完成进度值 ...

  7. BKP寄存器

    STM32的BKP: 备份寄存器是42个16位的寄存器,可用来存储84个字节的用户应用程序数据.他们处在备份域里,当VDD电源被切断,他们仍然由VBAT维持供电.当系统在待机模式下被唤醒,或系统复位或 ...

  8. AJAX请求返回JSON数据动态生成html

    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...

  9. FFmpeg——AVCodec,AVCodecContext,AVCodecParameters 辨析

    先贴上雷神的一张FFmpeg关键结构体之间的关系图: 再看雷神的分析: 每个AVStream存储一个视频/音频流的相关数据: 每个AVStream对应一个AVCodecContext,存储该视频/音频 ...

  10. 五、Centos7安装mysql:第一步查看系统有无mysql,然后删除之

    CentOS下MySQL的彻底卸载 原创 2015年10月12日 00:16:02 标签: 21149 编辑 删除 #################CentOS7下MySQL的卸载######### ...