前端学习笔记系列一: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 ...
随机推荐
- tkinter学习(1)
1.hit_me的一个简单tk窗口学习1.1 代码: import tkinter as tk win = tk.Tk() win.title('my first window') #定义标题,如果未 ...
- 解决前端项目启动时报错:Use // eslint-disable-next-line to ignore the next line.
首先说一下这个问题产生的原因: 项目创建时设置了使用 eslint 进行代码规范检查. 解决办法: 找到webpack.base.conf.js文件,并且将下满这行代码注释掉. ...(config. ...
- 树莓派 Ubuntu mate 16.04 下开启vncserver(自动启动+改分辨率)
树莓派 Ubuntu mate 16.04 下开启vncserver(自动启动+改分辨率) 参考博文:https://blog.csdn.net/Mr_dhy/article/details/8282 ...
- mybatis源码探索笔记-5(拦截器)
前言 mybatis中拦截器主要用来拦截我们在发起数据库请求中的关键步骤.其原理也是基于代理模式,自定义拦截器时要实现Interceptor接口,并且要对实现类进行标注,声明是对哪种组件的指定方法进行 ...
- java 作业11.4
package text3; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; import ...
- mcast_get_if函数
#include <errno.h> int sockfd_to_family(int); int mcast_get_if(int sockfd) { switch (sockfd_to ...
- java编译中出现了Exception in thread “main" java.lang.UnsupportedClassVersionError
这个问题确实是由较高版本的JDK编译的java class文件试图在较低版本的JVM上运行产生的错误. 1.解决措施就是保证jvm(java命令)和jdk(javac命令)版本一致.如果是linux版 ...
- device supports x86 but apk only supports armeabi-v7a问题解决
我们可以在build.gradle中有ndk这段代码,只要在后面加上“x86”,再sync now一下,就发现可以运行了. ndk { abiFilters "armeabi-v7a&quo ...
- Struts2 处理AJAX请求
Struts2整合AJAX有2种方式: 使用type="stream"类型的<result> 使用JSON插件 使用type="stream"类型的 ...
- Mac OS删除文件夹和文件的命令
https://www.jianshu.com/p/0376bf0514e3 2017.08.18 17:27* 字数 219 阅读 16709评论 0喜欢 0 rmdir删除空目录,不过一旦目录非空 ...