详解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实现点击标题输入详细信息
Apr 16 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
bootstrap制作jsp页面(根据值让table显示选中)
Jan 05 Javascript
JQuery实现定时刷新功能代码
May 09 jQuery
JS实现简易的图片拖拽排序实例代码
Jun 09 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
微信禁止下拉查看URL的处理方法
Sep 28 Javascript
简述vue中的config配置
Jan 23 Javascript
layui实现数据表格隐藏列的示例
Oct 25 Javascript
js通过canvas生成图片缩略图
Oct 02 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
php实现图片缩略图的方法
2016/03/29 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
2013/11/12 Javascript
javascript获取元素CSS样式代码示例
2013/11/28 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript判断textarea值是否为空并给出相应提示
2014/09/04 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
JQuery工具函数汇总
2015/06/15 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
2016/12/02 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[43:35]EG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python与Redis的连接教程
2015/04/22 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python跨文件使用全局变量的实现
2020/11/17 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
武汉某公司的C#笔试题面试题
2015/12/25 面试题
大学生职业生涯规划范文
2013/12/31 职场文书
Python Pandas常用函数方法总结
2021/06/15 Python