vue 事件中的 .native你搞清楚了吗
native是什么？
.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。
官网的解释：
你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。
通俗点讲：就是在父组件中给子组件绑定一个原生的事件，就将子组件变成了普通的HTML标签，不加'. native'事件是无法触发的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<button @click.native="clickFn">按钮</button>
</div>
<script src='vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
},
methods:{
clickFn () {
console.log('点击按钮了')
}
}
})
</script>
</body>
</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 事件中的 .native
vue组件添加事件@click.native native是什么? .native - 监听组件根元素的原生事件. 主要是给自定义的组件添加原生事件. 官网的解释: 你可能想在某个组件的根元素上监听一 ...
- Vue开发中的中央事件总线
在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...
- 在vue中下拉框切换事件中改新建表单中的一个值，页面不显示
事件中改新建表单中的一个值,页面不显示,当另一个对象值发生改变时,这个页面上的值才会显示 由于新建表单是弹窗,在弹出时会重新给每个字段重新赋值,在赋值时没给这个字段赋值(常见新加功能时,加了一个字段, ...
- vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- 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 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
随机推荐
- Leecode 21.合并两个有序链表（Java 迭代、递归两种方法）
想法: 1.迭代 设两个指针pa和pb,不断移动pa和pb,并进行比较,则将较小元素接到新链表,该过程直至pa或pb为null,之后将未空的接到已空之后,得到升序链表 1 //官方: 2 cl ...
- swagger 增强UI --knife4j
knife4j 文档: https://gitee.com/xiaoym/knife4j (1)简介 knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案,前身是sw ...
- python selenium 操作文件上传，并发操作时，文件选择窗口混乱解决方案
上传文件 使用的是 python + autoit 模块,这种方式有一个问题,当出现多条任务同时选择文件上传的时候,无法判断那个文件选择窗口的归属,从而出现上传了错误的文件! 解决方法: 要上载文件而 ...
- 如何基于 Agora Android SDK 在应用中实现视频通话？
在很多产品,实时视频通话已经不是新鲜的功能了,例如视频会议.社交应用.在线教育,甚至也可能出现在一些元宇宙的场景中. 本文将教你如何通过声网Agora 视频 SDK 在 Android 端实现一个视频 ...
- .NET应用系统的国际化-基于Roslyn抽取词条、更新代码
上篇文章我们介绍了 VUE+.NET应用系统的国际化-多语言词条服务 系统国际化改造整体设计思路如下: 提供一个工具,识别前后端代码中的中文,形成多语言词条,按语言.界面.模块统一管理多有的多语言词条 ...
- Linux报错：audit: backlog limit exceeded（审计：超出积压限制）
Linux报错:audit: backlog limit exceeded(审计:超出积压限制) 系统版本:CentOS Linux release 7.6.1810 (Core) 问题现象:一次巡检 ...
- flutter widget---->Spacer
如果你想灵活控制Flex容器(Row, Column)中子组件中的间隔,可以考虑使用Spacer.下面以Row为例子,来为它的子组件添加间距. use Spacer import 'package:f ...
- Java多线程（一篇从0讲透）
多线程 思维导图看天下: 1. 概述 并行与并发 并行 :指两个或多个事件在同一时刻发生(同时发生) 并发 :指两个或多个事件在同一个时间段内发生.(交替执行) 线程与进程 进程:是指一个内存中运行的 ...
- 最强绘图AI：一文搞定Midjourney（附送咒语）
最强绘图AI:一文搞定Midjourney(附送咒语) Midjourney官网:https://www.midjourney.com 简介 Midjourney是目前效果最棒的AI绘图工具.访问Mi ...
- Perceptron, Support Vector Machine and Dual Optimization Problem (3)
Support Vector Machines Perceptron and Linear Separability 假设存在一个 linear decision boundary,它可以完美地对 t ...