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 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
随机推荐
- 二、pycharm的安装
1.python安装教程在上一篇已描述,详情查看: 2.安装pycharm 首先从网站下载pycharm:链接为:http://www.jetbrains.com/pycharm/download/# ...
- [UnityAI]行为树的中断机制
参考链接: https://www.cnblogs.com/01zxs/p/9863715.html https://blog.csdn.net/AcmHonor/article/details/12 ...
- 微信开发 回复用户消息 .net C#
前段时间开发了公司的微信 这里做个知识总结分享下经验,望一起学习..... 感觉后面写个系列的最好了 .... 企业需求: 给指定企业用户发送消息:如考勤信息. 企业通知.个人信息推送等等, /// ...
- Linux提权-权限升级
特权升级是一段旅程.没有灵丹妙药,很大程度上取决于目标系统的具体配置.内核版本.已安装的应用程序.支持的编程语言.其他用户的密码是影响您通往 root shell 之路的几个关键因素 什么是特权升级? ...
- Android笔记--Application
Application生命周期 在APP运行过程中有且仅有一个Application对象贯穿整个生命周期 Application全局变量 实例化: 声明全局变量:
- VMware虚拟机扩容--保姆级教学
由于项目逐步的完善,需要搭建的中间件,软件越来越多,导致以前虚拟机配置20G的内存不够用了,又不想重新创建新的虚拟机,退而求更精,选择扩容. 1.外部先进入虚拟机设置,将磁盘先扩展,具体提示如下图所示 ...
- 使用 Agora 为Android APP添加视频直播
add-live-streaming-to-your-android-app-using-agora-featured1024×512 121 KB 视频互动直播是当前比较热门的玩法,我们经常见到有P ...
- Agora 教程丨一个典型案例，教你如何使用水晶球“数据洞察”
7 月初,声网Agora 水晶球的"数据洞察"功能正式版上线."数据洞察"可显示两种数据,一种是用量,另一种是质量. "数据洞察"的&quo ...
- [ARC152D] Halftree题解
很好的一道题,即使是我这种菜鸡也感到心潮澎湃. 直觉有余,证明不足.思路有余,推导不足. 无论是什么比赛,对拍都是最有效的查错方式. 本篇题解里的所有图片采用 graph_editor 制作. 题意简 ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——21.汇编语言写硬盘实战
学习操作系统原理最好的方法是自己写一个简单的操作系统. 在上一讲中我们学习了用汇编语言读硬盘,本讲我们来学习用汇编语言写硬盘.同样也是设计一个简单的实验,实验内容为: 在内存中准备一段有特征的512字 ...