详解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右键菜单contextMenu使用实例
Sep 28 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
Apr 03 Javascript
IE中图片的onload事件无效问题和解决方法
Jun 06 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
快速掌握Node.js环境的安装与运行方法
Feb 16 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
基于html+css+js实现简易计算器代码实例
Feb 28 Javascript
详解Vue.js 响应接口
Jul 04 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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
PHP5 安装方法
2006/10/09 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP滚动日志的代码实现
2015/06/10 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP读取大文件的多种方法介绍
2016/04/04 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
JavaScript通过字符串调用函数的实现方法
2015/03/18 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
最常见的左侧分类菜单栏jQuery实现代码
2016/11/28 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
vue初始化动画加载的实例
2018/09/01 Javascript
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python 实现两个列表里元素对应相乘的方法
2018/11/14 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
美国体育用品商店:Rally House(NCAA、NFL、MLB、NBA、NHL和MLS)
2018/01/03 全球购物
亚洲航空公司官方网站:AirAsia
2019/11/25 全球购物
低碳环保演讲稿
2014/08/28 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
职工食堂管理制度
2015/08/06 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android