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实例的过程时更容易形成好的逻 ...
随机推荐
- Java面向对象1（A~F）
QWQ请假一节课,错过一章内容,只能求助qsh了. C/C++训练1---最大公约数与最小公倍数(SDUT 1131) import java.util.*; class Number { int a ...
- mysql数据库的索引
什么是索引 索引就是一种优化查询的数据结构: 为什么要加索引 因为创建索引可以大大提高系统的查询性能. 怎么提高查询性能的 简单的理解:一张数据量比较大的表格如果没有添加任何索引,那我们在执行查询的时 ...
- csp-s模拟84
T1: 考虑如何能按顺序生成光滑数.对每个质数用队列维护包含此质数的候选集合,每次从所有队首取出最小的作为一个光滑数,用每个质数乘上这个光滑数并加入相应候选集合.这样不会漏掉一个光滑数,但会有重复.比 ...
- Linux kernel device mapper
Device Mapper 是 Linux2.6 内核中支持逻辑卷管理的通用设备映射机制,它为实现用于存储资源管理的块设备驱动提供了一个高度模块化的内核架构,如图 1. 图1 Device Mappe ...
- LeetCode 124. 二叉树中的最大路径和（Binary Tree Maximum Path Sum）
题目描述 给定一个非空二叉树,返回其最大路径和. 本题中,路径被定义为一条从树中任意节点出发,达到任意节点的序列.该路径至少包含一个节点,且不一定经过根节点. 示例 1: 输入: [1,2,3] 1 ...
- EBS登录问题小结
1 网络问题 1)ping IP 2)telnet IP 端口 备注:如果端口能访问则直接跳转,如果不能访问则报错如下所示: 2)配置host文件 如果访问的服务器在内网,则需要配置host信息 3) ...
- Rocketmq异步发送消息
package com.bfxy.rocketmq.quickstart; import java.util.List; import org.apache.rocketmq.client.excep ...
- quartz 定时器时间表达式
按顺序依次为 秒(~) 分钟(~) 小时(~) 天(月)(~,但是你需要考虑你月的天数) 月(~) 天(星期)(~ =SUN 或 SUN,MON,TUE,WED,THU,FRI,SAT) .年份(-) ...
- Android系统服务 —— WMS与AMS
“可以毫不夸张的说,Android的framework层主要是由WMS.AMS还有View所构成,这三个模块穿插交互在整个framework中,掌握了它们之间的关系和每一个逻辑步骤,你对framewo ...
- IPv4 ping命令
IPv4 ping命令 一.Linux操作系统 给一台 Linux 主机分配了一个 IPv4 的 IP地址,如何使用 ping命令 确定该 IP地址 能否 ping 通呢? 1.查看主机的 IPv4 ...