欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Vue.js中.native修饰符使用详解

程序员文章站 2022-04-10 17:08:57
...
这次给大家带来Vue.js中.native修饰符使用详解,Vue.js中.native修饰符使用的注意事项有哪些,下面就是实战案例,一起来看一下。

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

.native修饰符

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

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

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

简单点理解就是:

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

HTML代码

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

JavaScript代码

new Vue({
  el: '#app',
  methods: {
    clickFun: function(){
      console.log("message: success")
    }
  }
})

结果

Vue.js中.native修饰符使用详解

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

HTML代码

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

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修饰符使用详解

相信看了本文案例你已经掌握了方法,更多精彩请关注其它相关文章!

推荐阅读:

微信小程序中图片如何自适应机型高度

jQuery创建自定义选择器步骤详解

怎么取得Url中Get参数

以上就是Vue.js中.native修饰符使用详解的详细内容,更多请关注其它相关文章!