前端学习笔记系列一:4 vue中@click.native
.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的更多相关文章
- 前端学习笔记系列一:3 Vue中的nextTick
一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. 模板 <div class="app"> <div ref="msgD ...
- vue 中 @click.native.prevent 事件
在项目中看到@click.native.prevent, 查了一点资料 总结一下, 1.给vue组件绑定事件时候,必须加上native ,否则会认为监听的是来自Item组件自定义的事件, 2.prev ...
- 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题
由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...
- 前端学习笔记系列一:10整体移动vscode代码块、VSCode 使用 stylus,配置格式化设置、在vue项目中引入bootstrap
1.整体移动vscode代码块 凭借操作的经验我们能够轻松地知道将代码整体往右移只需选中代码按Tab键即可.其实往左移也很简单: 选中之后按下 shift+Tab键 即可. 2.VSCode 使用 s ...
- 前端学习笔记系列一:7 在vscode中根据vue等模板生成代码
目标:希望每次新建.vue文件后,VSCODE能够根据配置,自动生成我们想要的内容. 方法:打开VSCODE编辑器,依次选择“文件 -> 首选项 -> 用户代码片段”,此时,会弹出一个搜索 ...
- 前端学习笔记系列一:5 在项目中引入阿里图标icon
进入到阿里的图标库网站,里面有上百万种icon,https://www.iconfont.cn,需要注册一个帐号,然后进入到这个页面,在这里点击右下角的带加号的图标,创建一个新的项目,名称与你要使用图 ...
- 前端学习笔记系列一:2 Vue的单文件组件
(1)非单文件vue组件和单文件vue组件的一般写法 一个完整的vue组件会包括三个部分:一是template模板部分,二是js程序逻辑部分,三是css样式部分.每个组件都有属于自己的模板,js和样式 ...
- 前端学习笔记系列一:14 vue3.X中alias的配置
第一步: 第二步: // vue.config.js module.exports = { configureWebpack: { resolve: { alias: { 'assets': '@/a ...
- 前端学习笔记系列一:12 js中获取时间new date()的用法
获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.get ...
随机推荐
- NOIP2016换教室 BZOJ 4720
BZOJ 4720 换教室 题目描述: 对于刚上大学的牛牛来说,他面临的第一个问题是如何根据实际情况申请合适的课程.在可以选择的课程中,有2n节 课程安排在n个时间段上.在第i(1≤i≤n)个时间段上 ...
- 在自定义的widget中引入图表后,运行时出现TypeError #1009错误
本人网上查找了很多资料,其中大部分都是关于Flash中的动画效果问题,与这里的问题关系型不太大.故把问题的解决方法写在这里,与人方便,与己方便. 方法一: 1.在自定义的widget中添加如下两个方法 ...
- 使用IDEA导入一个Maven风格的SSM项目
转自: 方法一: (我用的这种,导入的方法 File->New->Project from existing sources)(同理,important也是一样的) https://how ...
- JS实现对对象的深拷贝
手动遍历对象拷贝 /** * 深拷贝 * @param {*} obj 拷贝对象(object or array) * @param {*} cache 缓存数组 */ function deepCo ...
- SSM日常报错
mybatis配置时出现org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 解决方法: po ...
- nginx 的precontent阶段的ngx_http_try_files_module模块与mirrors模块介绍
指令介绍 Syntax: try_files file ... uri; try_files file ... =code; Default: — Context: server, location ...
- 汇编语言从入门到精通-5微机CPU的指令系统2
微机CPU的指令系统 5.2.2 标志位操作指令 标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 a.清进位指令CLC(Clear Carry Flag):CF ...
- Caffe2 载入预训练模型(Loading Pre-Trained Models)[7]
这一节我们主要讲述如何使用预训练模型.Ipython notebook链接在这里. 模型下载 你可以去Model Zoo下载预训练好的模型,或者使用Caffe2的models.download模块获取 ...
- SpringMVC——SSM整合
1.环境要求: IDEA MySQL 5.1.19 Tomcat 9 Maven 3.6.1 2.数据库环境搭建 创建一个存放书籍的数据库表 CREATE DATABASE `ssmbuild`; U ...
- Linux Kernel 5.5 最终删除 SYSCTL 系统调用
导读 Linux Kernel 5.5 最终消除了支持sysctl系统调用的代码,该代码已被弃用了大约十年,目前对任何体系结构的现代系统都没有影响. 长期以来,Linux sysctl系统调用都不建议 ...