Vue.js で .native 修飾子を使用する方法

今回は、Vue.js で .native モディファイアを使用する方法と、Vue.js で .native モディファイアを使用する際の注意点について説明します。以下は実践的なケースです。

修飾子は、半角ピリオド . で指定される特別な接尾辞で、コマンドを特別な方法でバインドする必要があることを示すために使用されます。この記事では 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")
　　　　}
　　}
})

Result

コンポーネントのルート要素でイベントをリッスンし、.native 修飾子を追加すると機能します。例:

HTML コード

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

JavaScript コード

Vue.component('my-component', {
　　template: `click me`
})
new Vue({
　　el: '#app',
　　methods: {
　　　　clickFun: function(){
　　　　　　console.log("message: success")
　　　　}
　　}
})

Result

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 の他の関連記事に注目してください。 phpの中国語サイトです！

推奨書籍:

Vue で各国言語を切り替える方法

Vue プロジェクトを国際的に開発する方法

以上がVue.js で .native 修飾子を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。