修饰符 (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")
- }
- }
- })
结果
给某个组件的根元素上监听一个事件, 之后添加 .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 修饰符, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/138846.htm