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实例的过程时更容易形成好的逻 ...
随机推荐
- HGOI 20191101am 题解
Problem A awesome 给出一个序列$A_i$,任取序列中三个数组成三元组$(a_i , a_j , a_k)$. 输出本质不同的且$abc \equiv 1 (mod P)$且满足$a ...
- Dockerfile中echo使用
Dockerfile 中的echo的使用方式和bash中的使用方式是有区别的 下面是一个 Dockerfile 通过echo的方式更换apt-get源和pip源 FROM python:3.5.8-s ...
- loj6519 魔力环
解题思路 考虑顺时针旋转 \(i\) 步得到的结果,根据Burnside引理,有 \[ Ans=\frac{\sum\limits_{i=0}^{n-1}C(i)}{n} \] \(C(i)\) 为旋 ...
- bypass disable_function总结学习
通常bypass的思路如下 1. 攻击后端组件,寻找存在命令注入的.web 应用常用的后端组件,如,ImageMagick 的魔图漏洞.bash 的破壳漏洞 2. 寻找未禁用的漏网函数,常见的执行命令 ...
- XXE_payload
<?php $xmlfile = file_get_contents('php://input'); $creds=simplexml_load_string($xmlfile); echo $ ...
- TCP拥塞控制算法
转自浅谈TCP拥塞控制算法 本篇文章介绍了几种经典的TCP拥塞控制算法,包括算法原理及各自适用场景. 回顾上篇文章:浅谈 redis 延迟 前言 TCP 通过维护一个拥塞窗口来进行拥塞控制,拥塞控制的 ...
- FreeMarker学习（常用表达式）
直接指定值 字符串: "Foo" 或者 'Foo' 或者 "It's \"quoted\"" 或者 'It\'s "quoted& ...
- 使用 usb 调试的时候，连接上电脑没反应
使用 usb 调试的时候,连接上电脑没反应 原因: 手机上没有信任本计算机的授权,请在手机上信任该授权 解决方法: 原因就是手机上会有一个弹话框,让我们信任该计算机,我们才可以进行 usb调试 我们的 ...
- linux安装jdk1.8之后报错Error: dl failure on line 893的解决办法
问题描述:安装jdk1.8之后,输入java -version查看安装是否成功之后,报错: 报错如下: Error: dl failure on line 893 Error: failed /u ...
- LC 974. Subarray Sums Divisible by K
Given an array A of integers, return the number of (contiguous, non-empty) subarrays that have a sum ...