vue 事件中的 .native
vue组件添加事件@click.native
native是什么？
.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。
官网的解释：
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触 发的。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 </head>
7 <body>
8 <div id="app">
9 <button @click.native="clickFn">按钮</button>
10 </div>
11 <script src='vue.js'></script>
12 <script>
13
14
15 new Vue({
16 el:'#app',
17 data:{
18 },
19 methods:{
20 clickFn () {
21 console.log('点击按钮了')
22 }
23 }
24 })
25
26 </script>
27 </body>
28 </html>
此时点击页面中的按钮无任何反应。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<card @click.native="clickFn">按钮</card>
</div>
<script src='vue.js'></script>
<script> Vue.component('card',{
template:'<p>这是card组件<button>按钮</button></p>'
}) new Vue({
el:'#app',
data:{
state:false
},
methods:{
clickFn (e) {
console.log(e) //打印出MouseEvent对象
if (e.target.nodeName === 'IMG') { // 可以对点击的target标签进行判断
this.dialogImageUrl = file.target.src
this.dialogVisible = true
}
}
}
}) </script>
</body>
</html>
总结： .native - 主要是给自定义的组件添加原生事件，可以理解为该修饰符的作用就是把一个vue组件转化为一个普通的HTML标签，并且该修饰符对普通HTML标签是没有任何作用的。
vue 事件中的 .native的更多相关文章
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- 在vue中下拉框切换事件中改新建表单中的一个值，页面不显示
事件中改新建表单中的一个值,页面不显示,当另一个对象值发生改变时,这个页面上的值才会显示 由于新建表单是弹窗,在弹出时会重新给每个字段重新赋值,在赋值时没给这个字段赋值(常见新加功能时,加了一个字段, ...
- vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...
- vue项目中快捷语法糖
1.Vue.js是渐进式框架,采用自底向上增量开发的设计基于MVVM思想. 2.Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. 3.Vue.js 的目标是通过尽可能简 ...
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- vue.js中v-for的使用及索引获取
1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- vue.js中，input和textarea上的v-model指令到底做了什么？
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
随机推荐
- Jury Compromise
K - Jury Compromise 参考:ACM POJ 1015 Jury Compromise(陪审团的人选,动态规划题,难) 说实话真有点难想,用一个DP[i][j]来表示在选取i个人,辩控 ...
- Codeforces 645E. Intellectual Inquiry（DP，贪心）
Codeforces 645E. Intellectual Inquiry 题意:给定一串字符,由前k个小写拉丁字母组成,要求在该字符串后面补上n个字符(也从前k个小写拉丁字母里面选),使得最后得到的 ...
- TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器
TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器 任务清单 给自己取一个酷酷的id,并选择1-2个喜欢的方向.(只是初步选择,后期可更改) 改下群名片.例如yo ...
- postman设置环境变量，实现一套接口根据选择的环境去请求不同的url
一个系统,有本地,开发,测试,生产等不同的环境,如果写不同的url配置多套会比较麻烦,可以设置不同的环境实现不同的url之间的切换.配置之后如下: 第一步: 第二步: 添加环境变量 ps::不同的环境 ...
- JVM | JVM的核心技术
说到JVM,很多工作多年的老铁,可能就有点发憷了,因为搬砖多年,一直使用java这个工具,对于JVM没有了解过,有句话面试造航母,上班拧螺丝,要啥自行车啊,知道如何搬砖就可以了,为啥要懂这么多,如果你 ...
- 1.分布式配置中心 spring-cloud-config
pring Cloud 版本:2.1.0.RELEASE 一.server端 1.maven依赖 <dependency> <groupId>org.springframewo ...
- Going Deeper with Convolutions阅读摘要
论文链接:Going deeper with convolutions 代码下载: Abstract We propose a deep convolutional neural network ...
- 快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题
快速解决设置Android 23.0以上版本对SD卡的读写权限无效的问题 转 https://www.jb51.net/article/144939.htm 今天小编就为大家分享一篇快速解决设置And ...
- OpenCV、OpenCL、OpenGL、OpenMP的区别
OpenCV OpenCV的全称是:Open Source Computer Vision Library.OpenCV是一个开源发行的跨平台计算机视觉库,可以运行在Linux.Wind ...
- js实现动态显示时间
思路: *得到当前时间 var date = new Date(); //格式化为本地时间 var d1 = date.toLocaleString(); *使页面每秒显示一次时间 setInterv ...