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实例的过程时更容易形成好的逻 ...
随机推荐
- Syn Flood 攻击
什么是SYN Flood攻击? SYN Flood (SYN洪水) 是种典型的DoS (Denial of Service,拒绝服务) 攻击.效果就是服务器TCP连接资源耗尽,停止响应正常的TCP连接 ...
- 在linux操作系统上进行简单的C语言源码的gcc编译实验
尝试在linux上用gcc 而非封装完好的codeblocks,vs等ide 来编译c和cpp源程序 首先查看我的gcc版本,我的是VM centos 自带的,没有的话得自行安装,安装上gcc就可以在 ...
- Atcoder ABC138
Atcoder ABC138 A .Red or Not 一道网速题. 大于3200输出原字符串,否则就输出red. #include<iostream> #include<cstd ...
- Java String和hadoop的Text差异性比较
Text类似于String,UTF-8编码.采用整型储存长度,最大长度为2GB. 补充编码知识: ASCII码 英语字母标点符号等256个字符,一个字节储存,取值0x00-0x7F; UNICODE编 ...
- 定义了char**p,为什么能用p[i][j]的形式？p又不是二维数组?
char **p;p[i][j]相当于*(*(p+i)+j) https://www.zhihu.com/question/63717863
- 【Eureka】 作为服务注册中心，Eureka比Zookeeper好在哪里
著名的 CAP 理论指出,一个分布式系统不可能同时满足 C(一致性) A(可用性) 和 P(分区容错性).由于分区容错性 P 是在分布式系统中必须保证的,因此我们只能在 A 和 C 之间进行权衡. Z ...
- Linux终端Terminal常用快捷键
快捷键 功能CTRL+ALT+T 打开终端Ctrl+a 光标移动到开始位置Ctrl+e 光标移动到最末尾Ctrl+k 删除此处至末尾的所有内容Ctrl+u 删除此处至开始的所有内容Ctrl+d 删除当 ...
- 使用AOP思想封装JDBC
看代码 package learning.aop2; import org.springframework.stereotype.Component; import java.sql.SQLExcep ...
- java(SSM)上传文件到七牛云（对象存储）
项目中会用到大量的图片和小视频,为了分担服务器压力,将文件都放在七牛云.这里的思路很简单, 就是移动端.pc端把文件上传到服务器,服务器做一个临时缓存,保存必要的信息到数据库后, 将文件上传到七牛云, ...
- nova创建虚拟机的详细过程
Nova 创建虚拟机详细过程