详解Vue.js中.native修饰符


Posted in Javascript onApril 24, 2018

修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧。

.native修饰符

官方对.native修饰符的解释为:

有时候,你可能想在某个组件的根元素上监听一个原生事件。可以使用 v-on 的修饰符 .native 。例如:

<my-component v-on:click.native="doTheThing"></my-component>

简单点理解就是:

给普通的HTML标签监听一个事件,之后添加 .native 修饰符是不会起作用的。例如:

HTML代码

<div id="app">
<a href="#" rel="external nofollow" v-on:click.native="clickFun">click me</a>
</div>

 JavaScript代码

new Vue({
el: '#app',

methods: {


clickFun: function(){



console.log("message: success")


}

}
})

结果

详解Vue.js中.native修饰符

给某个组件的根元素上监听一个事件,之后添加 .native 修饰符就会起作用了。例如:

HTML代码

<div id="app">
<my-component v-on:click.native="clickFun"></my-component>
</div>

JavaScript代码

Vue.component('my-component', {
template: `<a href='#'>click me</a>`
})
new Vue({

el: '#app',

methods: {


clickFun: function(){



console.log("message: success")


}

}
})

结果

详解Vue.js中.native修饰符

总结

以上所述是小编给大家介绍的Vue.js中.native修饰符,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
javascript 处理HTML元素必须避免使用的一种方法
Jul 30 Javascript
7个Javascript地图脚本整理
Oct 20 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
js读取并解析JSON类型数据的方法
Nov 14 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
微信小程序 video组件详解
Oct 25 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 Javascript
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
OpenLayers3实现测量功能
Sep 25 Javascript
Vue 动态设置路由参数的案例分析
Apr 24 #Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 #Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 #Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 #Javascript
vue中$refs的用法及作用详解
Apr 24 #Javascript
vue实现选项卡及选项卡切换效果
Apr 24 #Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 #Javascript
You might like
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php中$_POST与php://input的区别实例分析
2015/01/07 PHP
PHP 断点续传实例详解
2017/11/11 PHP
取选中的radio的值
2010/01/11 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
jQuery中对节点进行操作的相关介绍
2013/04/16 Javascript
Javascript无阻塞加载具体方式
2013/06/28 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
详解Webpack4多页应用打包方案
2020/07/16 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
Python中list列表的一些进阶使用方法介绍
2015/08/15 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
浅析PEP572: 海象运算符
2019/10/15 Python
python3 webp转gif格式的实现示例
2019/12/10 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
Python使用Pygame绘制时钟
2020/11/29 Python
Fanatics法国官网:美国体育电商
2019/08/27 全球购物
30年同学聚会感言
2014/01/30 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
SQL Server表分区删除详情
2021/10/16 SQL Server
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
muduo TcpServer模块源码分析
2022/04/26 Redis
MySql数据库触发器使用教程
2022/06/01 MySQL