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 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
随机推荐
- HTTP 协议相关
一. HTTP常见请求头 1. Host (主机和端口号) 2. Connection (连接类型) 3.Upgrade-Insecure-Requests (升级为HTTPS请求) 4. User- ...
- typescript 的动态引入组件
环境: Arco Pro + Vue3 vite自身对动态字符串形式的组件引入是有限制的, 以下写法会报错 官方文档中也对此有做说明, 只能通过固定形式去引用 以下形式不会报错, 但这种固定格式的局限 ...
- Android错误之--Error retrieving parent for item: No resource found that matches the given name 'Theme.A
改正错误 (虽然内容较少,但是还是选择单独占用一篇) 这个错误,可以说是困扰了我好久,然后就看到可以改变一下使用的Android版本,改成Android 4.0,然后就去试了试,发现真的就好了耶! 就 ...
- 声网 X 在线自习室 同学陪伴、老师监督的在线自习是如何火出圈的？
实时互联网像触角一样,通过情景的共享延伸开来,链接着我们彼此的线下.线上生活,形成一张不可分割的网络.随着社交直播.在线教育.视频会议成为大众生活不可或缺的一部分的同时,智能手表.智能作业灯.视频双录 ...
- return、break与continue的区别
前言 在上一篇文章中,壹哥给大家介绍了while.do-while两种循环结构,并且给大家总结了两种循环的区别.实际上,我们在利用循环执行重复操作的过程中,还存在着另一个需求:如何中止,或者说提前结束 ...
- 如何通过Java应用程序将PDF转为图片格式？
PDF文件和图片文件,这是两种完全不一样的格式,可是有的时候这两种格式却是有相互转换的需要,大家在工作中遇到PDF文件转图片文件的问题时是怎么解决的呢?你们使用的方法简单方便吗?如果很麻烦的话,不妨来 ...
- ML - Regression
Regression Machine Learning 机器学习的意义就在于让机器具备找一个函数(function)的能力 Different types of Functions Regressio ...
- golang 中的 cronjob
引言 最近做了一个需求,是定时任务相关的.以前定时任务都是通过 linux crontab 去实现的,现在服务上云(k8s)了,尝试了 k8s 的 CronJob,由于公司提供的是界面化工具,使用.查 ...
- Azure Terraform（十三）提升 Azure Web App Plan 的性能
一,引言 一,引言 我们是否正在为部署在云主机上的应用程序性能缓慢和停机问题而苦恼?我们是否正在因为云主机上仅仅部署了应用程序,在流量平缓的时候而浪费大量的计算资源而心疼荷包.那么让我们来一起看看 A ...
- go微服务框架kratos学习笔记三(构建单独的http或者grpc demo项目)
go微服务框架kratos学习笔记三(构建单独的http或者grpc demo项目) 前面两篇跑通了demo项目,和大概了解了kratos demo整体结构,本篇分别构建一个http和一个grpc微服 ...