详解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 相关文章推荐
js变量、作用域及内存详解
Sep 23 Javascript
javascript手工制作悬浮菜单
Feb 12 Javascript
javascript闭包的理解
Apr 01 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
javascript ASCII和Hex互转的实现方法
Dec 27 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
JavaScript实现弹出窗口效果
Dec 09 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和ACCESS写聊天室(十)
2006/10/09 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php的ajax框架xajax入门与试用介绍
2010/12/19 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
php经典趣味算法实例代码
2020/01/21 PHP
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
2013/01/15 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
2015/07/29 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
angular 组件通信的几种实现方式
2018/07/13 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
python实现的各种排序算法代码
2013/03/04 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python csv模块使用方法代码实例
2019/08/29 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
师范生个人推荐信
2013/11/29 职场文书
求职简历自我评价范例
2014/03/12 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2014年管理工作总结
2014/11/22 职场文书
个人典型事迹材料
2014/12/30 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python