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 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
随机推荐
- 运行npm报错：无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本
npm报错 在 windows终端输入 vue init webpack app, 创建一个名为 app 的 Vue 项目时报错如下: 无法加载文件 D:\nodejs\node_global\web ...
- KERNEL1
WHAT IS KERNEL KERNEL是一个负责连接计算机硬件与软件的一个模块,当软件对硬件进行调用的时候,或者发送一些置零的时候,KERNEL负责将这些指令转化并发送给CPU或者计算机中其他硬件 ...
- MarkDown学习day1
# Markdown学习 ## 标题: #+"空格"+标题名字 为一级为标题 ##+"空格"+标题名字 为二级标题 同理几级标题就是几个#,最多支持6级标题 # ...
- gerrit部署使用
前言 gerrit是基于git的工具,code review功能是开发中很方便,此外它可以配合Jenkins进行自动化的编译工作.今天给大家分享一下gerrit在ubuntu的安装使用 作者:良知犹存 ...
- 加深印象篇之Servlet
环境配置 需要配置web.xml文件, <web-app> <servlet> <servlet-name>你起的一个类的名字</servlet-name&g ...
- nginx配置反向代理服务器，实现在https网站中请求http资源
网站使用nginx作为服务器,协议从http升级为https的注意事项. 具体升级步骤请点击搜索 1.首先,修改宝塔面板配置 选择配置文件,http请求重定向为https.所有80端口请求都重定向为h ...
- python创建线程传参误区记录
创建线程可以使用threading模块中的Thread子类: 其中Thread子类允许的参数如下: (self, group=None, target=None, name=None, args=() ...
- 5分钟带你彻底搞懂async底层实现原理！
ES2017 标准引入了 async 函数,使得异步操作变得更加方便. async 函数是什么?一句话,它就是 Generator 函数的语法糖.研究 async 的原理,就必须先弄清楚 Genera ...
- 使用golang+antlr4构建一个自己的语言解析器（二）
Antlr4文件解析流程 该图展示了一个语言应用程序中的基本流动过程 输入一个字符流,首先经过词法分析,获取各个Token 然后经过语法分析,组成语法分析树 Antlr4语法书写规范 语法关键字和使用 ...
- 几个对js帮助挺多的大佬写的博客
深入理解javascript原型和闭包(完结) JavaScript系列文章 同步异步回调DEMO知乎大佬的this与new解释 宏任务与微任务解析 js闭包 Vue项目中技巧ts学习 ES6基础入门 ...